트리거

아티클
11/11/2023

.NET 다중 플랫폼 앱 UI(.NET MAUI) 트리거를 사용하면 이벤트 또는 데이터 변경에 따라 컨트롤의 모양을 변경하는 작업을 XAML에서 선언적으로 표현할 수 있습니다. 또한 특수한 트리거 그룹인 상태 트리거는 VisualState를 적용해야 하는 시기를 정의합니다.

트리거를 컨트롤의 Triggers 컬렉션에 직접 할당하거나 여러 컨트롤에 적용할 페이지 수준 또는 앱 수준 리소스 사전에 추가할 수 있습니다.

속성 트리거

A Trigger 는 지정된 속성이 지정된 조건을 충족하는 경우 속성 값을 적용하거나 작업을 수행하는 트리거를 나타냅니다.

다음 예제에서는 포커스를 Trigger 받을 때 배경색을 Entry 변경하는 방법을 보여 줍니다.

<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 입니다.

또한 선택 사항 EnterActions 및 ExitActions 컬렉션을 지정할 수 있습니다. 자세한 내용은 EnterActions 및 ExitActions를 참조하세요.

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

트리거는 컨트롤, 페이지 또는 ResourceDictionary애플리케이션의 Style 선언에도 추가할 수 있습니다. 다음 예제에서는 페이지의 모든 Entry 컨트롤에 대한 암시적 스타일을 선언합니다.

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

데이터 트리거

A DataTrigger 는 바인딩된 데이터가 지정된 조건을 충족하는 경우 속성 값을 적용하거나 작업을 수행하는 트리거를 나타냅니다. Binding 태그 확장은 지정된 조건을 모니터링하는 데 사용됩니다.

다음 예제에서는 비어 있는 DataTrigger 경우 Entry 를 Button 사용하지 않도록 설정하는 방법을 보여 줍니다.

<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="False" />
            <!-- Multiple Setter elements are allowed -->
        </DataTrigger>
    </Button.Triggers>
</Button>

이 예제에서는 길이 Entry 가 0이면 트리거가 활성화됩니다.

팁

계산할 Path=Text.Length 때는 항상 대상 속성(예: )에 대한 기본값을 제공합니다. Text=""그렇지 않으면 null 트리거가 예상대로 작동하지 않기 때문입니다.

또한 선택 사항 EnterActions 및 ExitActions 컬렉션을 지정할 수 있습니다. 자세한 내용은 EnterActions 및 ExitActions를 참조하세요.

이벤트 트리거

이벤트에 EventTrigger 대한 응답으로 작업 집합을 적용하는 트리거를 나타냅니다. 달리 Trigger, EventTrigger 상태 종료의 개념이 없으므로 이벤트를 발생시킨 조건이 더 이상 true가 아니면 작업이 실행 취소되지 않습니다.

속성 EventTrigger 만 Event 설정해야 합니다.

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

이 예제에는 요소가 없습니다 Setter . 대신 개체가 있습니다 NumericalValidationTriggerAction .

참고 항목

이벤트 트리거는 지원 EnterActions ExitActions되지 않으며 .

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

트리거가 적용될 컨트롤 형식에 해당하는 제네릭 매개 변수를 사용하여 제네릭 TriggerAction<T> 클래스를 구현합니다. 다양한 컨트롤에서 작동하는 트리거 작업을 작성하거나 컨트롤 형식을 지정하는 등의 VisualElement 클래스를 사용할 수 있습니다 Entry.
Invoke 메서드를 재정의합니다. 이 메서드는 트리거 이벤트가 발생할 때마다 호출됩니다.
필요에 따라 트리거가 선언될 때 XAML에서 설정할 수 있는 속성을 노출합니다.

다음 예제에서는 클래스를 보여줍니다.NumericValidationTriggerAction

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

Warning

에서 트리거를 공유할 때는 주의해야 합니다 ResourceDictionary. 하나의 인스턴스가 컨트롤 간에 공유되므로 한 번 구성된 모든 상태가 모두 적용됩니다.

다중 트리거

A MultiTrigger 는 조건 집합이 충족될 때 속성 값을 적용하거나 작업을 수행하는 트리거를 나타냅니다. 개체가 적용되기 전에 Setter 모든 조건이 true여야 합니다.

다음 예제에서는 두 Entry 개체에 MultiTrigger 바인딩하는 것을 보여 줍니다.

<Entry x:Name="email"
       Text="" />
<Entry x:Name="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>

