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

WPF

.NET
C#
WPF
プログラミング言語

公開日時: 2020-07-28 　更新日時: 2022-06-09

この記事でわかること

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

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

システム エンジニア: 職場でWPFを使うことになりました。DataGridを好みのデザインに変更する方法を知りたいです。

プロジェクト リーダー: WPFの特徴でもある、テンプレート機能を使えば、デザインも自由自在です！

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

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

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

<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>

<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>

</Grid>

</Window>

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

public class Product
{
    public string Name { get; set; }
    public int Price { get; set; }
    public double Tax { get; set; }
}

public class Product

{

public string Name { get; set; }

public int Price { get; set; }

public double Tax { get; set; }

}

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

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 }
        };
    }
}

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」を設定し、次のように手動で列を設定します。

<DataGrid Name="dataGrid" AutoGenerateColumns="False" CanUserAddRows="False">
    <DataGrid.Columns>
        <DataGridTextColumn Header="商品名" Binding="{Binding Name}"/>
        <DataGridTextColumn Header="金額" Binding="{Binding Price}"/>
    </DataGrid.Columns>
</DataGrid>

<DataGrid.Columns>

</DataGrid.Columns>

</DataGrid>

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

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

<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>

<DataGrid.Columns>

<DataGridTemplateColumn.CellTemplate>

</StackPanel>

</DataTemplate>

</DataGridTemplateColumn.CellTemplate>

</DataGridTemplateColumn>

</DataGrid.Columns>

</DataGrid>

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

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

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

システム エンジニア: テンプレートを使えば、凝ったデザインも作れそうですね。ヘッダーについてもカスタマイズしてみます！

プロジェクト リーダー: そうですね。ただ、あまり複雑なデザインにすると、描画に時間がかかることがあるため注意が必要です。

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

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

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

FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。

株式会社オープンアップシステムはこんな会社です

秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。

スマホアプリから業務系システムまで

スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
充実した研修制度

毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
資格取得を応援

スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
東証プライム上場企業グループ

オープンアップシステムは東証プライム上場「株式会社夢真ビーネックスグループ」のグループ企業です。

安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

株式会社オープンアップシステムに興味を持った方へ

株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

株式会社オープンアップシステムへ応募する
会員登録不要! カンタン45秒!

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

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

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

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

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

新着案件New Job

開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務

PMO/東京都豊島区/【WEB面談可】/在宅勤務

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

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

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

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

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

新着案件New Job

開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務

PMO/東京都豊島区/【WEB面談可】/在宅勤務

関連記事Related Posts

【C#活用】WPFでMVVMパターンを実装する際の注意点

WPFとVisual Studioで画面遷移を実装する方法

WPFのデータバインディングとは？C#によるデータの操作方法

WPFのListBoxコントロールをご解説。要素の追加や削除の方法

C#とWPFで実装するListView。項目を追加する方法