WPF 標準コントロールデモアプリ › ListView

ListView List

ListView は ListBox を拡張したリストコントロールです。GridView を使うことで列ヘッダー付きの表形式表示が可能になります。列のリサイズや並べ替えもサポートしています。

概要

WPF の ListViewListBox を継承したコントロールで、View プロパティに GridView を設定することで列ヘッダー付きの表形式リストを表示できます。DataGrid より軽量で、読み取り専用の表形式表示に適しています。

GridViewViewBase を継承したクラスで、Columns プロパティに GridViewColumn の集合を定義します。各列には Header(列ヘッダーテキスト)と DisplayMemberBinding(表示するプロパティへのバインド)または CellTemplate(カスタム表示)を設定します。

AllowsColumnReorder="True" を GridView に設定すると、ユーザーが列ヘッダーをドラッグして列の順序を変更できます。列幅はドラッグでリサイズ可能です。

ListBox と同様に SelectionMode で選択モードを制御でき、SelectedItemSelectedItems を通じて選択アイテムを取得できます。

画面キャプチャ

listview demo screen

デモしているプロパティ

以下のプロパティが WPF 標準コントロールデモアプリでインタラクティブにデモされています。

プロパティ設定値説明
ViewViewBase (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 / objectListView で選択されたアイテムを 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>

主な使用例

ヒントとベストプラクティス

関連コントロール

ソースコード

このデモ画面のソースコードは GitHub で公開しています。

GitHub で ListView のソースコードを見る →