Spouštěče

Článek
11/11/2023

Triggery .NET Multi-Platform App UI (.NET MAUI) umožňují deklarativní vyjádření akcí v XAML, které mění vzhled ovládacích prvků na základě událostí nebo změn dat. Kromě toho aktivační události stavu, které jsou specializovanou skupinou triggerů, definují, kdy VisualState se má použít.

Trigger můžete přiřadit přímo ke kolekci ovládacího prvku Triggers nebo ho přidat do slovníku prostředků na úrovni stránky nebo aplikace, který se použije pro více ovládacích prvků.

Triggery vlastností

A Trigger představuje trigger, který použije hodnoty vlastností nebo provádí akce, když zadaná vlastnost splňuje zadanou podmínku.

Následující příklad ukazuje Trigger , že změní Entry barvu pozadí, když dostane fokus:

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

Deklarace triggeru určuje následující:

TargetType – typ ovládacího prvku, na který se aktivační událost vztahuje.
Property - vlastnost ovládacího prvku, který je monitorován.
Value – hodnota, pokud dojde k monitorované vlastnosti, která způsobí aktivaci triggeru.
Setter – kolekce Setter prvků, které se použijí při splnění podmínky triggeru.

Kromě toho je možné zadat volitelné EnterActions a ExitActions kolekce. Další informace naleznete v tématu EnterActions a ExitActions.

Použití triggeru pomocí stylu

Triggery lze také přidat do Style deklarace ovládacího prvku, na stránce nebo v aplikaci ResourceDictionary. Následující příklad deklaruje implicitní styl pro všechny Entry ovládací prvky na stránce:

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

Triggery dat

A DataTrigger představuje trigger, který použije hodnoty vlastností nebo provede akce, když svázaná data splňují zadanou podmínku. Rozšíření Binding značek se používá k monitorování zadané podmínky.

Následující příklad ukazuje DataTrigger , který zakáže Button , když Entry je prázdný:

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

Pokud je v tomto příkladu délka Entry nuly, aktivuje se aktivační událost.

Tip

Při vyhodnocování Path=Text.Length vždy zadejte výchozí hodnotu pro cílovou vlastnost (např. Text=""), protože jinak bude null a trigger nebude fungovat tak, jak očekáváte.

Kromě toho je možné zadat volitelné EnterActions a ExitActions kolekce. Další informace naleznete v tématu EnterActions a ExitActions.

Aktivační události

Představuje EventTrigger trigger, který použije sadu akcí v reakci na událost. Na rozdíl od Triggerfunkce nemá EventTrigger žádný koncept ukončení stavu, takže akce nebudou vráceny, jakmile podmínka, která vyvolala událost, již není pravdivá.

Pouze EventTrigger vyžaduje, aby byla nastavena Event vlastnost:

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

V tomto příkladu nejsou žádné Setter prvky. Místo toho je NumericalValidationTriggerAction objekt.

Poznámka:

Triggery událostí nepodporují EnterActions a ExitActions.

Implementace akce triggeru musí:

Implementujte obecnou TriggerAction<T> třídu s obecným parametrem odpovídajícím typu ovládacího prvku, na který se aktivační událost použije. Můžete použít třídy, například VisualElement k zápisu aktivačních akcí, které pracují s různými ovládacími prvky, nebo určit typ ovládacího prvku, jako Entryje .
Přepište metodu Invoke . Tato metoda se volá vždy, když dojde k události triggeru.
Volitelně zpřístupňujte vlastnosti, které lze nastavit v JAZYCE XAML při deklaraci triggeru.

Následující příklad ukazuje NumericValidationTriggerAction třídu:

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

Upozorňující

Při sdílení triggerů v objektu ResourceDictionary. Jedna instance se bude sdílet mezi ovládacími prvky, takže všechny stavy, které jsou nakonfigurované jednou, budou platit pro všechny.

Více aktivačních událostí

A MultiTrigger představuje trigger, který použije hodnoty vlastností nebo provádí akce, když jsou splněny sady podmínek. Před uplatněním Setter objektů musí být splněny všechny podmínky.

Následující příklad ukazuje MultiTrigger , že se sváže se dvěma Entry objekty:

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

Kromě toho MultiTrigger.Conditions může kolekce obsahovat PropertyCondition také objekty:

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

EnterActions a ExitActions

Alternativním přístupem k implementaci změn při výskytu triggeru je určením EnterActions a ExitActions kolekcemi a vytvářením TriggerAction<T> implementací.

