💨

WPFでのDataGridの使用方法について

2024/11/25に公開

WPF

tech

WPF（Windows Presentation Foundation）でのDataGridの使用方法について、初心者向けに詳しく解説します。DataGridは、データの表示や編集を効率的に行うための強力なコントロールです。

1. DataGridの基本的な使い方

まず、DataGridをXAMLファイルに配置します。以下は、DataGridをウィンドウに追加する基本的な例です。

<Window x:Class="YourNamespace.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="DataGrid Example" Height="350" Width="525">
    <Grid>
        <DataGrid Name="dataGrid" AutoGenerateColumns="True" />
    </Grid>
</Window>

この例では、AutoGenerateColumnsプロパティをTrueに設定しており、バインドされたデータのプロパティに基づいて自動的に列が生成されます。

2. データソースの設定

DataGridに表示するデータは、ItemsSourceプロパティを通じて設定します。データソースとしては、ObservableCollection<T>を使用することが一般的です。ObservableCollectionは、コレクションの変更を自動的にUIに反映させるため、DataGridとの連携に適しています。

以下は、ObservableCollectionをDataGridにバインドする例です。

public partial class MainWindow : Window
{
    public ObservableCollection<Item> Items { get; set; }

    public MainWindow()
    {
        InitializeComponent();
        Items = new ObservableCollection<Item>
        {
            new Item { Name = "Item 1", Quantity = 10 },
            new Item { Name = "Item 2", Quantity = 20 }
        };
        dataGrid.ItemsSource = Items;
    }
}

public class Item
{
    public string Name { get; set; }
    public int Quantity { get; set; }
}

このコードでは、ItemクラスのインスタンスをObservableCollectionに追加し、それをDataGridのItemsSourceに設定しています。

3. 列のカスタマイズ

DataGridの列は、AutoGenerateColumnsをFalseに設定し、手動で定義することも可能です。これにより、各列の表示方法や編集方法を細かく制御できます。

以下は、手動で列を定義する例です。

<DataGrid Name="dataGrid" AutoGenerateColumns="False">
    <DataGrid.Columns>
        <DataGridTextColumn Header="Name" Binding="{Binding Name}" />
        <DataGridTextColumn Header="Quantity" Binding="{Binding Quantity}" />
    </DataGrid.Columns>
</DataGrid>

この設定では、NameとQuantityの2つの列が表示され、それぞれItemクラスのプロパティにバインドされています。

4. データの編集

DataGridは、デフォルトでデータの編集をサポートしています。ユーザーがセルを編集すると、バインドされたデータソースが自動的に更新されます。ただし、編集可能な列を明示的に指定する場合は、DataGridTextColumnのIsReadOnlyプロパティをFalseに設定します。

以下は、編集可能な列を設定する例です。

<DataGrid Name="dataGrid" AutoGenerateColumns="False">
    <DataGrid.Columns>
        <DataGridTextColumn Header="Name" Binding="{Binding Name}" IsReadOnly="False" />
        <DataGridTextColumn Header="Quantity" Binding="{Binding Quantity}" IsReadOnly="False" />
    </DataGrid.Columns>
</DataGrid>

5. データの追加と削除

ObservableCollectionを使用している場合、データの追加や削除はコレクションに対して行うだけで、DataGridに自動的に反映されます。例えば、ボタンのクリックイベントで新しいアイテムを追加する場合、以下のように実装します。

private void AddButton_Click(object sender, RoutedEventArgs e)
{
    Items.Add(new Item { Name = "New Item", Quantity = 0 });
}

このコードでは、Itemsコレクションに新しいItemを追加しています。ObservableCollectionの特性により、DataGridは自動的に新しい行を表示します。

6. データの検証

ユーザーがデータを編集する際、入力値の検証を行いたい場合があります。WPFでは、IDataErrorInfoインターフェースを実装することで、プロパティごとにエラーメッセージを提供できます。

以下は、IDataErrorInfoを実装した例です。

public class Item : IDataErrorInfo
{
    public string Name { get; set; }
    public int Quantity { get; set; }

    public string Error => null;

    public string this[string columnName]
    {
        get
        {
            if (columnName == nameof(Quantity))
            {
                if (Quantity < 0)
                {
                    return "Quantity cannot be negative.";
                }
            }
            return null;
        }
    }
}

