【C#-WPF】DataGridを用い表形式のデータを表示する方法

WPFにおいて、DataGridを使用して表形式のデータを表示する方法には、XAMLに直接記述する方法とデータバインディングする方法があります。
実用性を考慮した場合、あまり用いることはありません。
例えばデータベースから特定の条件でデータ取得・表示したい場などはデータバインディングによる方法を用いることが多いです。

表形式の表示にはListViewとDataGridの方法がありますが、ここではDataGridを採用します。
ListViewを用いた方法はこちらを参照してください。
gaishiengineer.hatenablog.com

作成したいUIは、ボタンをクリックすると項目0～項目3に任意の値が表示されるものです。変数の代入はソースコード上で実現したいとします。

以下は、DataGridとデータバインディングを用いた例のXAMLとメインソースコードです。

DataGridとデータバインディングを用いた例

XAML

DataGridとDataGridにデータを追加するボタンを配置します。
DataGridのName="DataGridName" を設定し、DataGridTextColumnにはデータバインディング用の変数を設定します。

<Window x:Class="tablebyDataGrid.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"
        xmlns:local="clr-namespace:tablebyDataGrid"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Button Content="Button" HorizontalAlignment="Right" Margin="0,10,718.6,0" VerticalAlignment="Top" Width="75" Click="Button_Click"/>
        <DataGrid Name="DataGridName" 
                  Margin="0,43,-0.4,0" 
                  >
            <DataGrid.Columns>
                <DataGridTextColumn Header="項目0" Width="100" Binding="{Binding items0}"/>
                <DataGridTextColumn Header="項目1" Width="100" Binding="{Binding items1}"/>
                <DataGridTextColumn Header="項目2" Width="100" Binding="{Binding items2}"/>
                <DataGridTextColumn Header="項目3" Width="100" Binding="{Binding items3}"/>
            </DataGrid.Columns>
        </DataGrid>
    </Grid>
</Window>

メインソースコード

namespace tablebyDataGrid
{
    /// <summary>
    /// MainWindow.xaml の相互作用ロジック
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            List<DataGridItems> items = new List<DataGridItems>();
            items.Add(new DataGridItems("000", "111", "222", "333"));
            items.Add(new DataGridItems("aaa", "bbb", "ccc", "ddd"));
            items.Add(new DataGridItems("AAA", "BBB", "CCC", "DDD"));

            DataGridName.ItemsSource = items;

        }
    }

    public class DataGridItems
    {
        public DataGridItems(string items0, string items1, string items2, string items3)
        {
            this.items0 = items0;
            this.items1 = items1;
            this.items2 = items2;
            this.items3 = items3;
        }

        public string items0 { get; set; }
        public string items1 { get; set; }
        public string items2 { get; set; }
        public string items3 { get; set; }
    }
}

DataGridItemsクラスはDataGridの中身を表示するデータを格納するために、プロパティを設定したクラスです。Button_Click内ではDataGridItemsクラスの初期化にオブジェクト初期化を用いています。

Button_Click内のDataGridItemsクラスの初期化に、オブジェクト初期化を用いています。

Buttonを実行する

実行すると表が表示されますが、不必要なitem0~itemsや空白の列が表示されてしまってます。

AutoGenerateColumnsプロパティをFalseに設定し空白を削除

XAML

DataGridのAutoGenerateColumnsプロパティをFalseに設定

<Window x:Class="tablebyDataGrid.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"
        xmlns:local="clr-namespace:tablebyDataGrid"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Button Content="Button" HorizontalAlignment="Right" Margin="0,10,718.6,0" VerticalAlignment="Top" Width="75" Click="Button_Click"/>
        <DataGrid Name="DataGridName" 
                  Margin="0,43,-0.4,0" 
                  AutoGenerateColumns="False"
                  >
            <DataGrid.Columns>
                <DataGridTextColumn Header="項目0" Width="100" Binding="{Binding items0}"/>
                <DataGridTextColumn Header="項目1" Width="100" Binding="{Binding items1}"/>
                <DataGridTextColumn Header="項目2" Width="100" Binding="{Binding items2}"/>
                <DataGridTextColumn Header="項目3" Width="100" Binding="{Binding items3}"/>
            </DataGrid.Columns>
        </DataGrid>
    </Grid>
</Window>

Buttonを実行する

不必要なitem0~itemsはなくりましたが、空白は残ったままです。

DataGridの右端の空白列を非表示にする

こちらのサイトを参考にしました。
https://noumenon-th.net/programming/2017/10/05/datagrid/
どうやら表の横幅と表の各項目の横幅を指定しているため足りない横幅を自動的に空白で埋めてくれているようです。

XAML

DataGridの列要素に Width="*"を指定して表の横幅と表の各項目の横幅の合計値を合わせ右端の空白をなくす。

<Window x:Class="tablebyDataGrid.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"
        xmlns:local="clr-namespace:tablebyDataGrid"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Button Content="Button" HorizontalAlignment="Right" Margin="0,10,718.6,0" VerticalAlignment="Top" Width="75" Click="Button_Click"/>
        <DataGrid Name="DataGridName" 
                  Margin="0,43,-0.4,0" 
                  AutoGenerateColumns="False"
                  >
            <DataGrid.Columns>
                <DataGridTextColumn Header="項目0" Width="100" Binding="{Binding items0}"/>
                <DataGridTextColumn Header="項目1" Width="100" Binding="{Binding items1}"/>
                <DataGridTextColumn Header="項目2" Width="100" Binding="{Binding items2}"/>
                <DataGridTextColumn Header="項目3" Width="*" Binding="{Binding items3}"/>
            </DataGrid.Columns>
        </DataGrid>
    </Grid>
</Window>