Kolekce EnterActions typu IList<TriggerAction>definuje kolekci, která se vyvolá při splnění podmínky triggeru. Kolekce ExitActions typu IList<TriggerAction>definuje kolekci, která se vyvolá po splnění podmínky triggeru.

Poznámka:

Objekty TriggerAction definované v kolekcích EnterActions a ExitActions třídy jsou ignorovány EventTrigger .

Následující příklad ukazuje aktivační událost vlastnosti, která určuje EnterAction a ExitAction:

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

Implementace akce triggeru musí:

Implementujte obecnou TriggerAction<T> třídu s obecným parametrem odpovídajícím typu ovládacího prvku, na který se aktivační událost použije. Můžete použít třídy, například VisualElement k zápisu aktivačních akcí, které pracují s různými ovládacími prvky, nebo určit typ ovládacího prvku, jako Entryje .
Přepište metodu Invoke . Tato metoda se volá vždy, když dojde k události triggeru.
Volitelně zpřístupňujte vlastnosti, které lze nastavit v JAZYCE XAML při deklaraci triggeru.

Následující příklad ukazuje FadeTriggerAction třídu:

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

Poznámka:

V triggeru můžete zadat EnterActions objekty a ExitActions také Setter objekty, ale mějte na paměti, že Setter se objekty volají okamžitě (nečekají na dokončení EnterAction nebo ExitAction dokončení).

Aktivační události stavu

Aktivační události stavu jsou specializovanou skupinou triggerů, které definují podmínky, za kterých VisualState se má použít.

Aktivační události stavu se přidají do StateTriggers kolekce objektu VisualState. Tato kolekce může obsahovat jednu aktivační událost stavu nebo více aktivačních událostí stavu. A VisualState se použije, když jsou aktivní všechny aktivační události stavu v kolekci.

Při použití aktivačních událostí stavu k řízení vizuálních stavů používá .NET MAUI následující pravidla priority k určení, která aktivační událost (a odpovídající VisualState) bude aktivní:

Jakákoli aktivační událost, která je odvozena od StateTriggerBase.
Aktivované AdaptiveTrigger z důvodu MinWindowWidth splnění podmínky.
Aktivované AdaptiveTrigger z důvodu MinWindowHeight splnění podmínky.

Pokud je více aktivačních událostí současně aktivních (například dva vlastní triggery), má přednost první aktivační událost deklarovaná v kódu.

Poznámka:

Aktivační události stavu lze nastavit v objektu Stylenebo přímo na elementy.

Další informace o stavech vizuálů najdete v tématu Stavy vizuálů.

Aktivační událost stavu

Třída StateTrigger , která je odvozena z StateTriggerBase třídy, má IsActive bindable vlastnost. A StateTrigger aktivuje VisualState změnu při IsActive změně hodnoty vlastnosti.

Třída StateTriggerBase , která je základní třídou pro všechny aktivační události stavu, má IsActive vlastnost a IsActiveChanged událost. Tato událost se aktivuje při každé VisualState změně. Kromě toho třída StateTriggerBase má přepsání OnAttached a OnDetached metody.

Důležité

Vlastnost StateTrigger.IsActive bindable skryje zděděnou StateTriggerBase.IsActive vlastnost.

Následující příklad XAML ukazuje Style , že obsahuje StateTrigger objekty:

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

V tomto příkladu implicitní Style cíle Grid objekty. IsToggled Pokud je truevlastnost vázaného objektu , barva pozadí objektu Grid je nastavena na černou. Když se IsToggled vlastnost vázaného objektu stane false, VisualState aktivuje se změna a barva pozadí se změní na bílou Grid .

Kromě toho při každé VisualState změně dojde k IsActiveChanged vyvolání události VisualState . Každá VisualState zaregistruje obslužnou rutinu události pro tuto událost:

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

V tomto příkladu, když je vyvolána obslužná rutina události IsActiveChanged , obslužná rutina zobrazí výstup, zda VisualState je aktivní, nebo ne. Například následující zprávy jsou výstupem okna konzoly při změně ze stavu vizuálu Checked na stav vizuálu Unchecked :

Checked state active: False
Unchecked state active: True

Poznámka:

Aktivační události vlastního StateTriggerBase stavu lze vytvořit odvozením z třídy a přepsáním OnAttached metod a OnDetached provedením požadovaných registrací a vyčištěním.

