.NET MAUI - CommunityToolkit.Maui 유용한 Behavior 1

.NET 다중 플랫폼 앱 UI(.NET MAUI) 동작을 사용하면 SubClass 화 하지 않고도 사용자 인터페이스 컨트롤에 기능을 추가할 수 있다. 대신 기능은 동작 클래스에서 구현되고 컨트롤 자체의 일부인 것처럼 컨트롤에 연결된다.

자세한 내용은 아래를 참조하자

https://yogingang.tistory.com/327

.NET MAUI - Behaviors

https://docs.microsoft.com/ko-KR/dotnet/maui/fundamentals/behaviors

동작 - .NET MAUI

 

CharactersValidationBehavior

지정된 매개 변수에 따라 텍스트 입력의 유효성을 검사할 수 있도록 하는 것

 

EmailValidationBehavior

텍스트 입력이 유효한 전자 메일 주소인지 여부를 확인할 수 있는 것

 

EventToCommandBehavior

사용자가 이벤트를 통해 명령을 호출할 수 있도록 하는 동작이다. 명령을 지원하도록 설계되지 않은 컨트롤에 의해 노출된 이벤트에 명령을 연결하도록 설계되었다. 이를 통해 컨트롤의 임의 이벤트를 명령에 매핑할 수 있다.

 

MaskedBehavior

데이터 입력을 할때 입력에 대해 Layout 을 정의할 수 있도록 하는 동작

(Password 를 넣을때 쓰는 Mask (*) 가 아니다.  문자열 format 을 만들어 준다.)

 

그럼 위 예제들을 활용하는 방법을 확인해보자

일단 Xaml 에서 CommunityToolkit.Maui 의 behavior 들을 사용하기 위해 xmlns 를 추가 하자

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

 

BehaviorFirstViewModel.cs

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

namespace MauiApp1.Behaviors;
public partial class BehaviorFirstViewModel : ObservableObject
{
    [ObservableProperty]
    private string _message;

    [RelayCommand]
    private void Click() => Message = "눌렀다";
}

BehaviorFirst.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.Behaviors.BehaviorFirst"
             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             xmlns:local="clr-namespace:MauiApp1.Behaviors"
             x:DataType="local:BehaviorFirstViewModel"
             Title="BehaviorFirstPage">
    <ContentPage.BindingContext>
        <local:BehaviorFirstViewModel/>
    </ContentPage.BindingContext>
    <ContentPage.Resources>
        <Style x:Key="InvalidEntryStyle" TargetType="Entry">
            <Setter Property="TextColor" Value="Red" />
            <Setter Property="FontAttributes" Value="Italic" />
            <Setter Property="FontSize" Value="14"/>
        </Style>
        <Style x:Key="ValidEntryStyle" TargetType="Entry">
            <Setter Property="TextColor" Value="Green" />
            <Setter Property="FontAttributes" Value="Bold" />
            <Setter Property="FontSize" Value="24"/>
        </Style>
        <Style TargetType="Label">
            <Setter Property="TextColor" Value="Blue" />
            <Setter Property="FontAttributes" Value="Bold" />
            <Setter Property="FontSize" Value="24"/>
        </Style>
    </ContentPage.Resources>
    <VerticalStackLayout Spacing="10">
        <Entry Placeholder="Enter Digit" 
               PlaceholderColor="Blue">
            <Entry.Behaviors>
                <toolkit:CharactersValidationBehavior 
                InvalidStyle="{StaticResource InvalidEntryStyle}"
                ValidStyle="{StaticResource ValidEntryStyle}"
                Flags="ValidateOnValueChanged"
                CharacterType="Digit"                    
                MinimumCharacterTypeCount="2" />
            </Entry.Behaviors>
        </Entry>

        <Entry Placeholder="Enter Email" 
               PlaceholderColor="Blue">
            <Entry.Behaviors>
                <toolkit:EmailValidationBehavior 
                InvalidStyle="{StaticResource InvalidEntryStyle}"
                ValidStyle="{StaticResource ValidEntryStyle}"
                Flags="ValidateOnValueChanged"
            />
            </Entry.Behaviors>
        </Entry>

        <Label Text="{Binding Message}" />
        <Button Text="Click Me!!">
            <Button.Behaviors>
                <toolkit:EventToCommandBehavior
                EventName="Clicked"
                Command="{Binding ClickCommand}"/>
            </Button.Behaviors>
        </Button>

        <Entry Placeholder="Enter Digit" 
               PlaceholderColor="Blue"
               IsPassword="False"
               >
            <Entry.Behaviors>
                <toolkit:MaskedBehavior Mask="XXXX-XX-XXXX"/>
            </Entry.Behaviors>
        </Entry>
        
    </VerticalStackLayout>
</ContentPage>

BehaviorFirst.xaml.cs

namespace MauiApp1.Behaviors;
public partial class BehaviorFirst : ContentPage
{
	public BehaviorFirst()
	{
		InitializeComponent();
	}
}

 

관련영상

https://youtu.be/FXMGHVf8_KI