この実装により、Quantityが負の値の場合、エラーメッセージが表示されます。

7. イベントのハンドリング

DataGridには、データの変更やユーザーの操作に応じて発生するさまざまなイベントがあります。例えば、行の編集が終了したときに処理を行いたい場合、RowEditEndingイベント RowEditEndingイベントを使用して、行の編集が終了した際の処理を実装できます。このイベントは、ユーザーが行の編集を完了したときに発生します。以下は、RowEditEndingイベントをハンドリングする例です。

private void DataGrid_RowEditEnding(object sender, DataGridRowEditEndingEventArgs e)
{
    // 編集がコミットされた場合の処理
    if (e.EditAction == DataGridEditAction.Commit)
    {
        // ここにコミット時の処理を記述
    }
    // 編集がキャンセルされた場合の処理
    else if (e.EditAction == DataGridEditAction.Cancel)
    {
        // ここにキャンセル時の処理を記述
    }
}

このコードでは、RowEditEndingイベントが発生した際に、編集アクションがコミットかキャンセルかを判定し、それぞれに応じた処理を実行しています。DataGridEditAction.Commitは編集がコミットされた場合、DataGridEditAction.Cancelは編集がキャンセルされた場合に対応します。

XAMLでのイベントハンドラーの設定は以下のように行います。

<DataGrid Name="dataGrid" RowEditEnding="DataGrid_RowEditEnding">
    <!-- 列の定義など -->
</DataGrid>

この設定により、ユーザーが行の編集を完了した際にDataGrid_RowEditEndingメソッドが呼び出されます。

8. MVVMパターンでの実装

MVVM（Model-View-ViewModel）パターンを採用している場合、ビュー（DataGrid）とビューモデル（ViewModel）間の連携を適切に行うことが重要です。RowEditEndingイベントを直接コードビハインドで処理するのではなく、コマンドを使用してビューモデルに処理を委譲する方法が推奨されます。

以下は、RowEditEndingイベントをコマンドにバインドする例です。

<DataGrid Name="dataGrid">
    <DataGrid.InputBindings>
        <KeyBinding Key="Enter" Command="{Binding CommitEditCommand}" />
        <KeyBinding Key="Escape" Command="{Binding CancelEditCommand}" />
    </DataGrid.InputBindings>
    <!-- 列の定義など -->
</DataGrid>

この設定により、ユーザーがEnterキーを押すとCommitEditCommandが、Escapeキーを押すとCancelEditCommandがビューモデルで実行されます。ビューモデル側でこれらのコマンドを定義し、適切な処理を実装します。

9. データのソートとフィルタリング

DataGridは、データのソートやフィルタリングをサポートしています。これらの機能を有効にするには、DataGridのCanUserSortColumnsプロパティをTrueに設定します。また、フィルタリングを実現するには、CollectionViewを使用してデータをラップし、フィルタリング条件を設定します。

以下は、CollectionViewを使用してデータをフィルタリングする例です。

public partial class MainWindow : Window
{
    public ObservableCollection<Item> Items { get; set; }
    public ICollectionView ItemsView { get; set; }

    public MainWindow()
    {
        InitializeComponent();
        Items = new ObservableCollection<Item>
        {
            new Item { Name = "Item 1", Quantity = 10 },
            new Item { Name = "Item 2", Quantity = 20 }
        };
        ItemsView = CollectionViewSource.GetDefaultView(Items);
        ItemsView.Filter = item => ((Item)item).Quantity > 10;
        dataGrid.ItemsSource = ItemsView;
    }
}

このコードでは、Quantityが10より大きいアイテムのみを表示するフィルターを設定しています。

まとめ

WPFのDataGridは、データの表示や編集を効率的に行うための強力なコントロールです。ObservableCollectionをデータソースとして使用することで、データの変更が自動的にUIに反映されます。また、RowEditEndingイベントを活用することで、行の編集完了時の処理を柔軟に実装できます。MVVMパターンを採用する場合、コマンドを使用してビューモデルに処理を委譲する方法が推奨されます。さらに、IDataErrorInfoインターフェースをモデルクラスに実装することで、データの検証を効率的に行うことができます。

Discussion