DataGrid（表）

導入

DataGridは、複数行×複数列のデータを表（Excelのような格子）で表示・編集するコントロールです。一覧画面や管理画面で頻出します。

XAMLサンプル（読み物）

<!-- AutoGenerateColumns="False" で列を自分で定義する -->
<DataGrid x:Name="grid" AutoGenerateColumns="False" Height="150">
    <DataGrid.Columns>
        <DataGridTextColumn Header="商品" Binding="{Binding Name}" Width="*" />
        <DataGridTextColumn Header="価格" Binding="{Binding Price}" Width="80" />
    </DataGrid.Columns>
</DataGrid>

// コレクションを流し込む（各列の Binding がプロパティ名に対応）
grid.ItemsSource = new List<Product>
{
    new Product("マウス", 2980),
    new Product("キーボード", 5980),
};

record Product(string Name, int Price);

主なプロパティ

• ItemsSource … 表示するデータ（コレクション）
• AutoGenerateColumns … falseで列を手動定義（推奨）
• Columns … 列定義（DataGridTextColumnなど）
• IsReadOnly … 編集不可にする
• CanUserAddRows … 末尾の空行での追加を許すか

主なイベント

• SelectionChanged … 行選択の変化
• CellEditEnding … セル編集の確定時

MVVM（実務ではこう書く）

表データもViewModelのObservableCollectionをItemsSourceにバインドします。列のBindingは各要素のプロパティ名に対応します（コードビハインドでgrid.ItemsSource = ...する必要がなくなります）。

<DataGrid ItemsSource="{Binding Products}" AutoGenerateColumns="False">
    <DataGrid.Columns>
        <DataGridTextColumn Header="商品" Binding="{Binding Name}" Width="*" />
        <DataGridTextColumn Header="価格" Binding="{Binding Price}" Width="80" />
    </DataGrid.Columns>
</DataGrid>

using System.Collections.ObjectModel;

public ObservableCollection<Product> Products { get; } = new()
{
    new Product("マウス", 2980),
    new Product("キーボード", 5980),
};

試す（ローカル）

• コードビハインドのgrid.ItemsSource = ...を、ViewModelのProductsへのItemsSourceバインドに置き換える。IsReadOnly="False"でセル編集も試す。

まとめ

• DataGridは表形式でデータを表示・編集
• ItemsSourceにコレクション、Columnsで列を定義
• 実務ではObservableCollectionをViewModelに持ちItemsSourceにバインド

次回: 画像を表示するImageです。