Zenn
🦔

CommunityToolkit.Mvvmを使用したWPF MVVMパターン実装ガイド

2024/11/18に公開
.NET
C#
MVVM
WPF
記事投稿コンテスト「今年の最も大きなチャレンジ」
tech

1. はじめに

MVVMの記述量を減らしたかったためReactive PropertyからCommunityToolkit.Mvvmへ移行することにしました。WPFアプリケーションでMVVMパターンを実装する方法を説明します。特に、TextBoxとViewModel、Modelの連携に焦点を当てて解説します。

2. 実装の概要

MVVMパターンは以下の3つの層で構成されています：

  • Model: データとビジネスロジックを保持
  • ViewModel: ModelとViewの橋渡し役
  • View: ユーザーインターフェース

3. コード実装

Model層の実装

// Model: ユーザー情報を保持する基本クラス
public class UserModel
{
    public string Name { get; set; }
    public string Email { get; set; }
}

ViewModel層の実装

// ViewModel: ViewとModelの橋渡し役
public partial class MainWindowViewModel : ObservableObject
{
    // モデルのインスタンスを保持
    private readonly UserModel _userModel;

    // プロパティ変更通知を自動実装
    [ObservableProperty]
    private string _name;

    [ObservableProperty]
    private string _email;

    public MainWindowViewModel()
    {
        _userModel = new UserModel();
        
        // モデルの初期値をViewModelにセット
        Name = _userModel.Name;
        Email = _userModel.Email;
    }

    // Nameプロパティが変更されたときの処理
    partial void OnNameChanged(string value)
    {
        _userModel.Name = value;
    }

    // Emailプロパティが変更されたときの処理
    partial void OnEmailChanged(string value)
    {
        _userModel.Email = value;
    }
}

View層の実装

<!-- MainWindow.xaml - ユーザーインターフェースの定義 -->
<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="450" Width="800">
    <StackPanel Margin="10">
        <!-- Name入力フィールド -->
        <TextBlock Text="Name:" Margin="0,0,0,5"/>
        <TextBox Text="{Binding Name, UpdateSourceTrigger=PropertyChanged}" 
                 Margin="0,0,0,10"/>
        
        <!-- Email入力フィールド -->
        <TextBlock Text="Email:" Margin="0,0,0,5"/>
        <TextBox Text="{Binding Email, UpdateSourceTrigger=PropertyChanged}" 
                 Margin="0,0,0,10"/>
    </StackPanel>
</Window>

// MainWindow.xaml.cs - ViewModelの初期化とDataContextの設定
public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        DataContext = new MainWindowViewModel();
    }
}

4. 実装の解説

データの流れ

  1. ユーザーがTextBoxに入力
  2. ViewModelのプロパティが更新される（Bindingによる）
  3. OnXxxChangedメソッドが呼び出される
  4. Modelの値が更新される

重要なポイント

  1. Model層

    • シンプルなデータモデルとして実装
    • ビジネスロジックとデータを保持

  2. ViewModel層

    • ObservableObjectを継承して変更通知機能を実装
    • [ObservableProperty]属性でプロパティを自動生成
    • ModelとViewの橋渡しを担当

  3. View層

    • XAMLでUIを定義
    • ViewModelとのデータバインディングを設定
    • UpdateSourceTrigger=PropertyChangedで即時更新を実現

実装の利点

  • コードの重複を削減
  • プロパティ変更通知の自動実装
  • テストしやすい設計
  • UI層とビジネスロジックの分離

5. まとめ

CommunityToolkit.Mvvmを使用することで、MVVMパターンを効率的に実装できます。特に[ObservableProperty]属性を使用することで、プロパティ変更通知の実装が大幅に簡略化されます。
https://qiita.com/hqf00342/items/d12bb669d1ac6fed6ab6

Discussion