WPF 標準コントロールデモアプリ › ListView
ListView List
ListView は ListBox を拡張したリストコントロールです。GridView を使うことで列ヘッダー付きの表形式表示が可能になります。列のリサイズや並べ替えもサポートしています。
概要
WPF の ListView は ListBox を継承したコントロールで、View プロパティに GridView を設定することで列ヘッダー付きの表形式リストを表示できます。DataGrid より軽量で、読み取り専用の表形式表示に適しています。
GridView は ViewBase を継承したクラスで、Columns プロパティに GridViewColumn の集合を定義します。各列には Header(列ヘッダーテキスト)と DisplayMemberBinding(表示するプロパティへのバインド)または CellTemplate(カスタム表示)を設定します。
AllowsColumnReorder="True" を GridView に設定すると、ユーザーが列ヘッダーをドラッグして列の順序を変更できます。列幅はドラッグでリサイズ可能です。
ListBox と同様に SelectionMode で選択モードを制御でき、SelectedItem や SelectedItems を通じて選択アイテムを取得できます。
画面キャプチャ

デモしているプロパティ
以下のプロパティが WPF 標準コントロールデモアプリでインタラクティブにデモされています。
| プロパティ | 設定値 | 説明 |
|---|---|---|
View | ViewBase (GridView) | 列ヘッダー付きの表形式でデータを表示したい場合(ファイル一覧・従業員リスト・ログビューアーなど)に GridView を設定します。GridView を設定すると各行が水平方向のセルに分割され列ヘッダーが表示されます。DataGrid より軽量で読み取り専用の表形式表示に適しています。View プロパティは ViewBase を継承したオブジェクトのみ受け付け、標準で提供されているのは GridView のみです。複雑なカスタマイズが必要な場合は DataGrid の使用を検討してください。 |
Columns (GridView) | GridViewColumnCollection | 各列に表示するデータプロパティ・ヘッダーテキスト・列幅を定義する際に使用します。DisplayMemberBinding でシンプルなテキスト表示、CellTemplate でボタン・画像などカスタム表示が必要な列に使用します。定義した順序で列が表示され、AllowsColumnReorder=True の場合はユーザーがドラッグで列順を変更できます。DisplayMemberBinding と CellTemplate を同じ GridViewColumn に同時に設定すると例外が発生するため、どちらか一方のみを使用してください。また列ヘッダーのクリックによるソートは標準では含まれないため、ICollectionView の SortDescriptions を利用する追加実装が必要です。 |
AllowsColumnReorder (GridView) | bool | ユーザーが自分の作業スタイルに合わせて列の順序を変更できる柔軟な表形式 UI を提供したい場合に True を設定します。True にすると列ヘッダーをドラッグして別の位置にドロップすることで列の並び順が変わります。列の順序変更はあくまで表示のみでデータバインディングは元の順序を維持します。変更後の列順序は自動で保存されないため、アプリ再起動後も保持したい場合は ColumnReordered イベントを利用して設定に保存・復元する実装が必要です。 |
Width (GridViewColumn) | double | 重要な列は固定幅、説明テキストなど可変長の列は Auto を使い分けます。指定した幅(ピクセル)で列が表示され、Double.NaN(XAMLでは Width="Auto")を指定するとコンテンツの最大幅に合わせて自動調整されます。Width="Auto" はコンテンツ読み込み時の最大幅に合わせて固定されるため、データが動的に増減する場合は幅が途中で変わりません。仮想化(VirtualizingStackPanel)が有効な場合、画面外のアイテムのサイズが考慮されないため Width=Auto が期待通り動作しないことがあります。 |
SelectedIndex / SelectedItem (Selector) | int / object | ListView で選択されたアイテムを ViewModel に伝えたり、プログラムからアイテムを選択状態にしたりする場合に使用します。詳細ペインに選択アイテムの情報を表示するマスター・詳細パターンで頻繁に使用されます。SelectedItem は選択されたデータオブジェクト、SelectedIndex は 0 始まりのインデックスを返し、SelectionMode=Multiple の場合は SelectedItems コレクションを使用します。SelectedItem を TwoWay バインドしている場合、ObservableCollection の再構築などによりデータソースが更新されると SelectedItem が null になることがあるため、データ更新後に選択状態を復元する処理が必要な場合があります。 |
XAML 使用例
<ListView ItemsSource="{Binding Employees}"
SelectedItem="{Binding SelectedEmployee, Mode=TwoWay}">
<ListView.View>
<GridView AllowsColumnReorder="True">
<GridViewColumn Header="ID" Width="60"
DisplayMemberBinding="{Binding Id}" />
<GridViewColumn Header="名前" Width="150"
DisplayMemberBinding="{Binding Name}" />
<GridViewColumn Header="部署" Width="120"
DisplayMemberBinding="{Binding Department}" />
<!-- カスタム列 -->
<GridViewColumn Header="操作" Width="80">
<GridViewColumn.CellTemplate>
<DataTemplate>
<Button Content="詳細" Command="{Binding ViewDetailCommand}" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
</ListView>主な使用例
- ファイル一覧(エクスプローラー形式) — ファイル名・サイズ・更新日時を列ヘッダー付きリストで表示します。
- 検索結果の表示 — 検索結果を複数のプロパティ列で見やすく表示します。
- ユーザー/従業員リスト — ID・名前・部署など複数の属性を列で表示するマスターデータ一覧に使用します。
- ログビューアー — 日時・レベル・メッセージなどを列で表示するログ表示 UI に使用します。
- 設定アイテム一覧 — 設定名と現在の値を列で並べた設定概要画面に使用します。
ヒントとベストプラクティス
- DataGrid との使い分け — 読み取り専用の表形式表示には ListView が軽量です。編集が必要な場合や高度な機能(フリーズ列、グルーピングなど)が必要な場合は DataGrid を使います。
- 列ソートの実装 — 列ヘッダークリックでソートするには、GridViewColumnHeader の Click イベントで対象プロパティ名を取得し、CollectionViewSource.GetDefaultView(ItemsSource) から ICollectionView を取得して SortDescriptions をクリア後に新しい SortDescription を追加します。ソート方向を ListSortDirection.Ascending/Descending で切り替えることで昇順/降順トグルを実現できます。
- 列の並び替えを永続化する — AllowsColumnReorder=True を GridView に設定すると列ヘッダーのドラッグで列順を変更できます。列順をアプリ設定に保存・復元したい場合は GridView.ColumnReordered イベントで変更を検知して設定に書き込む実装が必要です。
- ColumnHeaderContainerStyle でヘッダーを非表示に — ヘッダーが不要なリストでは GridView.ColumnHeaderContainerStyle で Height=0 や Visibility=Collapsed を設定してヘッダー行を非表示にできます。
- ItemContainerStyle で行を装飾する — 特定の行を色分けするには ItemContainerStyle に DataTrigger を設定します。交互行カラー(ストライプ)には AlternationCount と AlternationIndex トリガーを使います。ホバーハイライトはトリガーの IsMouseOver で実現できます。
関連コントロール
ソースコード
このデモ画面のソースコードは GitHub で公開しています。