.NET開発者のためのブログメディア
WPFのDataGridの使い方。データを表示・カスタマイズする方法
WPFの「DataGrid」コントロールは、表形式でデータを表示するためのコントロールです。SQL データベースやLINQ クエリなどのソースデータを表示することができます。
Windows Forms版の「DataGridView」と機能が似ていますが、テンプレートによるデザインのカスタマイズなど、WPF固有の機能もあります。
今回は、WPFのDataGridの基本的な使い方や、デザインをカスタマイズする方法を解説します。
- SE
- 職場でWPFを使うことになりました。DataGridを好みのデザインに変更する方法を知りたいです。
- PL
- WPFの特徴でもある、テンプレート機能を使えば、デザインも自由自在です！
目次
WPFのDataGridでデータを表示する方法
まずは、DataGridの基本的な使い方から見ていきましょう。
DataGridにデータを表示するには、「ItemsSource」プロパティにコレクションデータを設定し、コレクション１要素を１行として表示します。
新規のWPFプロジェクトを作成し、MainWindow.xamlにDataGridコントロールを配置します。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<Window x:Class="WpfApp1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" Title="MainWindow" Height="350" Width="400"> <Grid> <DataGrid Name="dataGrid" AutoGenerateColumns="False"> </DataGrid> </Grid> </Window> |
次に、DataGridに表示する商品データクラスを作成します。
|
1 2 3 4 5 6 |
public class Product { public string Name { get; set; } public int Price { get; set; } public double Tax { get; set; } } |
MainWindowクラスで、DataGridの「ItemsSource」プロパティに、商品データのコレクションを設定します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
using System.Collections.ObjectModel; public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); dataGrid.ItemsSource = new ObservableCollection<Product> { new Product { Name="化粧品", Price=1900, Tax=10 }, new Product { Name="洗剤", Price=500, Tax=10 }, new Product { Name="パン", Price=800, Tax=8 }, new Product { Name="牛乳", Price=800, Tax=8 } }; } } |
ここまでのプログラムを実行すると、次のような結果になります。
WPFのDataGridは、デフォルトで列の自動生成が有効になっているため、モデル（今回はProductクラス）のプロパティに合わせて、列が自動生成されます。
列の自動生成を無効にしたい場合は、AutoGenerateColumnsプロパティに「False」を設定し、次のように手動で列を設定します。
|
1 2 3 4 5 6 |
<DataGrid Name="dataGrid" AutoGenerateColumns="False" CanUserAddRows="False"> <DataGrid.Columns> <DataGridTextColumn Header="商品名" Binding="{Binding Name}"/> <DataGridTextColumn Header="金額" Binding="{Binding Price}"/> </DataGrid.Columns> </DataGrid> |
表示したDataGridをカスタマイズする方法
DataGridのテンプレート列（DataGridTemplateColumn）を使用すると、セルのデザインを自由にカスタマイズできます。
「DataGridTemplateColumn」を使って、上の商品データ一覧のうち、金額と消費税を１つ列にまとめて表示してみましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<DataGrid Name="dataGrid" AutoGenerateColumns="False" CanUserAddRows="False"> <DataGrid.Columns> <DataGridTextColumn Header="商品名" Binding="{Binding Name}"/> <DataGridTemplateColumn Header="金額（税率）"> <DataGridTemplateColumn.CellTemplate> <DataTemplate> <StackPanel Orientation="Horizontal"> <TextBlock Text="{Binding Price, StringFormat={}{0} 円}"/> <TextBlock Text="{Binding Tax, StringFormat=（{0}%）}"/> </StackPanel> </DataTemplate> </DataGridTemplateColumn.CellTemplate> </DataGridTemplateColumn> </DataGrid.Columns> </DataGrid> |
実行すると、次のイメージのように、金額と消費税が１つの列にまとめて表示されます。
また、データバインディングする際に、StringFormatで書式を設定することもできます。
この他にも、「HeaderTemplate」を使えばヘッダーのデザインをカスタマイズできます。「CellEditingTemplate」を使えば編集中セルのデザインをカスタマイズすることも可能です。
また、「CellTemplate」をカスタマイズすることでセルにカレンダーを表示することも可能になります。このようにWPFのDataGridは活用の幅が広いため、使用する機能を選ぶ必要があるでしょう。
- SE
- テンプレートを使えば、凝ったデザインも作れそうですね。ヘッダーについてもカスタマイズしてみます！
- PL
- そうですね。ただ、あまり複雑なデザインにすると、描画に時間がかかることがあるため注意が必要です。
よく使うDataGridをマスターしましょう
WPFのDataGridコントロールにデータを表示する方法や、デザインをカスタマイズする方法を解説してきました。表形式でデータを表示するDataGridは、システム開発では欠かせないコントロールです。他に、セルのフォントや色、サイズなどの外観も自由にカスタマイズすることができるため、使い方は是非とも覚えておきましょう。
