Trigger

Durchsuchen Sie das Beispiel

Mit .NET Multi-platform App UI (.NET MAUI)-Triggern können Sie Aktionen erklärned in XAML ausdrücken, die die Darstellung von Steuerelementen basierend auf Ereignissen oder Eigenschaftenänderungen ändern. Darüber hinaus definieren Zustandstrigger, eine spezielle Gruppe von Triggern, wann ein VisualState angewendet werden muss.

Sie können einen Auslöser direkt der Steuerelemente Triggers Sammlung zuweisen oder ihn einem Ressourcenverzeichnis auf Seiten- oder Anwendungsebene hinzufügen, damit er auf mehrere Steuerelemente angewendet werden kann.

Eigenschaftstrigger

Trigger stellt einen Trigger dar, der Eigenschaftswerte anwendet oder Aktionen ausführt, wenn die angegebene Eigenschaft eine angegebene Bedingung erfüllt.

In diesem Beispiel wird ein Trigger veranschaulicht, der eine Entry-Hintergrundfarbe ändert, wenn er den Fokus erhält:

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

In der Triggererklärung wird Folgendes angegeben:

• TargetType - der Steuerelementtyp, für den der Trigger gilt.
• Property - die Eigenschaft des Steuerelements, das überwacht wird.
• Value - der Wert, der die Aktivierung des Triggers auslöst, wenn er bei der überwachten Eigenschaft auftritt.
• Setter - eine Sammlung von Setter-Elementen, die angewendet werden, wenn die Triggerbedingung erfüllt ist.

Darüber hinaus können optional EnterActions und ExitActions Auflistungen angegeben werden. Weitere Informationen finden Sie unter EnterActions und ExitActions.

Anwenden eines Triggers mithilfe einer Formatvorlage

Trigger können auch zu einer Style-Deklaration in einem Steuerelement, auf einer Seite oder in ein ResourceDictionary (Ressourcenverzeichnis) einer Anwendung hinzugefügt werden. Im folgenden Beispiel wird eine implizite Formatvorlage für alle Entry Steuerelemente auf der Seite deklariert:

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

Datentrigger

DataTrigger stellt einen Trigger dar, der Eigenschaftswerte anwendet oder Aktionen ausführt, wenn die gebundenen Daten eine angegebene Bedingung erfüllen. Die Binding Markup-Erweiterung wird verwendet, um die angegebene Bedingung zu überwachen.

Im folgenden Beispiel wird ein DataTrigger gezeigt, das ein Button deaktiviert, wenn Entry leer ist:

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

In diesem Beispiel, wenn die Länge von Entry null ist, wird der Trigger aktiviert.

Tipp

Geben Sie bei der Auswertung von Path=Text.Length immer einen Standardwert für die Zieleigenschaft an (z. B. Text=""), da sie sonst null lautet und der Auslöser nicht so funktioniert, wie Sie es erwarten.

Darüber hinaus können optional EnterActions und ExitActions Auflistungen angegeben werden. Weitere Informationen finden Sie unter EnterActions und ExitActions.

Ereignistrigger

Die EventTrigger stellt einen Trigger dar, der eine Reihe von Aktionen als Reaktion auf ein Ereignis anwendet. Im Gegensatz zu Trigger, EventTrigger hat kein Konzept zum Beenden des Zustands, sodass die Aktionen nicht rückgängig gemacht werden, sobald die Bedingung, die das Ereignis ausgelöst hat, nicht mehr zutrifft.

Für EventTrigger muss nur eine Event Eigenschaft festgelegt werden:

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

In diesem Beispiel gibt es zwei Setter Elemente. Stattdessen gibt es ein NumericalValidationTriggerAction Objekt.

Hinweis

Die Ereignisauslöser unterstützen weder EnterActions noch ExitActions.

Die Implementierung einer Triggeraktion muss:

