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

DataGrid List

DataGrid は表形式のデータを表示・編集するための強力なコントロールです。ソート、フィルタリング、グルーピング、列のリサイズ、インライン編集などの機能を備えています。データソースのプロパティから自動的に列を生成するか、カスタム列定義を指定できます。

概要

WPF の DataGrid は、MultiSelector → Selector → ItemsControl という継承チェーンを持つ高機能なグリッドコントロールです。 ItemsSource にオブジェクトのコレクションをバインドすることで、各プロパティが自動的に列として生成されます（AutoGenerateColumns="True" の場合）。

列は DataGridTextColumn、DataGridCheckBoxColumn、DataGridComboBoxColumn、 DataGridHyperlinkColumn、DataGridTemplateColumn の 5 種類から選べます。 DataGridTemplateColumn を使うと任意の WPF 要素を列セルに配置でき、完全なカスタマイズが可能です。

パフォーマンス面では、EnableRowVirtualization と EnableColumnVirtualization を有効にすることで、表示領域外の行・列は描画されず、大量データでも軽快に動作します。さらに VirtualizingPanel.IsVirtualizing="True" も合わせて設定することを推奨します。

編集機能は IsReadOnly で一括制御できるほか、列単位で IsReadOnly を設定したり、 CanUserAddRows/CanUserDeleteRows で行の追加・削除権限をユーザーに与えることができます。

画面キャプチャ

デモしているプロパティ

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

プロパティ	設定値	説明
`AutoGenerateColumns`	`bool`	True のとき、ItemsSource のオブジェクトのすべての公開読み書きプロパティから自動的に列を生成します。開発初期やプロトタイプ時に素早くデータを確認したい場面で便利です。生成される列はデフォルトでアルファベット順に並び、各プロパティ名がそのままヘッダーになります。本番アプリでは機密プロパティが意図せず表示される恐れがあるため、常に False に設定して列を明示的に定義することを推奨します。
`IsReadOnly`	`bool`	True のとき、グリッド全体が読み取り専用になりセルの編集ができなくなります。ログ表示やレポート画面など、データを表示するだけで編集させたくない場合に使います。IsReadOnly=True を設定すると CanUserAddRows も自動的に False になります。個別の列に独自の IsReadOnly を設定すると DataGrid の IsReadOnly より優先されるため、列単位で編集可否を細かく制御できます。
`SelectionMode / SelectionUnit`	`Single/Extended / Cell/FullRow/CellOrRowHeader`	SelectionMode は単一選択か複数選択かを設定し、SelectionUnit は選択単位（セル単位か行単位か）を設定します。マスター詳細画面では Single+FullRow の組み合わせが定番で、スプレッドシート風の編集には Extended+Cell が適しています。SelectionUnit=Cell と SelectionMode=Single を組み合わせると 1 セルしか選択できず、行全体の選択を期待するユーザーが混乱しやすいという落とし穴があります。
`CanUserAddRows / CanUserDeleteRows`	`bool`	ユーザーが新しい行を追加・削除できるかどうかを制御します。True の場合、最終行に新規入力行が表示され、ユーザーが直接データを入力して追加できます。この機能を利用するにはバインドするコレクションが ObservableCollection か IEditableCollectionView を実装している必要があります。落とし穴として、CanUserAddRows=True の場合はモデルクラスにパラメーターなしのデフォルトコンストラクターが必要で、なければ行追加時にランタイムエラーが発生します。
`CanUserReorderColumns / CanUserResizeColumns / CanUserSortColumns`	`bool`	ユーザーが列の並べ替え・リサイズ・ソートを行えるかどうかを制御します。
`GridLinesVisibility`	`None / Horizontal / Vertical / All`	グリッド線の表示方法を制御します。デフォルトでは水平・垂直両方の線が表示されます。
`AlternatingRowBackground`	`Brush`	1行おきに異なる背景色を設定します。行数が多い一覧画面でユーザーが行を視覚的に追いやすくするために使います。縞模様が適用されると偶数行に通常の Background、奇数行に AlternatingRowBackground が描画されます。行グルーピングやカスタムの DataGridRow スタイルを使っている場合はこのプロパティが正しく適用されないことがあるため、その際は DataGridRow の Style で直接制御します。
`FrozenColumnCount`	`int`	水平スクロール時に固定する列数を設定します。ID や名前など識別に必要な左端の列を常に表示しておきたい場合に使います。設定した数の列は水平スクロールしても常に左側に固定され、残りの列がスクロールします。固定できるのは左端から連続した列のみで、中間の列だけを固定することはできません。
`HeadersVisibility`	`None / Row / Column / All`	行ヘッダーと列ヘッダーの表示・非表示を制御します。
`EnableRowVirtualization / EnableColumnVirtualization`	`bool`	行・列の仮想化を有効にして大量データのパフォーマンスを向上させます。数百行・数十列以上のデータを扱う場面では必ず有効にすることを推奨します。EnableRowVirtualization=True の場合、表示領域外の行は描画されないためメモリと描画コストを大幅に削減でき、数万行でもスムーズに動作します。ただし行仮想化とグルーピングを同時に使うとスクロール中にグループヘッダーがちらつくことがあるため、グルーピングを使う場合は仮想化の挙動を事前に確認してください。