또한 컬렉션에는 다음과 같은 개체가 MultiTrigger.Conditions 포함될 PropertyCondition 수 있습니다.

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

EnterActions 및 ExitActions

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

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

참고 항목

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

다음 예제에서는 다음을 지정하는 속성 트리거를 EnterActionExitAction보여줍니다.

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

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

트리거가 적용될 컨트롤 형식에 해당하는 제네릭 매개 변수를 사용하여 제네릭 TriggerAction<T> 클래스를 구현합니다. 다양한 컨트롤에서 작동하는 트리거 작업을 작성하거나 컨트롤 형식을 지정하는 등의 VisualElement 클래스를 사용할 수 있습니다 Entry.
Invoke 메서드를 재정의합니다. 이 메서드는 트리거 이벤트가 발생할 때마다 호출됩니다.
필요에 따라 트리거가 선언될 때 XAML에서 설정할 수 있는 속성을 노출합니다.

다음 예제에서는 클래스를 보여줍니다.FadeTriggerAction

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);
    }
}

참고 항목

트리거의 개체뿐만 Setter 아니라 개체도 제공할 ExitActions EnterActions 수 있지만 개체가 Setter 즉시 호출됩니다(또는 완료될 때까지 기다리 EnterActionExitAction 지 않음).

상태 트리거

상태 트리거는 VisualState를 적용해야 하는 조건을 정의하는 특수한 트리거 그룹입니다.

상태 트리거는 VisualState의 StateTriggers 컬렉션에 추가됩니다. 이 컬렉션은 단일 상태 트리거 또는 여러 상태 트리거를 포함할 수 있습니다. 컬렉션의 상태 트리거가 활성 상태인 경우 VisualState가 적용됩니다.

상태 트리거를 사용하여 시각적 상태를 제어하는 경우 .NET MAUI는 다음 우선 순위 규칙을 사용하여 활성 상태인 트리거(및 해당 VisualState)를 결정합니다.

StateTriggerBase에서 파생되는 모든 트리거.
MinWindowWidth 조건을 충족하여 활성화되는 AdaptiveTrigger.
MinWindowHeight 조건을 충족하여 활성화되는 AdaptiveTrigger.

여러 트리거가 동시에 활성화된 경우(예: 두 개의 사용자 지정 트리거) 태그에 선언된 첫 번째 트리거가 우선적으로 적용됩니다.

참고 항목

상태 트리거는 Style에서 설정하거나 요소에서 직접 설정할 수 있습니다.

시각적 상태에 대한 자세한 내용은 시각적 상태를 참조 하세요.

상태 트리거

StateTriggerBase 클래스에서 파생되는 StateTrigger 클래스에는 IsActive 바인딩 가능한 속성이 있습니다. StateTrigger는 IsActive 속성 값이 변경될 때 VisualState 변경을 트리거합니다.

모든 상태 트리거의 기본 클래스인 StateTriggerBase 클래스에는 IsActive 속성 및 IsActiveChanged 이벤트가 있습니다. 이 이벤트는 VisualState가 변경될 때마다 발생합니다. 또한 StateTriggerBase 클래스에는 재정의 가능한 OnAttached 및 OnDetached 메서드가 있습니다.

Important

StateTrigger.IsActive 바인딩 가능한 속성은 상속된 StateTriggerBase.IsActive 속성을 숨깁니다.

다음 XAML 예제에서는 StateTrigger 개체를 포함하는 Style을 보여 줍니다.

<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의 배경색은 흰색이 됩니다.

또한 변경이 발생할 IsActiveChanged 때마다 VisualState 해당 이벤트가 VisualState 발생합니다. 각 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}");
}

이 예제에서는 이벤트에 대한 IsActiveChanged 처리기가 발생하면 처리기가 활성 상태인지 여부를 VisualState 출력합니다. 예를 들어 Checked 시각적 개체 상태에서 Unchecked 시각적 개체 상태로 변경되면 다음 메시지가 콘솔 창에 출력됩니다.

Checked state active: False
Unchecked state active: True

참고 항목

사용자 지정 상태 트리거는 StateTriggerBase 클래스에서 파생되고 필요한 등록 및 정리를 수행하도록 OnAttached 및 OnDetached 메서드를 재정의하여 만들 수 있습니다.

적응 트리거

AdaptiveTrigger는 창이 지정된 높이 또는 너비가 되면 VisualState 변경을 트리거합니다. 이 트리거에는 두 개의 바인딩 가능한 속성이 있습니다.