• Die generische TriggerAction<T>-Klasse mit dem generischen Parameter implementieren, der dem Typ des Steuerelements entspricht, auf das der Trigger angewendet wird. Sie können Klassen wie VisualElement verwenden, um Triggeraktionen zu schreiben, die für eine Vielzahl von Steuerelementen funktionieren, oder ein Steuerelementtyp wie Entry.
• Überschreiben Sie die Invoke -Methode. Diese Methode wird immer aufgerufen, wenn das Triggerereignis auftrittt.
• Stellen Sie optional Eigenschaften bereit, die in XAML festgelegt werden können, wenn der Auslöser deklariert wird.

Im folgenden Beispiel wird die NumericValidationTriggerAction Klasse gezeigt:

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

Warnung

Seien Sie vorsichtig beim Freigeben von Triggern in einem ResourceDictionary. Eine Instanz wird unter mehreren Steuerelementen geteilt, sodass jeder Zustand, der einmal konfiguriert wird, auf alle angewendet wird.

Multi-Trigger

Die MultiTrigger stellt einen Trigger dar, der Eigenschaftswerte anwendet oder Aktionen ausführt, wenn Bedingungen erfüllt sind. Alle Bedingungen müssen erfüllt werden, bevor Setter Objekte angewendet werden.

Das folgende Beispiel zeigt ein MultiTrigger, gebunden an zwei Entry Objekte:

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

Darüber hinaus kann die MultiTrigger.Conditions-Auflistung auch PropertyCondition Objekte enthalten:

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

EnterActions und ExitActions

Eine weitere Möglichkeit, um Änderungen zu implementieren, wenn ein Trigger auftritt, ist es, EnterActions und ExitActions Sammlungen festzulegen und TriggerAction<T> Implementierungen zu erstellen.

Die EnterActions Sammlung, vom Typ IList<TriggerAction>, definiert eine Sammlung, die aufgerufen wird, wenn die Triggerbedingung erfüllt ist. Die ExitActions Sammlung, vom Typ IList<TriggerAction>, definiert eine Sammlung, die aufgerufen wird, wenn die Triggerbedingung nicht mehr erfüllt ist.

Hinweis

Die in den Sammlungen EnterActions und ExitActions definierten Objekte TriggerAction werden von der Klasse EventTrigger ignoriert.

Das folgende Beispiel zeigt einen Eigenschaftsauslöser, der eine EnterAction und eine ExitAction festlegt:

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

Die Implementierung einer Triggeraktion muss:

• Die generische TriggerAction<T>-Klasse mit dem generischen Parameter implementieren, der dem Typ des Steuerelements entspricht, auf das der Trigger angewendet wird. Sie können Klassen wie VisualElement verwenden, um Triggeraktionen zu schreiben, die für eine Vielzahl von Steuerelementen funktionieren, oder ein Steuerelementtyp wie Entry.
• Überschreiben Sie die Invoke -Methode. Diese Methode wird immer aufgerufen, wenn das Triggerereignis auftrittt.
• Stellen Sie optional Eigenschaften bereit, die in XAML festgelegt werden können, wenn der Auslöser deklariert wird.

Im folgenden Beispiel wird die FadeTriggerAction Klasse gezeigt:

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

Hinweis

Sie können EnterActions und ExitActions sowie Setter Objekte in einem Trigger bereitstellen, aber beachten Sie, dass die Setter Objekte sofort aufgerufen werden (sie warten nicht darauf, dass die EnterAction oder ExitAction abgeschlossen sind).

Zustandstrigger

Zustandstrigger sind spezialisierte Trigger, die die Bedingungen definieren, bei denen VisualState angewendet werden muss.

Zustandstrigger werden der Sammlung StateTriggers eines VisualState hinzugefügt. Diese Sammlung kann Trigger mit einem oder mehreren Zustandstriggern enthalten. Ein VisualState wird angewendet, wenn alle Zustandstrigger in der Sammlung aktiv sind.

Bei Verwendung von Zustandstriggern zur Steuerung visueller Zustände verwendet .NET MAUI die folgenden Prioritätsregeln, um zu bestimmen, welcher Trigger (und welches entsprechende VisualState) aktiv ist:

