MVVMのファイル構成

YourProject/
├── Models/
│ ├── UserControls/
│ │ ├── UserControl1Model.cs
│ │ ├── UserControl2Model.cs
│ │ └── UserControl3Model.cs
│ └── SharedDataModel.cs
├── Views/
│ ├── UserControls/
│ │ ├── UserControl1View.xaml
│ │ ├── UserControl2View.xaml
│ │ └── UserControl3View.xaml
│ └── MainWindow.xaml
├── ViewModels/
│ ├── UserControls/
│ │ ├── UserControl1ViewModel.cs
│ │ ├── UserControl2ViewModel.cs
│ │ └── UserControl3ViewModel.cs
│ └── MainWindowViewModel.cs
└── MainWindow.xaml.cs

1. UserControl1Model.cs の実装

このクラスは、UserControl1 に関連するデータモデルで、データの保持やビジネスロジックを担当します。INotifyPropertyChanged を実装し、プロパティ変更時に通知を行えるようにします。

using System.ComponentModel;

namespace YourProject.Models.UserControls
{
public class UserControl1Model : INotifyPropertyChanged
{
private string _displayText;

public string DisplayText
{
get => _displayText;
set
{
if (_displayText != value)
{
_displayText = value;
OnPropertyChanged(nameof(DisplayText));
}
}
}

public event PropertyChangedEventHandler PropertyChanged;

protected void OnPropertyChanged(string propertyName)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
}

2. UserControl1ViewModel.cs の実装

UserControl1ViewModelUserControl1View のビューモデルであり、データモデル(UserControl1Model)を使ってビューにデータを提供します。ここでは、RelayCommand を使ってボタンなどのコマンドを実装します。

using System.Windows.Input;
using YourProject.Models.UserControls;

namespace YourProject.ViewModels.UserControls
{
public class UserControl1ViewModel : INotifyPropertyChanged
{
private UserControl1DataModel _dataModel;

public UserControl1ViewModel()
{
_dataModel = new UserControl1DataModel { DisplayText = "Initial Text" };
UpdateTextCommand = new RelayCommand(UpdateText);
}

// データモデルの DisplayText プロパティにバインド
public string DisplayText
{
get => _dataModel.DisplayText;
set
{
if (_dataModel.DisplayText != value)
{
_dataModel.DisplayText = value;
OnPropertyChanged(nameof(DisplayText));
}
}
}

// コマンドの定義
public ICommand UpdateTextCommand { get; }

// コマンドの実行メソッド
private void UpdateText()
{
DisplayText = "Updated Text";
}

public event PropertyChangedEventHandler PropertyChanged;

protected void OnPropertyChanged(string propertyName)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
}

3. UserControl1View.xaml の実装

UserControl1View.xamlUserControl1ViewModel をデータコンテキストに設定し、ビューで DisplayText プロパティやコマンドをバインドします。

<UserControl x:Class="YourProject.Views.UserControls.UserControl1View"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:YourProject.ViewModels.UserControls">
<UserControl.DataContext>
<!-- ビューモデルをデータコンテキストに設定 -->
<local:UserControl1ViewModel />
</UserControl.DataContext>

<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
<!-- データバインディングで DisplayText を表示 -->
<TextBlock Text="{Binding DisplayText}" FontSize="20" Margin="10" HorizontalAlignment="Center"/>

<!-- コマンドをボタンにバインド -->
<Button Content="Update Text" Command="{Binding UpdateTextCommand}" Width="100" Margin="10" HorizontalAlignment="Center"/>
</StackPanel>
</UserControl>

RelayCommand の実装例

RelayCommandICommand を簡単に実装できる便利クラスです。これにより、ボタンのクリック時に ViewModel のメソッドが簡単に呼び出せるようになります。

RelayCommand.cs

using System;
using System.Windows.Input;

namespace YourProject.Helpers
{
public class RelayCommand : ICommand
{
private readonly Action _execute;
private readonly Func<bool> _canExecute;

public RelayCommand(Action execute, Func<bool> canExecute = null)
{
_execute = execute ?? throw new ArgumentNullException(nameof(execute));
_canExecute = canExecute;
}

public bool CanExecute(object parameter) => _canExecute?.Invoke() ?? true;

public void Execute(object parameter) => _execute();

public event EventHandler CanExecuteChanged
{
add => CommandManager.RequerySuggested += value;
remove => CommandManager.RequerySuggested -= value;
}
}
}

役割のまとめ

  • UserControl1DataModelUserControl1View に表示されるデータを保持します。このデータが変更されると、INotifyPropertyChanged により自動的に通知されます。

  • UserControl1ViewModelデータモデル(UserControl1DataModel)からデータを取得し、UserControl1View に提供します。また、ボタンなどの操作に対応するコマンドを定義します。

  • UserControl1View実際の UI(UserControl1View.xaml)で、UserControl1ViewModel をデータコンテキストに設定し、プロパティとコマンドをバインドして画面表示と操作を実現します。

コメント

タイトルとURLをコピーしました