MVVM Sample for WPF UserControl
이철우
이 글에서 두 개의 WPF 프로젝트를 만들 것이다.
하나는 WPF UserControl(Net 7) 프로젝트 [MvvmSample.WpfUserControl]이고,
하나는 WPF(Net 7) 프로젝트 [Wpf.App]이다.
Wpf.App에서 MvvmSample.WpfUserControl를 참조할 것이다.
1 프로젝트 MvvmSample.WpfUserControl
[CommunityToolkit.Mvvm]를 참조에 추가한다.
dotnet add package CommunityToolkit.Mvvm --version 8.2.2
1-1 Model.cs
먼저 글 [MVVM Sample for WPF]의 [모델]과 같다.
using System;
namespace MvvmSample.WpfUserControl
{
public class Model
{
public Model() { Data = 0; }
public int Data
{
get => _data;
set
{
if (_data != value)
{
_data = value;
Console.WriteLine(this);
}
}
}
private int _data = -1;
public override string ToString() => $"Data:{Data}";
}
}
1-2 ViewModel.cs
먼저 글 [MVVM Sample for WPF]의 [뷰모델]과 같다.
using System.Windows.Input;
using CommunityToolkit.Mvvm.Input;
using CommunityToolkit.Mvvm.ComponentModel;
namespace MvvmSample.WpfUserControl
{
public class ViewModel : ObservableObject
{
public readonly Model _model;
public ViewModel()
{
_model = new Model();
ResetCommand = new RelayCommand(Reset);
IncreaseCommand = new RelayCommand(Increase);
}
public int DataForView
{
get => _model.Data;
set => SetProperty(_model.Data, value, _model, (u, n) => u.Data = n);
}
public void Reset()
{
DataForView = 0;
}
public void Increase()
{
DataForView++;
}
public ICommand ResetCommand { get; }
public ICommand IncreaseCommand { get; }
}
}
1-3 UserControlCounter.xaml
<UserControl x:Class="MvvmSample.WpfUserControl.UserControlCounter"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:MvvmSample.WpfUserControl"
mc:Ignorable="d"
d:DataContext="{d:DesignInstance Type=local:ViewModel, IsDesignTimeCreatable=False}"
d:DesignHeight="225" d:DesignWidth="400" FontSize="14">
<Grid>
<Viewbox Stretch="Uniform">
<TextBlock Text="{Binding Path=DataForView}" TextAlignment="Center"/>
</Viewbox>
<DockPanel VerticalAlignment="Top" HorizontalAlignment="Left">
<Button Content="Reset" Command="{Binding Path=ResetCommand}"/>
<Button Content="Increase" Command="{Binding Path=IncreaseCommand}"/>
</DockPanel>
</Grid>
</UserControl>
1-4 UserControlCounter.xaml.cs
using System.Windows.Controls;
namespace MvvmSample.WpfUserControl
{
/// <summary>
/// Interaction logic for UserControl1.xaml
/// </summary>
public partial class UserControlCounter : UserControl
{
public UserControlCounter()
{
InitializeComponent();
DataContext = new ViewModel();
}
}
}
2 프로젝트 Wpf.App
프로젝트 [MvvmSample.WpfUserControl]를 참조에 추가한다.
2-1 MainWindow.xaml
<Window x:Class="Wpf.App.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:Wpf.App"
xmlns:uc="clr-namespace:MvvmSample.WpfUserControl;assembly=MvvmSample.WpfUserControl"
mc:Ignorable="d"
Title="MainWindow" Height="225" Width="400" FontSize="14">
<Grid>
<uc:UserControlCounter/>
</Grid>
</Window>
3 두 프로젝트를 빌드하고 실행