1. Alle von StateTriggerBase abgeleiteten Trigger.
2. Ein AdaptiveTrigger, der aktiviert wird, da die Bedingung MinWindowWidth erfüllt ist.
3. Ein AdaptiveTrigger, der aktiviert wird, da die Bedingung MinWindowHeight erfüllt ist.

Wenn mehrere Trigger gleichzeitig aktiv sind (z. B. zwei benutzerdefinierte Trigger), hat der erste im Markup deklarierte Trigger Vorrang.

Hinweis

Zustandstrigger können in einem Style oder direkt für Elemente festgelegt werden.

Weitere Informationen zu visuellen Zuständen finden Sie unter Visuelle Zustände.

Zustandstrigger

Die Klasse StateTrigger, die von der Klasse StateTriggerBase abgeleitet ist, hat die bindbare Eigenschaft IsActive. Ein StateTrigger löst eine VisualState-Änderung aus, wenn die IsActive-Eigenschaft ihren Wert ändert.

Die Klasse StateTriggerBase, die die Basisklasse für alle Zustandstrigger ist, hat die Eigenschaft IsActive und das Ereignis IsActiveChanged. Dieses Ereignis wird immer dann ausgelöst, wenn eine VisualState-Änderung eintritt. Außerdem enthält die StateTriggerBase-Klasse überschreibbare OnAttached- und OnDetached-Methoden.

Wichtig

Die bindbare Eigenschaft StateTrigger.IsActive blendet die geerbte Eigenschaft StateTriggerBase.IsActive aus.

Im folgenden XAML-Beispiel wird ein Style mit StateTrigger-Objekten veranschaulicht:

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

Bei diesem Beispiel gilt der implizite Style für Grid-Objekte. Wenn die IsToggled-Eigenschaft des gebundenen Objekts true ist, wird die Hintergrundfarbe von Grid auf schwarz festgelegt. Wenn die IsToggled-Eigenschaft des gebundenen Objekts false wird, wird eine VisualState-Änderung ausgelöst, und die Hintergrundfarbe von Grid wird weiß.

Außerdem wird jedes Mal, wenn eine VisualState Änderung auftritt, das IsActiveChanged Ereignis für VisualState ausgelöst. Jeder VisualState registriert einen Ereignishandler für dieses Ereignis:

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

Wenn in diesem Beispiel ein Handler für das IsActiveChanged Ereignis ausgelöst wird, gibt der Handler aus, ob das Ereignis VisualState aktiv ist oder nicht. Beispielsweise werden die folgenden Meldungen im Konsolenfenster ausgegeben, wenn vom visuellen Zustand Checked zum visuellen Zustand Unchecked gewechselt wird:

Checked state active: False
Unchecked state active: True

Hinweis

Benutzerdefinierte Zustandstrigger können erstellt werden, indem von der StateTriggerBase-Klasse abgeleitet wird und die OnAttached- und OnDetached-Methoden überschrieben werden, damit alle erforderlichen Registrierungen und Bereinigungen angewendet werden.

Adaptive Trigger

Ein AdaptiveTrigger löst eine VisualState-Änderung aus, wenn das Fenster eine bestimmte Höhe oder Breite hat. Dieser Trigger hat zwei bindbare Eigenschaften:

• MinWindowHeight mit Typ double, der die Mindestfensterhöhe angibt, bei der VisualState angewendet werden soll.
• MinWindowWidth mit Typ double, der die Mindestfensterbreite angibt, bei der VisualState angewendet werden soll.

Bemerkung

AdaptiveTrigger ist von der Klasse StateTriggerBase abgeleitet und kann daher einen Ereignishandler an das Ereignis IsActiveChanged anfügen.

Im folgenden XAML-Beispiel wird ein Style mit AdaptiveTrigger-Objekten veranschaulicht:

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

