.NET MAUI - Triggers (2)

EnterActions 및 ExitActions

트리거가 발생할 때 변경 사항을 구현하는 다른 방법은 EnterActions 및 ExitActions 컬렉션을 지정하고 TriggerAction<T> 구현을 만드는 것이다.

IList<TriggerAction> 형식의 EnterActions 컬렉션은 트리거 조건이 충족될 때 호출될 컬렉션을 정의한다.

IList<TriggerAction> 형식의 ExitActions 컬렉션은 트리거 조건이 더 이상 충족되지 않으면 호출될 컬렉션을 정의한다.

EnterActions 및 ExitActions 컬렉션에 정의된 TriggerAction 개체는 EventTrigger 클래스에서 무시된다.

 

 

FadeTriggerAction.cs

namespace MauiApp1.Trigger;
public class FadeTriggerAction : TriggerAction<VisualElement>
{
    public int StartsFrom { get; set; }

    protected override void Invoke(VisualElement sender)
    {
        sender.Animate("FadeTriggerAction", new Animation((d) =>
        {
            var val = StartsFrom == 1 ? d : 1 - d;
            sender.BackgroundColor = Color.FromRgb(1, val, 1);
        }),
        length: 1000, // milliseconds
        easing: Easing.Linear);
    }
}

EnterExitAction.xaml.cs

<?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.EnterExitAction"
             xmlns:local="clr-namespace:MauiApp1.Trigger"
             Title="Enter Exit Action">
    <VerticalStackLayout>
        <Entry Placeholder="Enter job title">
            <Entry.Triggers>
                <Trigger TargetType="Entry"
                 Property="Entry.IsFocused"
                 Value="True">
                    <Trigger.EnterActions>
                        <local:FadeTriggerAction StartsFrom="0" />
                    </Trigger.EnterActions>

                    <Trigger.ExitActions>
                        <local:FadeTriggerAction StartsFrom="1" />
                    </Trigger.ExitActions>
                </Trigger>
            </Entry.Triggers>
        </Entry>
    </VerticalStackLayout>
</ContentPage>

트리거에서 EnterActions 및 ExitAction과 Setter 개체를 제공할 수 있지만 Setter 개체는 즉시 호출된다.

(EnterAction 또는 ExitAction이 완료될 때까지 기다리지 않음).

State triggers

상태 트리거는 VisualState가 적용되어야 하는 조건을 정의하는 특수화된 트리거 그룹이다.

상태 트리거는 VisualState의 StateTriggers 컬렉션에 추가된다.

이 컬렉션에는 단일 상태 트리거 또는 여러 상태 트리거가 포함될 수 있다.

컬렉션의 상태 트리거가 활성화되면 VisualState가 적용된다.

State trigger

StateTriggerBase 클래스에서 파생된 StateTrigger 클래스에는 IsActive 바인딩 가능 속성이 있다. 

StateTrigger는 IsActive 속성 값이 변경될 때 VisualState 변경을 트리거한다.

<Style TargetType="Grid">
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
            <VisualStateGroup>
                <VisualState x:Name="Checked">
                    <VisualState.StateTriggers>
                        <StateTrigger IsActive="{Binding IsToggled}"
                                      IsActiveChanged="OnCheckedStateIsActiveChanged" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor"
                                Value="Black" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="Unchecked">
                    <VisualState.StateTriggers>
                        <StateTrigger IsActive="{Binding IsToggled, Converter={StaticResource inverseBooleanConverter}}"
                                      IsActiveChanged="OnUncheckedStateIsActiveChanged" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor"
                                Value="White" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>

이 예에서 암시적 Style은 Grid 개체를 대상으로 한다. 바인딩된 개체의 IsToggled 속성이 true이면 Grid의 배경색이 검은색으로 설정된다. 바인딩된 개체의 IsToggled 속성이 false가 되면 VisualState 변경이 트리거되고 Grid의 배경색이 흰색이 된다. 또한 VisualState 변경이 발생할 때마다 VisualState에 대한 IsActiveChanged 이벤트가 발생한다. 각 VisualState는 이 이벤트에 대한 이벤트 핸들러를 등록한다.

