【WPF】DataGridをMVVMで実装する方法

MVVM（Model-View-ViewModel）は、WPF（Windows Presentation Foundation）などのXAMLベースのアプリケーション開発でよく使用されるデザインパターンです。MVVMはアプリケーションのロジックとUIを分離し、テスタビリティや保守性を向上させることを目的としています。DataGridの実装においてもMVVMパターンを適用することで、柔軟で拡張可能なコードを実現することができます。

実装するUI

Viewの準備

まずは、DataGridを表示するViewを作成します。これはXAMLファイルとして実装されます。

<!-- MainWindow.xaml -->
<Window x:Class="MVVMDataGridExample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:MVVMDataGridExample"
        Title="MVVM DataGrid Example" Height="450" Width="800">
    <Grid>
        <DataGrid ItemsSource="{Binding DataItems}" AutoGenerateColumns="False" Margin="10"
                  SelectionMode="Single" CanUserAddRows="False">
            <DataGrid.Columns>
                <DataGridTextColumn Header="項目1" Binding="{Binding Item1}" />
                <DataGridTextColumn Header="項目2" Binding="{Binding Item2}" />
                <DataGridTextColumn Header="項目3" Binding="{Binding Item3}" />
            </DataGrid.Columns>
        </DataGrid>
    </Grid>
</Window>

上記のXAMLコードでは、DataGridのItemsSourceに{Binding DataItems}を設定しています。これにより、ViewModelにあるDataItemsプロパティがDataGridにバインディングされます。

ViewModelクラスの実装

次に、ViewModelクラスを作成します。

using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Runtime.CompilerServices;

public class Items : INotifyPropertyChanged
{
    // UIに自動更新を行うためのイベント
    public event PropertyChangedEventHandler PropertyChanged;
    protected virtual void RaisePropertyChanged([CallerMemberName]string propertyName = null)
    {
        var handler = PropertyChanged;
        if (handler != null)
        {
            handler(this, new PropertyChangedEventArgs(propertyName));
        }
    }

    private string item1;
    private string item2;
    private string item3;

    public string Item1
    {
        get { return item1; }
        set
        {
            if (item1 != value)
            {
                item1 = value;
                RaisePropertyChanged();
            }
        }
    }

    public string Item2
    {
        get { return item2; }
        set
        {
            if (item2 != value)
            {
                item2 = value;
                RaisePropertyChanged();
            }
        }
    }

    public string Item3
    {
        get { return item3; }
        set
        {
            if (item3 != value)
            {
                item3 = value;
                RaisePropertyChanged();
            }
        }
    }
}

public class MainViewModel
{
    public ObservableCollection<Items> DataItems { get; set; } // DataGridにバインディングするリスト

    public MainViewModel()
    {
        DataItems = new ObservableCollection<Items>(); // リストを初期化

        // データをロードしてDataItemsに追加
        DataItems.Add(new Items { Item1 = "000", Item2 = "111", Item3 = "222" });
        DataItems.Add(new Items { Item1 = "aaa", Item2 = "bbb", Item3 = "ccc" });
        DataItems.Add(new Items { Item1 = "AAA", Item2 = "BBB", Item3 = "CCC" });
    }
}

上記のコードでは、ViewModelクラスであるMainViewModelがDataGridのデータを保持するDataItemsプロパティを持っています。ItemsクラスはDataGridに表示する各行のデータを保持し、INotifyPropertyChangedを実装しています。これにより、プロパティが変更されたときにDataGridが自動的に更新されます。

DataGridのDataContextを設定

最後に、MainWindow.xaml.csでViewModelをインスタンス化して、DataGridのDataContextに設定します。

    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            var context = new MainViewModel();
            this.DataContext = context;
        }
    }

これで、MVVMパターンでDataGridが実装されました。DataGridはViewModelにバインドされたデータを表示し、ViewModelはビューとデータの間でうまく調整します。これにより、アプリケーションの保守性と拡張性が向上し、より効率的なコードが実現できます。