Bei diesem Beispiel gilt der implizite Style für StackLayout-Objekte. Wenn die Fensterbreite im Bereich von 0 bis 800 geräteunabhängigen Einheiten liegt, haben StackLayout-Objekte, für die der Style gilt, eine vertikale Ausrichtung. Beträgt die Fensterbreite >= 800 geräteunabhängige Einheiten, wird die Änderung VisualState ausgelöst, und die Ausrichtung StackLayout ändert sich auf horizontal.

Die Eigenschaften MinWindowHeight und MinWindowWidth können unabhängig oder in Verbindung miteinander verwendet werden. Die folgende XAML zeigt ein Beispiel der Festlegung beider Eigenschaften:

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

In diesem Beispiel gibt AdaptiveTrigger an, dass das entsprechende VisualState angewendet wird, wenn die aktuelle Fensterbreite >= 800 geräteunabhängige Einheiten und die aktuelle Fensterhöhe >= 1200 geräteunabhängige Einheiten beträgt.

Zustandsvergleichstrigger

Der CompareStateTrigger löst eine VisualState-Änderung aus, wenn eine Eigenschaft gleich einem bestimmten Wert ist. Dieser Trigger hat zwei bindbare Eigenschaften:

• Property mit Typ object, der die Eigenschaft angibt, die vom Trigger verglichen wird.
• Value mit Typ object, der den Wert angibt, bei dem VisualState angewendet werden soll.

Hinweis

CompareStateTrigger ist von der Klasse StateTriggerBase abgeleitet und kann daher einen Ereignishandler an das Ereignis IsActiveChanged anfügen.

Im folgenden XAML-Beispiel wird ein Style mit CompareStateTrigger-Objekten veranschaulicht:

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

Bei diesem Beispiel gilt der implizite Style für Grid-Objekte. Wenn die IsChecked-Eigenschaft von CheckBox auf false festgelegt ist, wird die Hintergrundfarbe von Grid auf weiß festgelegt. Wenn die CheckBox.IsChecked Eigenschaft true wird, wird eine VisualState Änderung ausgelöst, und die Hintergrundfarbe von Grid wird schwarz:

Gerätezustandstrigger

Der DeviceStateTrigger löst eine VisualState-Änderung aus, die auf der Geräteplattform basiert, auf der die Anwendung ausgeführt wird. Dieser Trigger hat eine einzelne bindbare Eigenschaft:

• Device mit Typ string, der die Geräteplattform angibt, auf der VisualState angewendet werden soll.

Hinweis

DeviceStateTrigger ist von der Klasse StateTriggerBase abgeleitet und kann daher einen Ereignishandler an das Ereignis IsActiveChanged anfügen.

Im folgenden XAML-Beispiel wird ein Style mit DeviceStateTrigger-Objekten veranschaulicht:

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

Bei diesem Beispiel gilt der explizite Style für ContentPage-Objekte. ContentPage Objekte mit diesem Stil legen ihre Hintergrundfarbe unter iOS auf silber und unter Android auf hellblau fest.

Ausrichtungszustandstrigger

Der OrientationStateTrigger löst eine VisualState-Änderung aus, wenn sich die Ausrichtung des Geräts ändert. Dieser Trigger hat eine einzelne bindbare Eigenschaft:

• Orientation mit Typ DisplayOrientation, der die Ausrichtung angibt, auf die VisualState angewendet werden soll.

Hinweis

OrientationStateTrigger ist von der Klasse StateTriggerBase abgeleitet und kann daher einen Ereignishandler an das Ereignis IsActiveChanged anfügen.

Im folgenden XAML-Beispiel wird ein Style mit OrientationStateTrigger-Objekten veranschaulicht:

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

Bei diesem Beispiel gilt der explizite Style für ContentPage-Objekte. ContentPage Objekte mit dem Stil legen ihre Hintergrundfarbe auf silber fest, wenn die Ausrichtung Hochformat ist. Sie legen ihre Hintergrundfarbe auf weiß fest, wenn die Ausrichtung Querformat ist.