.NET MAUI MVVM 기본 처리

.NET MAUI MVVM 기본 처리

 

MVVM 을 사용하기 위한 기본 구성을 알아봅니다.

View, ViewModel 폴더를 만들고 ViewModel 에서 사용되는 Model 폴더도 생성합니다.

(여기에선 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 값을 사용합니다.

화면에 바인딩항 ViewModel 을 정의합니다.

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
}

 

만들어진 ViewModel 을 BindingContext 에 설정합니다.

[TestView.xaml.cs]

using MauiApp1.ViewModel;

namespace MauiApp1;

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

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

 

Title 데이터 'MVVM Test'가 화면에 표시되고

Test Command 버튼 클릭시 팝업 표시됩니다.

Param Command 버튼을 클릭하면 버튼 위쪽에 있는 비밀번에 입력한 항목이 Parameter 로 전달되어

버튼 아래에 있는 Entry 에 표시됩니다.