.net column

.NET開発者のためのブログメディア
カスタマイズ

WPFのDataGridの使い方。データを表示・カスタマイズする方法

2020年07月28日

WPFの「DataGrid」コントロールは、表形式でデータを表示するためのコントロールです。SQL データベースやLINQ クエリなどのソースデータを表示することができます。

Windows Forms版の「DataGridView」と機能が似ていますが、テンプレートによるデザインのカスタマイズなど、WPF固有の機能もあります。
今回は、WPFのDataGridの基本的な使い方や、デザインをカスタマイズする方法を解説します。

SE
職場でWPFを使うことになりました。DataGridを好みのデザインに変更する方法を知りたいです。
PL
WPFの特徴でもある、テンプレート機能を使えば、デザインも自由自在です!

WPFのDataGridでデータを表示する方法

まずは、DataGridの基本的な使い方から見ていきましょう。
DataGridにデータを表示するには、「ItemsSource」プロパティにコレクションデータを設定し、コレクション1要素を1行として表示します。

新規のWPFプロジェクトを作成し、MainWindow.xamlにDataGridコントロールを配置します。

次に、DataGridに表示する商品データクラスを作成します。

MainWindowクラスで、DataGridの「ItemsSource」プロパティに、商品データのコレクションを設定します。

ここまでのプログラムを実行すると、次のような結果になります。
WPFのDataGrid

WPFのDataGridは、デフォルトで列の自動生成が有効になっているため、モデル(今回はProductクラス)のプロパティに合わせて、列が自動生成されます。

列の自動生成を無効にしたい場合は、AutoGenerateColumnsプロパティに「False」を設定し、次のように手動で列を設定します。

表示したDataGridをカスタマイズする方法

DataGridのテンプレート列(DataGridTemplateColumn)を使用すると、セルのデザインを自由にカスタマイズできます。
「DataGridTemplateColumn」を使って、上の商品データ一覧のうち、金額と消費税を1つ列にまとめて表示してみましょう。

実行すると、次のイメージのように、金額と消費税が1つの列にまとめて表示されます。
また、データバインディングする際に、StringFormatで書式を設定することもできます。

カスタマイズしたDataGrid

この他にも、「HeaderTemplate」を使えばヘッダーのデザインをカスタマイズできます。「CellEditingTemplate」を使えば編集中セルのデザインをカスタマイズすることも可能です。

また、「CellTemplate」をカスタマイズすることでセルにカレンダーを表示することも可能になります。このようにWPFのDataGridは活用の幅が広いため、使用する機能を選ぶ必要があるでしょう。

SE
テンプレートを使えば、凝ったデザインも作れそうですね。ヘッダーについてもカスタマイズしてみます!
PL
そうですね。ただ、あまり複雑なデザインにすると、描画に時間がかかることがあるため注意が必要です。

よく使うDataGridをマスターしましょう

WPFのDataGridコントロールにデータを表示する方法や、デザインをカスタマイズする方法を解説してきました。表形式でデータを表示するDataGridは、システム開発では欠かせないコントロールです。他に、セルのフォントや色、サイズなどの外観も自由にカスタマイズすることができるため、使い方は是非とも覚えておきましょう。

>>>C#を使った案件を探すならFEnet .NET Navi


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

求人一覧

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)