MVVM Sample for WPF UserControl

[leechw9]

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 두 프로젝트를 빌드하고 실행

[jamesnet214]

@leechw9 철우님 글 잘 봤습니다. 앞으로도 MVVM 관련 다양한 아티클 기대하겠습니다!

[leechw9]

고맙습니다.