DataGridコントロール
これも業務アプリの開発者が待ち望んでいたコントロールでしょう。これはWindows 10 SDKではなく、2018年8月にリリースされたWindows Community Toolkitのバージョン4.0以降に含まれています。Windows 10 1703（15063）以降に対応しています。
DataGridコントロールの主な特徴
-
コレクションを簡単に表示：
コレクションをItemsSourceプロパティにセットするだけで、データクラスのプロパティから自動的に列を生成。もちろん、列のカスタマイズもできます。 -
UIの仮想化による高速表示：
表示する行数が増えても、高速に表示。約1万5千件のデータを表示するサンプルアプリをリリースビルドして確かめてみてください。 -
データ編集をサポート：
既定のセルはテキストデータの編集をサポートしています。
ここでは、データの表示とソートのコーディングを簡単に紹介します。詳しい使い方はDataGridコントロールのドキュメントを参照してください。
なお、2018年10月末にWindows Community Toolkitバージョン5.0がリリースされましたが、そちらのDataGridは1709（16299）以降の対応となっています。この項ではバージョン5.0を使い、後述するバックポートの項ではできるだけ以前のWindows 10に対応させたいのでバージョン4.0を使うことにします。
Windows Community Toolkitを導入する
NuGetで「Microsoft.Toolkit.Uwp」（あるいは「Windows Community Toolkit」）を検索し、「Microsoft.Toolkit.Uwp.UI.Controls.DataGrid」パッケージを導入します。
データを表示する
表示するデータ
今回、表示するデータは、次のコードに示すようなプロパティを持ったデータクラスのコレクションです。読み込むデータとしては、青空文庫の「公開中 作家リスト：全て」ページで公開されている「公開中 作家別作品一覧拡充版：全て（CSV形式、UTF-8、zip圧縮）」ファイルを利用させて頂きました。このCSVファイルを読み込んでコレクションに変換する処理は、AozoraBunko.csのGetListAsyncメソッドをご覧ください。
public class AozoraBunko
{
public string 作品ID { get; set; }
public string 作品名 { get; set; }
public string 作品名読み { get; set; }
public string 文字遣い種別 { get; set; }
public string 姓 { get; set; }
public string 姓読み { get; set; }
public string 名 { get; set; }
public string 名読み { get; set; }
public string 役割フラグ { get; set; }
public string 姓名 => $"{姓}, {名}";
public string 姓名読み => $"{姓読み} {名読み}";
}
UIを記述する
まず、XAMLの冒頭に、Windows Community Toolkitのコントロールを使うための名前空間を追加します。
<Page
……省略……
mc:Ignorable="d"
Background="{ThemeResource SystemControlAltHighAcrylicWindowBrush}"
xmlns:tk="using:Microsoft.Toolkit.Uwp.UI.Controls"
>
そうしたら、DataGridコントロールを次のコードのように記述します。
<tk:DataGrid x:Name="dataGrid" AutoGenerateColumns="True"
GridLinesVisibility="All" AlternatingRowBackground="LightCyan">
</tk:DataGrid>
データを与える
コードビハインドで、次のコードのようにしてデータをDataGridに与えます。
private ObservableCollection<Data.AozoraBunko> _observableCollection;
private async void LoadAozoraBunkoDataAsync()
{
IEnumerable<Data.AozoraBunko> list = ……省略（データを取得する）……
_observableCollection = new ObservableCollection<Data.AozoraBunko>(list);
this.dataGrid.ItemsSource = _observableCollection;
}
上のメソッドは、ページのコンストラクターの末尾で呼び出すようにします。ここでは、データを追加／削除したときに画面にも反映されるよう、ObservableCollectionコレクションに変換してからDataGridに渡しています。
これだけで、次の画像のようにDataGridにデータが表示されます。自動生成された列の順番は、データクラスのプロパティの定義順になっています。自動生成された列のヘッダーにはプロパティの名前が表示されます（そのために、データクラスのプロパティに日本語を使いました）。
また、ご覧のようにデータの編集もサポートされています。セルをダブルクリックするか、セルを選択した状態で［F2］キーを押すと、編集モードに切り替わります。なお、画像からは分かりませんが、列ヘッダーを横方向にドラッグすることで、列の入れ替えもできます。
ちなみに、記事冒頭の画像と比べると、こちらはRichEditBoxコントロールが見えなくなっています。これは、Windows Community ToolkitのGridSplitterコントロールを使って、Gridの上下分割配分を自由に変更できるようにしたものです。
