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

TestProject.zip

0.15MB

▶ 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>

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

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

 

300x250

 

▶ 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
    }
}

 

728x90

 

▶ 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>