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

2022. 8. 25. 00:00MAUI

반응형

MaxLengthReachedBehavior

InputView에서 허용되는 최대 길이에 도달했을 때 사용자가 작업을 트리거할 수 있도록 하는 Behavior

 

MultiValidationBehavior

여러 유효성 검사기를 결합하여 지정된 매개 변수에 따라 텍스트 입력의 유효성을 검사할 수 있도록 하는 Behavior

 

NumericValidationBehavior

텍스트 입력이 유효한 숫자 값인지 결정할 수 있도록 하는 Behavior

 

ProgressBarAnimationBehavior

현재 Progress 값에서 시간이 지남에 따라 제공된 값으로 ProgressBar에 애니메이션을 적용

 

RequiredStringValidationBehavior

텍스트 입력이 특정 텍스트와 같은지 여부를 결정할 수 있도록 하는 Behavior

 

 

사용예제

BehaviorSecond.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.BehaviorSecond"
             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             xmlns:local="clr-namespace:MauiApp1.Behaviors"
             x:DataType="local:BehaviorSecondViewModel"
             Title="BehaviorSecondPage">
    <ContentPage.BindingContext>
        <local:BehaviorSecondViewModel/>
    </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="Start typing until MaxLength is reached..."
           MaxLength="10">
            <Entry.Behaviors>
                <toolkit:MaxLengthReachedBehavior 
                Command="{Binding MaxLengthReachedCommand}" />
            </Entry.Behaviors>
        </Entry>
        <Label Text="{Binding Message}" />

        <Entry 
        IsPassword="True"
        Placeholder="Password">

            <Entry.Behaviors>
                <toolkit:MultiValidationBehavior 
                InvalidStyle="{StaticResource InvalidEntryStyle}"  
                ValidStyle="{StaticResource ValidEntryStyle}"
                Flags="ValidateOnValueChanged">

                    <toolkit:CharactersValidationBehavior 
                    x:Name="DigitValidation" 
                    CharacterType="Digit" 
                    MinimumCharacterTypeCount="1" 
                    toolkit:MultiValidationBehavior.Error="1 digit" 
                    RegexPattern="" />

                    <toolkit:CharactersValidationBehavior 
                    x:Name="UpperValidation" 
                    CharacterType="UppercaseLetter" 
                    MinimumCharacterTypeCount="1" 
                    toolkit:MultiValidationBehavior.Error="1 upper case" 
                    RegexPattern="" />

                    <toolkit:CharactersValidationBehavior 
                    x:Name="SymbolValidation" 
                    CharacterType="NonAlphanumericSymbol" 
                    MinimumCharacterTypeCount="1" 
                    toolkit:MultiValidationBehavior.Error="1 symbol" 
                    RegexPattern=""  />

                    <toolkit:CharactersValidationBehavior 
                    x:Name="AnyValidation" 
                    CharacterType="Any" 
                    MinimumCharacterTypeCount="8" 
                    toolkit:MultiValidationBehavior.Error="8 characters" 
                    RegexPattern="" />
                </toolkit:MultiValidationBehavior>
            </Entry.Behaviors>
        </Entry>

        <Entry Keyboard="Numeric"  Placeholder="NumericValidation">
            <Entry.Behaviors>
                <toolkit:NumericValidationBehavior 
                InvalidStyle="{StaticResource InvalidEntryStyle}"
                ValidStyle="{StaticResource ValidEntryStyle}"
                Flags="ValidateOnValueChanged"
                MinimumValue="1.0"
                MaximumValue="100.0"
                MaximumDecimalPlaces="2" />
            </Entry.Behaviors>
        </Entry>

        <Label Text="The ProgressBarAnimationBehavior is a behavior that animates a ProgressBar" />
        <Button Command="{Binding ExecuteCommand}" Text="Execute" />
        <ProgressBar>
            <ProgressBar.Behaviors>
                <toolkit:ProgressBarAnimationBehavior
                    x:Name="ProgressBarAnimationBehavior"
                    Progress="{Binding Progress}"
                    Length="250"/>
            </ProgressBar.Behaviors>
        </ProgressBar>


        <Entry Placeholder="RequiredStringValidationBehavior">
            <Entry.Behaviors>
                <toolkit:RequiredStringValidationBehavior 
                InvalidStyle="{StaticResource InvalidEntryStyle}"
                ValidStyle="{StaticResource ValidEntryStyle}"
                Flags="ValidateOnValueChanged"
                RequiredString="012340"
                    ExactMatch="False"/>
            </Entry.Behaviors>
        </Entry>

    </VerticalStackLayout>
</ContentPage>

BehaviorSecond.xaml.cs

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

BehaviorSecondViewModel.cs

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

namespace MauiApp1.Behaviors;
public partial class BehaviorSecondViewModel : ObservableObject
{
    public BehaviorSecondViewModel()
    {
        Progress = 0.0d;
    }
    [ObservableProperty]
    private string _message;

    [RelayCommand]
    private void MaxLengthReached() => Message = "최대길이에 도달하였다";

    [ObservableProperty]
    private double _progress;

    [RelayCommand]
    private async void Execute()
    {
        Progress = 0.0d;
        await Task.Delay(500);
        Progress += 0.1;
        await Task.Delay(500);
        Progress += 0.1;
        await Task.Delay(500);
        Progress += 0.1;
        await Task.Delay(500);
        Progress += 0.1;
        await Task.Delay(500);
        Progress += 0.1;
        await Task.Delay(500);
        Progress += 0.1;
        await Task.Delay(500);
        Progress += 0.1;
        await Task.Delay(500);
        Progress += 0.1;
        await Task.Delay(500);
        Progress += 0.1;
        await Task.Delay(500);
        Progress += 0.1;
    }
}

 

관련영상

https://youtu.be/FfEouktJ99w

 

 

반응형