【WPF】ここまで出来る!DataGridで多段表示!(DataGridTemplateColumn編)

プログラミングTips
この記事は約5分で読めます。

業務アプリでは一覧表示がよく行われます。

WindowsFormで開発をしていた頃、DataGridViewの1セルに複数の情報を表示する、いわゆる多段表示をしてほしいという要望を受ける事が多かったのですが、Visual Studioの標準機能では難易度が高く、結果的にコストの関係で諦めてもらうか、GrapeCity等のサードパーティ製DataGridコントロールを購入して使うなどの方法を良く使っていました。

WPFでは、簡単にDataGridのヘッダやセルにコントロールを登録することができるので、多段明細はそんなに難しくありません。

まあ、レイアウトは凝れば凝るほど難易度は上がってコストも掛かりますが、それほどレイアウトに凝らなければ、短期間で十分開発可能です。

今回は、DataGridを使って多段表示をしてみたので、その方法について解説したいと思います。

多段表示の画面サンプル

今回紹介する多段表示のレイアウトは次の様になります。

全てXAML上で記述していて、DataTableのデータをBindingで表示しています。

WPFだとこのような画面を比較的簡単に作成することができます。

比較的簡単にと言っても、いきなりXAMLのソースコードを見ると、量が多くて圧倒されてしまうかもしれません。

そこで、あらかじめ図を使って、どのような構造になっているかの概要を理解しておきたいと思います。

DataGridのレイアウト構造(通常)

まず、一般的なDataGridのレイアウト構造を理解しておきましょう。

DataTableの内容を単純に表示するだけであれば、<DataGrid ItemSource=”{Binding}” /> という簡単な記述だけで事が足りますが、例えばカラムのヘッダやセルのレイアウトを変更したい場合は、次の様にDataGrid.ColumnHeaderStyleやDataGrid.Columnsのタグにレイアウトを記述する必要があります。

ポイントとしては、DaDataGrid.COlumnsは、個々のカラムに対してスタイルが適応されるのですが、DataGrid.ColumnHeaderStyleは、全てのカラムのヘッダに適応されるという点です。

DataGrid.Columns を特に指定しない場合、デフォルトのレイアウトが適用されることになりますので、レイアウトを変更したい箇所のみ記述すればOKです。

では、実際のColumnHeaderStyleの記述方法ですが、次の様にSetter Property タグを使って、必要なプロパティに値を設定していきます。

セルのスタイルを設定する場合は、DataGridTextColumn.ElementStyle タグを使います。

セルには、DataGridTextColumn以外に、コンボボックスやチェックボックスなど、いくつかのクラスが用意されています。

セルで使えるクラス名機能
DataGridTextColumnセルにテキストボックスを表示する
DataGridCheckBoxColumnセルにチェックボックスを表示する
DataGridComboBoxColumnセルにコンボボックスを表示する
DataGridHyperlinkColumnセルにハイパーリンクを表示する
DataGridTemplateColumnセルに自分の好きなコントロールを配置して表示する

DataGirdのレイアウト構造(多段)

多段の場合は、DataGridTemplateColumn というタグを使います。

DataGridTemplateColumn には、そのカラムのヘッダレイアウトと、セルのレイアウトを記述することができます。

今回のサンプル画面では1つのセルに3行を入れていますが、これは DataGridTemplateColumn.CellTemplate の中に TextBlock を3つ記述し、TextBlockとTextBlockの間をBorderで仕切っています。

このように、一見複雑そうなXAMLのコードであっても、単純なブロックを積み重ねてレイアウトを構成しているだけに過ぎません。

以上の事を念頭に、次のXAMLのコードを見て頂ければ、やっている事が理解しやすいかと思います。

XAMLのコード

実際に多段表示を行うためのXAMLは次の様になります。

C#のソースコード

C#のソースコードは次の通りです。

DataTable形式でサンプルデータを作成して、DataGridのDataContextプロパティにセットしているだけのシンプルなプログラムです。

まとめ

今回は、WPFのDataGridについて、多段表示の方法について解説しました。

他にも様々な方法があると思いますが、構造を理解しておけば、コード量は多くはなりますが、それほど難易度は高くないと思います。

DataGridTemplateColumn にStackPanelやGridなどのレイアウト系コントロールを乗せて、その上に様々なコントロールを配置してきます。

こうすることによって、1つのセルの中に複数の項目を表示することができるようになります。

1つのセルに複数項目を表示する場合、Borderを使って区切り線を表現してみましたが、レイアウトのデザインに応じて色々なアプローチがあると思いますので、これに拘らずに色々な方法を試してみて下さい。

タイトルとURLをコピーしました