728x90
728x170

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()
        {
        }
    }
}

View 에서 inputText 은 InputText 으로 Reset 은 ResetCommand 로 사용할수 있게된다.

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>

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

728x90
그리드형
Posted by kjun
,