void OnCheckedStateIsActiveChanged(object sender, EventArgs e)
{
    StateTriggerBase stateTrigger = sender as StateTriggerBase;
    Console.WriteLine($"Checked state active: {stateTrigger.IsActive}");
}

void OnUncheckedStateIsActiveChanged(object sender, EventArgs e)
{
    StateTriggerBase stateTrigger = sender as StateTriggerBase;
    Console.WriteLine($"Unchecked state active: {stateTrigger.IsActive}");
}

Adaptive trigger

window 가 지정된 Height 이거나 Width 일때 VisualState 변경은 트리거 한다. 

VisualState를 적용해야 하는 최소 창 높이를 나타내는 double 형식의 MinWindowHeight 이다.
VisualState를 적용해야 하는 최소 창 너비를 나타내는 double 형식의 MinWindowWidth 이다..

<Style TargetType="StackLayout">
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
            <VisualStateGroup>
                <VisualState x:Name="Vertical">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Property="Orientation"
                                Value="Vertical" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="Horizontal">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="800" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Property="Orientation"
                                Value="Horizontal" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>

이 예제에서 암시적 Style은 StackLayout 개체를 대상으로 한다. 창 너비가 0에서 800  사이인 경우 스타일이 적용되는 StackLayout 개체는 세로 방향을 갖는다. 창 너비가 >= 800  경우 VisualState 변경이 트리거되고 StackLayout 방향이 수평으로 변경된다. MinWindowHeight 및 MinWindowWidth 속성은 독립적으로 또는 서로 함께 사용할 수 있다.

두 속성을 한꺼번에 설정할 수도 있다. 

<AdaptiveTrigger MinWindowWidth="800"
                 MinWindowHeight="1200"/>

 현재 창 너비가 >= 800 이고 현재 창 높이가 >= 1200 일 때 해당 VisualState가 적용된다.

(현재 버그인지 전혀 동작하지 않는다...... )

 

CompareStateTrigger

속성이 특정 값과 같을 때 VisualState 변경을 트리거

<Style TargetType="Grid">
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
            <VisualStateGroup>
                <VisualState x:Name="Checked">
                    <VisualState.StateTriggers>
                        <CompareStateTrigger Property="{Binding Source={x:Reference checkBox}, Path=IsChecked}"
                                             Value="True" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor"
                                Value="Black" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="Unchecked">
                    <VisualState.StateTriggers>
                        <CompareStateTrigger Property="{Binding Source={x:Reference checkBox}, Path=IsChecked}"
                                             Value="False" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor"
                                Value="White" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>
...
<Grid>
    <Frame BackgroundColor="White"
           CornerRadius="12"
           Margin="24"
           HorizontalOptions="Center"
           VerticalOptions="Center">
        <StackLayout Orientation="Horizontal">
            <CheckBox x:Name="checkBox"
                      VerticalOptions="Center" />
            <Label Text="Check the CheckBox to modify the Grid background color."
                   VerticalOptions="Center" />
        </StackLayout>
    </Frame>
</Grid>

 

Device state trigger

앱이 실행 중인 장치 플랫폼에 따라 VisualState 변경을 트리거

 

<Style x:Key="DeviceStateTriggerPageStyle"
       TargetType="ContentPage">
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
            <VisualStateGroup>
                <VisualState x:Name="iOS">
                    <VisualState.StateTriggers>
                        <DeviceStateTrigger Device="iOS" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor"
                                Value="Silver" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="Android">
                    <VisualState.StateTriggers>
                        <DeviceStateTrigger Device="Android" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor"
                                Value="#2196F3" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>

Orientation state trigger

(이것도 현재 버그있음 버그 투성)

장치의 방향이 변경될 때 VisualState 변경을 트리거

<Style x:Key="OrientationStateTriggerPageStyle"
       TargetType="ContentPage">
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
            <VisualStateGroup>
                <VisualState x:Name="Portrait">
                    <VisualState.StateTriggers>
                        <OrientationStateTrigger Orientation="Portrait" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor"
                                Value="Silver" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="Landscape">
                    <VisualState.StateTriggers>
                        <OrientationStateTrigger Orientation="Landscape" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor"
                                Value="White" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>

 

 

관련영상

https://youtu.be/spgsyWNuTQc