WPFでDataGridにデータ(DataTable,DataView)を表示して絞り込み表示したり数値順ソートしたりその他色々

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 に置いときます。

• https://github.com/voidproc/WpfDataGridExample