Adaptivní trigger

Když AdaptiveTrigger je okno zadanou výškou VisualState nebo šířkou, aktivuje se změna. Tento trigger má dvě vlastnosti s možností vytvoření vazby:

MinWindowHeight, typu double, který označuje minimální výšku okna, na kterou VisualState se má použít.
MinWindowWidth, typu double, který označuje minimální šířku okna, pro kterou VisualState se má použít.

Poznámka:

Odvozena AdaptiveTrigger z StateTriggerBase třídy a proto může připojit obslužnou rutinu události k IsActiveChanged události.

Následující příklad XAML ukazuje Style , že obsahuje AdaptiveTrigger objekty:

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

V tomto příkladu implicitní Style cíle StackLayout objekty. Pokud je šířka okna v rozmezí 0 až 800 jednotek nezávislých na zařízení, objekty, na které Style se použije, StackLayout budou mít svislou orientaci. Pokud je >šířka okna = 800 jednotek nezávislých na zařízení, VisualState aktivuje se změna a StackLayout orientace se změní na vodorovnou.

MinWindowWidth Vlastnosti MinWindowHeight lze použít nezávisle nebo ve spojení s ostatními. Následující XAML ukazuje příklad nastavení obou vlastností:

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

V tomto příkladu AdaptiveTrigger označuje, že odpovídající VisualState se použije, když je aktuální šířka >okna = 800 jednotek nezávislých na zařízení a aktuální výška okna je >= 1200 jednotek nezávislých na zařízení.

Porovnat aktivační událost stavu

VisualState Aktivuje CompareStateTrigger změnu, pokud je vlastnost rovna určité hodnotě. Tento trigger má dvě vlastnosti s možností vytvoření vazby:

Property, typu object, který označuje vlastnost porovnávanou triggerem.
Value, typu object, který označuje hodnotu, pro kterou VisualState se má použít.

Poznámka:

Odvozena CompareStateTrigger z StateTriggerBase třídy a proto může připojit obslužnou rutinu události k IsActiveChanged události.

Následující příklad XAML ukazuje Style , že obsahuje CompareStateTrigger objekty:

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

V tomto příkladu implicitní Style cíle Grid objekty. Pokud je IsCheckedfalsevlastnost CheckBox je , barva Grid pozadí je nastavena na bílou. Když se CheckBox.IsChecked vlastnost změní true, VisualState aktivuje se změna a barva pozadí se změní na Grid černou.

Trigger stavu zařízení

VisualState Aktivuje DeviceStateTrigger změnu na základě platformy zařízení, na které je aplikace spuštěná. Tento trigger má jednu vlastnost s možností vytvoření vazby:

Device, typu string, který označuje platformu zařízení, na které VisualState se má použít.

Poznámka:

Odvozena DeviceStateTrigger z StateTriggerBase třídy a proto může připojit obslužnou rutinu události k IsActiveChanged události.

Následující příklad XAML ukazuje Style , že obsahuje DeviceStateTrigger objekty:

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

V tomto příkladu explicitní Style cíle ContentPage objekty. ContentPage objekty, které využívají styl, nastavují barvu pozadí na stříbro v iOSu a bledě modré na Androidu.

Aktivační událost stavu orientace

Když OrientationStateTrigger se změní orientace zařízení, aktivuje VisualState se změna. Tento trigger má jednu vlastnost s možností vytvoření vazby:

Orientation, typu DisplayOrientation, který označuje orientaci, na kterou VisualState se má použít.

Poznámka:

Odvozena OrientationStateTrigger z StateTriggerBase třídy a proto může připojit obslužnou rutinu události k IsActiveChanged události.

Následující příklad XAML ukazuje Style , že obsahuje OrientationStateTrigger objekty:

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

V tomto příkladu explicitní Style cíle ContentPage objekty. ContentPage objekty, které využívají styl, nastaví barvu pozadí na stříbro, když je orientace na výšku, a nastaví barvu pozadí na bílou, když je orientace na šířku.

Sdílet prostřednictvím

Spouštěče

Triggery vlastností

Použití triggeru pomocí stylu

Triggery dat

Aktivační události

Více aktivačních událostí

EnterActions a ExitActions

Aktivační události stavu

Aktivační událost stavu

Adaptivní trigger

Porovnat aktivační událost stavu

Trigger stavu zařízení

Aktivační událost stavu orientace

Váš názor

Další materiály