[.NET MAUI] MVVM 기본 처리

MVVM 을 사용하기 위한 기본 구성을 정리해본다.

일단 폴더로 View, ViewModel 폴더를 만들고 ViewModel 에서 사용되는 Model 도 폴더로 생성한다.

[TestView.xaml]

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiApp1.TestView"
             Title="TestView">
    <StackLayout Margin="10">
        <Label Text="{Binding Title}" FontSize="20" TextColor="{x:OnPlatform iOS=Black, Android=Blue, UWP=Gray}"/>
        <Button Text="Test Command" Command="{Binding TestCommand}"/>
        <Entry x:Name="passwordEntry" IsPassword="True" Text="mvvm"/>
        <Button  Text="Param Command" Command="{Binding ParameterCommand}" CommandParameter="{Binding Source={x:Reference passwordEntry}, Path=Text}"/>
        <Entry Text="{Binding ParamValue}" />
    </StackLayout>
</ContentPage>

Parameter 가 없는 Command 는 TestCommand

Parameter 가 있는 Command 는 ParameterCommand 로 CommandParameter 에 passwordEntry 값을 사용한다.

[TestView.xaml.cs]

using MauiApp1.ViewModel;

namespace MauiApp1;

public partial class TestView : ContentPage
{
	public TestView()
	{
		InitializeComponent();

		this.BindingContext = new TestViewModel();
	}
}​

 

ViewModel 정의

using System.ComponentModel;
using System.Windows.Input;

namespace MauiApp1.ViewModel;

internal class TestViewModel : INotifyPropertyChanged
{
    #region INotifyPropertyChanged
    public event PropertyChangedEventHandler PropertyChanged;

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

    #region Command
    public ICommand TestCommand { get; private set; }
    public ICommand ParameterCommand { get; private set; }
    #endregion

    #region Field
    private string title = "MVVM Test";
    private string paramValue = "";
    #endregion

    #region Properties
    /// <summary>
    /// 타이틀
    /// </summary>
    public string Title
    {
        get { return this.title; }
        set
        {
            this.title = value;
            OnPropertyChanged("Title");
        }
    }

    /// <summary>
    /// 파라미터 값
    /// </summary>
    public string ParamValue
    {
        get { return this.paramValue; }
        set
        {
            this.paramValue = value;
            OnPropertyChanged("ParamValue");
        }
    }
    #endregion

    // Constructor
    #region  TestViewModel
    /// <summary>
    /// TestViewModel
    /// </summary>
    public TestViewModel()
    {
        this.TestCommand = new Command(OnTestCommand);
        this.ParameterCommand = new Command<string>(OnParameterCommand);
    }
    #endregion

    // Methods
    #region OnTestCommand
    private void OnTestCommand()
    {
        App.Current.MainPage.DisplayAlert("Test", "Test Command Click.", "OK");
    }
    #endregion

    #region OnParameterCommand(string param)
    private void OnParameterCommand(string param)
    {
        this.ParamValue = param;
    }
    #endregion
}

Title 데이터 'MVVM Test'가 화면에 표시되고 Test Command 버튼 클릭시 팝업 표시된다.
Param Command 를 클릭하면 버튼위쪽 비밀번호 입력한 항목이 Parameter 로 전달되어 버튼 아래에 있는 Entry 에 표시된다.