.NET MAUI CommunityToolkit.Mvvm 사용하기

.NET MAUI CommunityToolkit.Mvvm 사용하기

 

이전 포스팅에서 MVVM 사용법에 대해서 알아봤습니다.

2024.04.26 - [코딩/.NET MAUI] - .NET MAUI MVVM 기본 처리

그런데 CommunityToolkit.Mvvm 을 이용하면 간단한 코드로 Mvvm 구현이 가능합니다.

 

먼저 프로젝트의 Nuget 패키지 관리자에서 CommunityToolkit.Mvvm 를 설치합니다.

ViewModel 에서 아래처럼 Property 와 Command 를 선언하게 되면 View 에서 사용이 가능하게 됩니다.

MainViewModel.cs

using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;

namespace Maui.ToolKitTest.ViewModels
{
    [INotifyPropertyChanged]
    internal partial class MainViewModel
    {
        [ObservableProperty]
        private string inputText = "";

        [RelayCommand]
        private void Reset()
        {
            InputText = "";
        }

        public MainViewModel()
        {
        }
    }
}

이전에는 Command 를 선언하고 Command 가 호출하는 메서드를 정의해 줬다면 아래처럼 Relaycommand 로 정의하고

바로 Reset 메서드를 정의해 주면 ResetCommand 로 inputText 은 InputText 으로 사용할 수 있게 된다.

MainView.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="Maui.ToolKitTest.Views.MainView">

    <ScrollView>
        <VerticalStackLayout 
            Spacing="25" 
            Padding="30,0" 
            VerticalOptions="Center">

            <Entry
                Text="{Binding InputText}"
                SemanticProperties.HeadingLevel="Level2"
                FontSize="18"
                HorizontalOptions="Center" />

            <Button 
                Text="Reset"
                SemanticProperties.Hint="Reset Text"
                Command="{Binding ResetCommand}"
                HorizontalOptions="Center" />

        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

위 xaml 코드를 보면 InputText, ResetCommand 를 사용했습니다.

 

MainView.xaml.cs

using Maui.ToolKitTest.ViewModels;

namespace Maui.ToolKitTest.Views
{
    public partial class MainView : ContentPage
    {
        public MainView()
        {
            InitializeComponent();

            this.BindingContext = new MainViewModel();
        }
    }
}

 

소스
https://github.com/kei-soft/KJunBlog/tree/master/Maui.ToolKitTest

KJunBlog/Maui.ToolKitTest at master · kei-soft/KJunBlog