[C#/MAUI/COMMUNITY TOOLKIT/.NET6] CommunityToolkit MVVM 패턴 사용하기

■ CommunityToolkit MVVM 패턴을 사용하는 방법을 보여준다.

▶ TestProject.csproj


<Project Sdk="Microsoft.NET.Sdk">
    <PropertyGroup>
        <TargetFrameworks>net6.0-android;net6.0-ios;net6.0-maccatalyst</TargetFrameworks>
        <TargetFrameworks Condition="$([MSBuild]::IsOSPlatform('windows'))">$(TargetFrameworks);net6.0-windows10.0.19041.0</TargetFrameworks>
        <OutputType>Exe</OutputType>
        <RootNamespace>TestProject</RootNamespace>
        <UseMaui>true</UseMaui>
        <SingleProject>true</SingleProject>
        <ImplicitUsings>enable</ImplicitUsings>
        <ApplicationTitle>TestProject</ApplicationTitle>
        <ApplicationId>com.companyname.testproject</ApplicationId>
        <ApplicationIdGuid>307F785A-6EDE-4AEB-8813-DC0FFA886398</ApplicationIdGuid>
        <ApplicationDisplayVersion>1.0</ApplicationDisplayVersion>
        <ApplicationVersion>1</ApplicationVersion>
        <SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'ios'">14.2</SupportedOSPlatformVersion>
        <SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'maccatalyst'">14.0</SupportedOSPlatformVersion>
        <SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'android'">21.0</SupportedOSPlatformVersion>
        <SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'windows'">10.0.17763.0</SupportedOSPlatformVersion>
        <TargetPlatformMinVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'windows'">10.0.17763.0</TargetPlatformMinVersion>
        <SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'tizen'">6.5</SupportedOSPlatformVersion>
        <EmbedAssembliesIntoApk>true</EmbedAssembliesIntoApk>
    </PropertyGroup>
    <ItemGroup>
        <MauiIcon Include="Resources\appicon.svg" ForegroundFile="Resources\appiconfg.svg" Color="#512bd4" />
        <MauiSplashScreen Include="Resources\appiconfg.svg" Color="#512bd4" BaseSize="128,128" />
        <MauiImage Include="Resources\Images\*" />
        <MauiImage Update="Resources\Images\dotnet_bot.svg" BaseSize="168,208" />
        <MauiFont Include="Resources\Fonts\*" />
        <MauiAsset Include="Resources\Raw\**" LogicalName="%(RecursiveDir)%(Filename)%(Extension)" />
    </ItemGroup>
    <ItemGroup>
        <PackageReference Include="CommunityToolkit.Mvvm" Version="8.0.0-preview4" />
    </ItemGroup>
</Project>

<TargetFrameworks>net6.0-android;net6.0-ios;net6.0-maccatalyst</TargetFrameworks>

<TargetFrameworks Condition="$([MSBuild]::IsOSPlatform('windows'))">$(TargetFrameworks);net6.0-windows10.0.19041.0</TargetFrameworks>

<RootNamespace>TestProject</RootNamespace>

<ImplicitUsings>enable</ImplicitUsings>

<ApplicationTitle>TestProject</ApplicationTitle>

<ApplicationId>com.companyname.testproject</ApplicationId>

</PropertyGroup>

</ItemGroup>

</ItemGroup>

</Project>

※ "NuGet 패키지 관리" 메뉴의 "찾아보기" 탭에서 "시험판 포함" 체크 박스를 체크하고 해당 누겟을 참조한다.

▶ MainPageViewModel.cs


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

namespace TestProject
{
    /// <summary>
    /// 메인 페이지 뷰 모델
    /// </summary>
    [INotifyPropertyChanged]
    public partial class MainPageViewModel
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Field
        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region Field

        /// <summary>
        /// 입력 텍스트
        /// </summary>
        [ObservableProperty]
        private string inputText = null;

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - MainPageViewModel()

        /// <summary>
        /// 생성자
        /// </summary>
        public MainPageViewModel()
        {
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region 초기화하기 - Reset()

        /// <summary>
        /// 초기화하기
        /// </summary>
        [RelayCommand]
        private void Reset()
        {
            InputText = string.Empty;
        }

        #endregion
    }
}

using CommunityToolkit.Mvvm.ComponentModel;

using CommunityToolkit.Mvvm.Input;

namespace TestProject

{

/// <summary>

/// 메인 페이지 뷰 모델

/// </summary>

[INotifyPropertyChanged]

public partial class MainPageViewModel

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Field

////////////////////////////////////////////////////////////////////////////////////////// Private

#region Field

/// <summary>

/// 입력 텍스트

/// </summary>

[ObservableProperty]

private string inputText = null;

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - MainPageViewModel()

/// <summary>

/// 생성자

/// </summary>

public MainPageViewModel()

{

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Private

#region 초기화하기 - Reset()

/// <summary>

/// 초기화하기

/// </summary>

[RelayCommand]

private void Reset()

{

InputText = string.Empty;

}

#endregion

}

▶ MainPage.xaml


<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:TestProject">
    <ContentPage.BindingContext>
        <local:MainPageViewModel />
    </ContentPage.BindingContext>
    <VerticalStackLayout
        HorizontalOptions="Center"
        VerticalOptions="Center"
        Spacing="10">
        <Entry
            HorizontalOptions="Center"
            Placeholder="텍스트를 입력해 주시기 바랍니다."
            FontSize="16"
            Text="{Binding InputText}" />
        <Button
            HorizontalOptions="Center"
            Text="초기화"
            Command="{Binding ResetCommand}" />
    </VerticalStackLayout>
</ContentPage>

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage x:Class="TestProject.MainPage"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:local="clr-namespace:TestProject">

<ContentPage.BindingContext>

<local:MainPageViewModel />

</ContentPage.BindingContext>

<VerticalStackLayout

HorizontalOptions="Center"

VerticalOptions="Center"

Spacing="10">

<Entry

HorizontalOptions="Center"

Placeholder="텍스트를 입력해 주시기 바랍니다."

FontSize="16"

Text="{Binding InputText}" />

<Button

HorizontalOptions="Center"

Text="초기화"

Command="{Binding ResetCommand}" />

</VerticalStackLayout>

</ContentPage>

TestProject.zip