MinWindowHeight - VisualState가 적용되어야 하는 최소 창 높이를 나타내며 double 형식입니다.
MinWindowWidth - VisualState가 적용되어야 하는 최소 창 너비를 나타내며 double 형식입니다.

참고 항목

AdaptiveTrigger는 StateTriggerBase 클래스에서 파생되므로 이벤트 처리기를 IsActiveChanged 이벤트에 연결할 수 있습니다.

다음 XAML 예제에서는 AdaptiveTrigger 개체를 포함하는 Style을 보여 줍니다.

<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 디바이스 독립적 단위 사이인 경우 Style에 적용되는 StackLayout 개체는 세로 방향입니다. 창 너비가 >= 800 디바이스 독립적 단위 VisualState 이면 변경 내용이 트리거되고 방향이 StackLayout 가로로 변경됩니다.

MinWindowHeight 및 MinWindowWidth 속성은 독립적으로 또는 함께 사용할 수 있습니다. 다음 XAML은 두 속성을 설정하는 예제입니다.

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

이 예제 AdaptiveTrigger 에서는 현재 창 너비가 = 800 디바이스 독립적 단위이고 >현재 창 높이가 = 1200 디바이스 독립적 단위일 >때 해당 VisualState 창이 적용됨을 나타냅니다.

상태 트리거 비교

CompareStateTrigger는 속성이 특정 값과 같을 때 VisualState 변경을 트리거합니다. 이 트리거에는 두 개의 바인딩 가능한 속성이 있습니다.

Property - 트리거와 비교되는 속성을 나타내며 object 형식입니다.
Value - VisualState가 적용되어야 하는 값을 나타내며 object 형식입니다.

참고 항목

CompareStateTrigger는 StateTriggerBase 클래스에서 파생되므로 이벤트 처리기를 IsActiveChanged 이벤트에 연결할 수 있습니다.

다음 XAML 예제에서는 CompareStateTrigger 개체를 포함하는 Style을 보여 줍니다.

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

이 예제에서 암시적 Style은 Grid 개체를 대상으로 지정합니다. CheckBox의 IsChecked 속성이 false일 경우 Grid의 배경색은 흰색으로 설정됩니다. 속성이 CheckBox.IsChecked 되면 trueVisualState 변경 내용이 트리거되고 배경색이 Grid 검은색이 됩니다.

디바이스 상태 트리거

DeviceStateTrigger는 앱이 실행되는 디바이스 플랫폼에 따라 VisualState 변경을 트리거합니다. 이 트리거에는 바인딩 가능한 속성이 하나 있습니다.

Device - VisualState가 적용되어야 하는 디바이스 플랫폼을 나타내며 string 형식입니다.

참고 항목

DeviceStateTrigger는 StateTriggerBase 클래스에서 파생되므로 이벤트 처리기를 IsActiveChanged 이벤트에 연결할 수 있습니다.

다음 XAML 예제에서는 DeviceStateTrigger 개체를 포함하는 Style을 보여 줍니다.

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

이 예제에서 명시적 Style은 ContentPage 개체를 대상으로 지정합니다. ContentPage 스타일을 사용하는 개체는 iOS에서 배경색을 은색으로 설정하고 Android에서는 옅은 파란색으로 설정합니다.

방향 상태 트리거

OrientationStateTrigger는 디바이스의 방향이 전환될 때 VisualState 변경을 트리거합니다. 이 트리거에는 바인딩 가능한 속성이 하나 있습니다.

Orientation - VisualState가 적용되어야 하는 방향을 나타내며 DisplayOrientation 형식입니다.

참고 항목

OrientationStateTrigger는 StateTriggerBase 클래스에서 파생되므로 이벤트 처리기를 IsActiveChanged 이벤트에 연결할 수 있습니다.

다음 XAML 예제에서는 OrientationStateTrigger 개체를 포함하는 Style을 보여 줍니다.

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

이 예제에서 명시적 Style은 ContentPage 개체를 대상으로 지정합니다. 이 스타일을 사용하는 ContentPage 개체는 방향이 세로일 때는 배경색을 은색으로 설정하고 방향이 가로일 때는 배경색을 흰색으로 설정합니다.

다음을 통해 공유

트리거

속성 트리거

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

데이터 트리거

이벤트 트리거

다중 트리거

EnterActions 및 ExitActions

상태 트리거

상태 트리거

적응 트리거

상태 트리거 비교

디바이스 상태 트리거

방향 상태 트리거

피드백

추가 리소스