Aktivační události

Článek
08/05/2022
9 min ke čtení

Triggery .NET Multi-Platform App UI (.NET MAUI) umožňují vyjádřit akce deklarativním způsobem 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.

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

Triggery vlastností

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

Následující příklad ukazuje Trigger , že při příjmu fokusu Entry změní barvu pozadí:

<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 kolekce a ExitActions kolekce. Další informace najdete v tématu EnterActions a ExitActions.

Použití triggeru pomocí stylu

Aktivační události lze také přidat do Style deklarace ovládacího prvku, na stránce nebo 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í pro zadanou podmínku.

Následující příklad ukazuje DataTrigger , že 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>

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

Tip

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

Kromě toho je možné zadat volitelné EnterActions kolekce a ExitActions kolekce. Další informace najdete 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 Trigger, EventTrigger nemá žádný koncept ukončení stavu, takže akce nebudou vráceny, jakmile podmínka, která vyvolala událost již není pravdivá.

Je EventTrigger nutné Event nastavit pouze 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 třídu s obecným TriggerAction<T> parametrem odpovídajícím typu ovládacího prvku, na který se aktivační událost použije. Třídy, jako VisualElement je například zápis aktivačních akcí, které pracují s různými ovládacími prvky, nebo určit typ ovládacího prvku, jako je Entry.
Přepište metodu Invoke . Tato metoda se volá vždy, když dojde k události triggeru.
Volitelně můžete vystavit vlastnosti, které lze nastavit v 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;
    }
}

Upozornění

Buďte opatrní při sdílení triggerů v objektu ResourceDictionary. Jedna instance bude sdílena mezi ovládacími prvky, takže jakýkoli stav, který je nakonfigurovaný jednou, bude platit pro všechny.

Multi-triggery

A MultiTrigger představuje aktivační událost, která použije hodnoty vlastností nebo provede akce, pokud 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>

Kolekce MultiTrigger.Conditions navíc může 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í EnterActions a ExitActions shromažďování a vytváření 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 a :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>

Implementace akce triggeru musí:

Implementujte obecnou třídu s obecným TriggerAction<T> parametrem odpovídajícím typu ovládacího prvku, na který se aktivační událost použije. Třídy, jako VisualElement je například zápis aktivačních akcí, které pracují s různými ovládacími prvky, nebo určit typ ovládacího prvku, jako je Entry.
Přepište metodu Invoke . Tato metoda se volá vždy, když dojde k události triggeru.
Volitelně můžete vystavit vlastnosti, které lze nastavit v 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 ExitActionsSetter také objekty, ale mějte na paměti, že Setter se objekty volají okamžitě (nečekají EnterAction na dokončení nebo ExitAction dokončení).

Triggery stavu

Triggery stavu jsou specializovaná skupina 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 aktivační událost jednoho stavu nebo více aktivačních událostí stavu. A VisualState se použije, když jsou aktivní všechny triggery stavu v kolekci.

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

Všechny aktivační události, které jsou odvozeny od StateTriggerBase.
Aktivovaný AdaptiveTrigger z důvodu MinWindowWidth splnění podmínky.
Aktivovaný AdaptiveTrigger z důvodu MinWindowHeight splnění podmínky.

Pokud je současně aktivní více aktivačních událostí (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 elementech Stylenebo přímo na prvky.

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 vázání vlastnosti. Když vlastnost změní hodnotu, aktivuje VisualState se StateTrigger změnaIsActive.

Třída StateTriggerBase , která je základní třídou pro všechny triggery stavu, má IsActive vlastnost a IsActiveChanged událost. Tato událost se aktivuje vždy, když VisualState dojde ke 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 změní false, VisualState aktivuje se změna a barva Grid pozadí se změní na bílou.

Kromě toho se událost vyvolá VisualState pokaždé, IsActiveChanged když VisualState dojde ke změně. 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 IsActiveChanged , když je vyvolána obslužná rutina události, obslužná rutina vypíše, 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 všech požadovaných registrací a vyčištění.

Adaptivní trigger

Aktivuje AdaptiveTrigger změnu, když je okno zadanou VisualState výškou nebo šířkou. Tento trigger má dvě vlastnosti s možností vazby:

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

Poznámka

Odvozuje AdaptiveTrigger z StateTriggerBase třídy a proto může k události připojit obslužnou rutinu 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ích, 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í, aktivuje se VisualState změna a StackLayout orientace se změní na vodorovnou.

Vlastnosti MinWindowHeight lze MinWindowWidth 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 bude použita, když aktuální šířka okna je >= 800 jednotek nezávislých na zařízení a aktuální výška okna je >= 1200 jednotek nezávislých na zařízeních.

Porovnání aktivační události stavu

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

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

Poznámka

Odvozuje CompareStateTrigger z StateTriggerBase třídy a proto může k události připojit obslužnou rutinu 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. IsChecked Pokud je vlastnost CheckBox je false, barva Grid pozadí je nastavena na bílou. Když se CheckBox.IsChecked vlastnost změní true, VisualState aktivuje se změna a barva Grid pozadí se změní na černou.

Trigger stavu zařízení

Aktivuje DeviceStateTriggerVisualState změnu na základě platformy zařízení, na které aplikace běží. Tento trigger má jednu vlastnost s možností vazby:

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

Poznámka

Odvozuje DeviceStateTrigger z StateTriggerBase třídy a proto může k události připojit obslužnou rutinu 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 na bledě modrou v Androidu.

Trigger stavu orientace

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

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

Poznámka

Odvozuje OrientationStateTrigger z StateTriggerBase třídy a proto může k události připojit obslužnou rutinu 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.