XAML 使用例

<DataGrid ItemsSource="{Binding Orders}"
          AutoGenerateColumns="False"
          IsReadOnly="False"
          CanUserAddRows="True"
          SelectionMode="Single"
          AlternatingRowBackground="AliceBlue"
          FrozenColumnCount="1"
          EnableRowVirtualization="True">
  <DataGrid.Columns>
    <DataGridTextColumn Header="注文ID" Binding="{Binding OrderId}"
                        IsReadOnly="True" Width="80" />
    <DataGridTextColumn Header="顧客名" Binding="{Binding CustomerName}"
                        Width="*" />
    <DataGridCheckBoxColumn Header="処理済" Binding="{Binding IsProcessed}"
                            Width="70" />
  </DataGrid.Columns>
</DataGrid>

主な使用例

受注・在庫管理画面 — 一覧表示と編集を同一画面で行うビジネスアプリの主力コントロールとして活用します。
ログ・履歴ビューアー — 大量の履歴データを行仮想化で効率よく表示します。
一括編集フォーム — 複数レコードを表形式で一括編集し、一度にコミットするワークフローを実現します。
レポート・集計表 — 読み取り専用モードで集計データや統計情報を表形式で表示します。
インポートプレビュー — CSV などからインポートするデータをプレビューし、列マッピングを確認する画面に使用します。

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

行仮想化を有効にする — 数百行以上のデータには必ず EnableRowVirtualization="True" を設定してメモリとレンダリングを最適化します。
AutoGenerateColumns は開発時のみ — 本番アプリでは AutoGenerateColumns="False" にして列を明示的に定義し、表示順・幅・書式を制御します。
INotifyPropertyChanged の実装 — バインドするデータモデルには INotifyPropertyChanged を実装し、編集内容がリアルタイムで UI に反映されるようにします。
選択アイテムのバインド — SelectedItem を ViewModel にバインドして選択行のデータを取得し、詳細パネルや編集フォームと連動させます。
DataGridTemplateColumn でカスタム UI — ボタンや画像を含む列を作る場合は DataGridTemplateColumn を使い、CellTemplate と CellEditingTemplate を定義します。
編集と INotifyPropertyChanged — インライン編集した値をリアルタイムで ViewModel に反映するには、データモデルに INotifyPropertyChanged を実装する必要があります。実装していない場合、セルの編集値がコミットされても他の UI に伝播しません。
CommitEdit / CancelEdit を使う — プログラムでコレクション操作（並べ替え・削除など）を行う前に dataGrid.CommitEdit() か dataGrid.CancelEdit() を呼び出して編集状態を確定または破棄してください。編集中のまま操作すると例外やデータ不整合が発生します。
行詳細には RowDetailsTemplate を使う — 行をクリックすると展開される詳細パネルを実装するには RowDetailsTemplate に DataTemplate を定義します。RowDetailsVisibilityMode で「選択時のみ表示」「常に表示」などを制御できます。

ソースコード

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

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