.NET MAUI - Triggers (1)

이벤트 또는 데이터의 변경에 따라 컨트롤의 모양을 변경하는 작업을 한다.

 

속성 트리거

포커스를 받았을때 배경색을 변경하는 Trigger 를 확인하자.

<Entry Placeholder="Enter name">
    <Entry.Triggers>
        <Trigger TargetType="Entry"
                 Property="IsFocused"
                 Value="True">
            <Setter Property="BackgroundColor"
                    Value="Yellow" />
            <!-- Multiple Setter elements are allowed -->
        </Trigger>
    </Entry.Triggers>
</Entry>

• TargetType - 트리거가 적용되는 컨트롤 형식
• Property - 모니터링되는 컨트롤의 속성
• Value - 트리거가 활성화되도록 모니터링되는 속성에 대해 발생하는 값
• Setter - 트리거 조건이 충족되면 적용되는 요소의 Setter 컬렉션

스타일을 사용하여 트리거 적용

Resource 영역에 Style 을 이용하여 Trigger 을 적용할 수 있다. 

<?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.Trigger.ResourceTrigger"
             Title="ResourceTrigger">
    <ContentPage.Resources>
        <Style TargetType="Entry">
            <Style.Triggers>
                <Trigger TargetType="Entry"
                     Property="IsFocused"
                     Value="True">
                    <Setter Property="BackgroundColor"
                        Value="Yellow" />
                    <!-- Multiple Setter elements are allowed -->
                </Trigger>
            </Style.Triggers>
        </Style>
    </ContentPage.Resources>
    <VerticalStackLayout>
        <Entry Placeholder="Enter Name"/>
    </VerticalStackLayout>
</ContentPage>

데이터 트리거

바인딩된 데이터가 지정된 조건을 충족하는 경우 속성 값을 적용하거나 작업을 수행하는 트리거

Binding 태그 확장은 지정된 조건을 모니터링하는 데 사용된다.

 

Entry가 비어 있는 경우  Button 사용하지 않도록 설정하는 것을  DataTrigger 를 통해 처리

<?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.Trigger.DataTrigger"
             Title="DataTrigger">
    <VerticalStackLayout>
        <Entry x:Name="entry"
           Text=""
           Placeholder="Enter text" />  
        <Button Text="Save">
            <Button.Triggers>
                <DataTrigger TargetType="Button"
                     Binding="{Binding Source={x:Reference entry},
                                       Path=Text.Length}"
                     Value="0">
                    <Setter Property="IsEnabled"
                    Value="True" />
                    <!-- Multiple Setter elements are allowed -->
                </DataTrigger>
            </Button.Triggers>
        </Button>
    </VerticalStackLayout>
</ContentPage>

이벤트 트리거

이벤트에 대한 응답으로 일련의 작업을 적용하는 트리거를 나타낸다.

Trigger와 달리 EventTrigger에는 상태 종료 개념이 없으므로 이벤트를 발생시킨 조건이 더 이상 true가 아닌 경우 작업이 실행 취소되지 않는다.

EventTrigger는 Event 속성만 설정하면 된다.

<EventTrigger Event="TextChanged">
    <local:NumericValidationTriggerAction />
</EventTrigger>

트리거 작업 구현은 다음을 수행해야 한다. 

 

트리거가 적용될 컨트롤에 Type 을 사용하여 일반 TriggerAction<T> 클래스를 구현한다.

VisualElement와 같은 클래스를 사용하여 다양한 컨트롤과 함께 작동하는 트리거 작업을 작성하거나

Entry와 같은 컨트롤 유형을 지정할 수 있다.
Invoke 메서드를 재정의한다. 이 메서드는 트리거 이벤트가 발생할 때마다 호출된다.
트리거가 선언될 때 XAML에서 설정할 수 있는 속성을 선택적으로 노출한다.

public class NumericValidationTriggerAction : TriggerAction<Entry>
{
    protected override void Invoke(Entry entry)
    {
        double result;
        bool isValid = Double.TryParse(entry.Text, out result);
        entry.TextColor = isValid ? Colors.Black : Colors.Red;
    }
}

위의 event trigger 와 action 은 entry 에 text 를 입력하거나 변경할 때 double 값으로 변경 가능 하면 검은색

변경이 불가능 하면 빨간색을 표시한다.

 

ResourceDictionary에서 트리거를 공유할 때 주의하십시오. 

하나의 인스턴스는 컨트롤 간에 공유되므로 한 번 구성된 모든 상태가 컨트롤에 모두 적용됩니다.

 

Multi-triggers

여러 조건이 필요할 경우 사용한다. 

<?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.Trigger.MultiTrigger"
             Title="MultiTrigger">
    <VerticalStackLayout>
        <Entry x:Name="email" Placeholder="email"
       Text="" />
        <Entry x:Name="phone" Placeholder="phone"
       Text="" />
        <Button Text="Save">
            <Button.Triggers>
                <MultiTrigger TargetType="Button">
                    <MultiTrigger.Conditions>
                        <BindingCondition Binding="{Binding Source={x:Reference email},
                                            Path=Text.Length}"
                                  Value="0" />
                        <BindingCondition Binding="{Binding Source={x:Reference phone},
                                            Path=Text.Length}"
                                  Value="0" />
                    </MultiTrigger.Conditions>
                    <Setter Property="IsEnabled" Value="False" />
                    <!-- multiple Setter elements are allowed -->
                </MultiTrigger>
            </Button.Triggers>
        </Button>
    </VerticalStackLayout>
</ContentPage>

PropertyCondition 을 추가 할 수 도 있다. 

<PropertyCondition Property="Text"
                   Value="OK" />

관련영상

https://youtu.be/JnSbNC6UUv8