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

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

DataGridの多段表示ですが、前回の記事ではXAMLのレイアウトのみで実現しました。

1つのセルに複数の項目を表示する場合、単純なものであればXAMLだけでも良いのですが、複雑なロジックが伴う場合や、もっと凝ったレイアウトにしたい場合、XAMLだけではコードが複雑になってしまいます。

そこで、今回はセルにユーザーコントロールを張り付けて多段表示を実現してみました。

ユーザーコントロールにするメリットは、そのセルに関するC#のコードが分離できるため、修正や機能追加がやりやすくなるという点です。

今回の記事が、みなさんの開発のヒントにでもなれば幸いです。

多段表示の画面サンプル

今回は次の様なデザインになります。

商品データのセルにユーザーコントロールが張り付けられています。

ユーザーコントロールにすることで、例えば入力時に入力チェックを行ったり、ドロップダウンリストで入力候補を選ばせるといった処理が、メインのコードから切り離して開発できるようになります。

デメリットとしては、DataGridで選択した行の文字色が変わらない事です。

通常、DataGridは選択行の文字色が白になりますが、ユーザーコントロール側は独立しているので変化しません。

DataGridのデフォルトの選択色は比較的濃い青色なので、白文字でないと見難くなります。

フォーカスされたことをユーザーコントロール側に通知して、ユーザーコントロール側で文字色を白にするなどの方法が考えられますが、それも面倒なので、ここではDataGrid側の文字色を黒、選択色を薄い黄色に設定することで見難さを回避しています。

DataGridのレイアウト構造

前回の記事では、DataGridTemplateColumnに複数のコントロールを張り付けて多段表示を実現していましたが、今回はここにユーザーコントロールを張り付けます。

XAMLのコード

多段表示のセルをユーザーコントロールに替えたことで、XAMLのコードはかなりシンプルになりました。

9行目から始まる <Windows.Resource>のタグで、DataGridRowの背景色と文字色、選択セルの枠線の色を定義しています。

また、セルに使ったユーザーコントロールは通常のセルと同様、Binding に対応しています。

C#のコード

C#側のコードは前回の記事とまったく同じです。

つまり、ユーザーコントロールを作成したあと、XAML側でユーザーコントロールにBindingするよう記述を変えるだけで済んでしまいます。

ユーザーコントロールのXAML

ユーザーコントロールは次の様なレイアウトになっています。

単純にテキストボックス、コンボボックス、在庫区分の3つを張り付けただけであるため、XAMLもシンプルになっています。

ユーザーコントロールのC#コード

ユーザーコントロールのC#コードは次の通りです。

特に中身は無いのですが、バインド(Binding) に対応するためのソースコードが大半を占めてしまいました。

普通のプロパティ(public string Maker {get;set;})のように記述するだけでは、Binding出来ません。

Binding に対応するためのプロパティには特別な書き方があり、これを「依存関係プロパティ」と呼んでいます。

今回はメーカー名、商品名、商品コードの3つが Binding できるようになっています。

まとめ

以上でユーザーコントロールを使ったDataGridの多段表示の解説は終了です。

DataGridTemplateColumn> タグに複数のコントロールを記述できますが、今回はそこにユーザーコントロールを記述することで多段表示を実現しました。

ユーザーコントロールにすることで、複雑なUI部分をメイン処理から独立させられるため、機能追加や改修などが行いやすくなるというメリットがあります。

また、通常のセルと同様、ユーザーコントロールを Binding に対応させることが出来ますが、その場合は通常のプロパティではなく、「依存関係プロパティ」という特別な記述が必要となります。

「依存関係プロパティ」については、こちらの記事で詳しく触れていますので、興味のある方がご覧ください。

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