WPFでリスト的なデータを表示するときに DataGrid を使うことがあると思いますが、その使い方について調べたことのメモです。
開発環境
- Windows 10
- Visual Studio 2019
- Prism 7.2
DataGridにデータを表示する
データを ItemsSource プロパティにバインドします。
データとして今回は DataTable を使います。そして後々フィルタリングをしたいので DataTable から DataView をつくってバインドします。
列ヘッダの名前とかを指定したいので、AutoGenerateColumns=False にしてXAMLに列を定義します。
ExampleViewModel.cs
private DataTable _data;
public DataView Data { get; private set; }
...
_data = new DataTable();
_data.Columns.Add("Name");
_data.Columns.Add("Price");
_data.Rows.Add("商品A", 500);
_data.Rows.Add("商品B", 1200);
_data.Rows.Add("商品C", 800);
_data.Rows.Add("商品D", 2000);
Data = new DataView(_data);
ExampleView.xaml
<DataGrid ItemsSource="{Binding Data}" AutoGenerateColumns="False">
<DataGrid.Columns>
<DataGridTextColumn Header="商品名" Binding="{Binding Name}" />
<DataGridTextColumn Header="金額" Binding="{Binding Price}" />
</DataGrid.Columns>
</DataGrid>
絞り込み表示
DataView.RowFilter プロパティに条件式を設定します。
ExampleViewModel.cs
Data.RowFilter = "Price > 1000";
列カラムクリック時のソートを数値順にしたい
列カラムをクリックしてソートしたとき、そのままでは辞書順のソートになってしまいます。数値でソートしたい場合は DataColumnCollection.Add に型を指定します。
ExampleViewModel.cs
_data.Columns.Add("Name");
_data.Columns.Add("Price", typeof(int));
列カラムクリック時のソートを〇〇にしたい
列カラムをクリックしたときにどうソートするか自分でかくことができます。調べたんですけど結局使いませんでした（私のアプリの場合は上の数値順にする方法で十分だった）。ですがせっかくなのでメモ程度に書き残しておきます。
流れとしては
- ビューでカラムクリック時に発生する Sorting イベントを補足し、ビューモデルにコマンドを送る
- EventArgs にクリックされた列ヘッダの文字列が入っているので、それに一致する列でデータを並び替える (
DataView.Sort) -
DataTableを作り直す (DataView.ToTable) - ビューで、
DataGridのソートしたカラムのSortDirectionを設定する（ソートマークを付ける）
という感じだと思います。
参考
- https://oita.oika.me/2014/09/15/sorts-datagrid-on-mvvm/
- https://araramistudio.jimdo.com/2016/10/13/wpf%E3%81%AEdatagrid%E3%81%A7%E3%82%BD%E3%83%BC%E3%83%88%E3%82%92%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA/
- http://final.hateblo.jp/entry/2015/09/22/115137
数値列で空白セルを表示したい
データに DBNull を入れます。
ExampleViewModel.cs
_data.Rows.Add("商品A", 500);
_data.Rows.Add("商品B", 1200);
_data.Rows.Add("商品C", DBNull.Value);
_data.Rows.Add("商品D", 2000);
なお Binding の TargetNullValue プロパティを設定することで、DBNull なセルに任意の文字列を表示することもできます。
ExampleView.xaml
<DataGridTextColumn Header="金額" Binding="{Binding Price, TargetNullValue='NULLだよ'}" />
サンプルのソースコード
プロジェクト一式を GitHub に置いときます。