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は、システム開発では欠かせないコントロールです。他に、セルのフォントや色、サイズなどの外観も自由にカスタマイズすることができるため、使い方は是非とも覚えておきましょう。
Search キーワード検索
Popular 人気の記事
-
【VB.NET入門】DataGridViewの使い方まとめ
公開: 更新:
reccomended おすすめ記事
-
【.NETが統合】.NET 5の概要と今後のリリース予定
公開: 更新:
Categories 連載一覧
Tags タグ一覧
Jobs 新着案件
-
開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク
月給29万～30万円東京都品川区(大崎駅) -
遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク
月給45万～60万円東京都港区(六本木駅) -
病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク
月給30万～30万円東京都豊島区(池袋駅) -
開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク
月給50万～50万円東京都豊島区(大塚駅) -
債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務
月給62万～67万円東京都文京区(後楽園駅) -
PMO/東京都豊島区/【WEB面談可】/在宅勤務
月給55万～55万円東京都豊島区(池袋駅)