Xamarin.Forms Aktivační události

Stažení ukázky

Triggery umožňují deklarativní vyjádření akcí v jazyce XAML, které mění vzhled ovládacích prvků na základě událostí nebo změn vlastností. Kromě toho aktivační události stavu, což je specializovaná skupina triggerů, definují, kdy VisualState se má použít.

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

Aktivační události vlastností

Jednoduchý trigger lze vyjádřit čistě v jazyce XAML a přidat prvek do Trigger kolekce aktivačních událostí ovládacího prvku. Tento příklad ukazuje trigger, který změní barvu Entry pozadí, když obdrží fokus:

<Entry Placeholder="enter name">
    <Entry.Triggers>
        <Trigger TargetType="Entry"
                 Property="IsFocused" Value="True">
            <Setter Property="BackgroundColor" Value="Yellow" />
            <!-- multiple Setters elements are allowed -->
        </Trigger>
    </Entry.Triggers>
</Entry>

Důležité části deklarace triggeru jsou:

• TargetType – typ ovládacího prvku, na který se trigger vztahuje.

• Vlastnost – vlastnost ovládacího prvku, který je monitorován.

• Hodnota – hodnota, pokud k ní dojde u monitorované vlastnosti, která způsobí aktivaci triggeru.

• Setter – je možné přidat kolekci prvků a při splnit podmínku triggeru. Musíte zadat a Property , Value které chcete nastavit.

• EnterActions a ExitActions (nezobrazují se) – jsou napsány v kódu a lze je použít kromě (nebo místo) prvků. Jsou popsány níže.

Použití triggeru pomocí stylu

Triggery lze také přidat do Style deklarace ovládacího prvku, na stránce nebo v aplikaci ResourceDictionary . Tento příklad deklaruje implicitní styl (tj. není nastaven), což znamená, že se použije pro všechny ovládací prvky KeyEntry na stránce.

<ContentPage.Resources>
    <ResourceDictionary>
        <Style TargetType="Entry">
                        <Style.Triggers>
                <Trigger TargetType="Entry"
                         Property="IsFocused" Value="True">
                    <Setter Property="BackgroundColor" Value="Yellow" />
                    <!-- multiple Setters elements are allowed -->
                </Trigger>
            </Style.Triggers>
        </Style>
    </ResourceDictionary>
</ContentPage.Resources>

Aktivační události dat

Triggery dat používají datovou vazbu k monitorování jiného ovládacího prvku, aby se Setter y volaly. Místo Property atributu v triggeru vlastnosti nastavte atribut pro Binding monitorování zadané hodnoty.

Následující příklad používá syntaxi datových vazeb.{Binding Source={x:Reference entry}, Path=Text.Length} Což je způsob, jakým odkazujeme na vlastnosti jiného ovládacího prvku. Pokud je délka hodnoty entry nula, trigger se aktivuje. V této ukázce trigger zakáže tlačítko, pokud je vstup prázdný.

<!-- the x:Name is referenced below in DataTrigger-->
<!-- tip: make sure to set the Text="" (or some other default) -->
<Entry x:Name="entry"
       Text=""
       Placeholder="required field" />

<Button x:Name="button" Text="Save"
        FontSize="Large"
        HorizontalOptions="Center">
    <Button.Triggers>
        <DataTrigger TargetType="Button"
                     Binding="{Binding Source={x:Reference entry},
                                       Path=Text.Length}"
                     Value="0">
            <Setter Property="IsEnabled" Value="False" />
            <!-- multiple Setters elements are allowed -->
        </DataTrigger>
    </Button.Triggers>
</Button>

Kromě zadávání můžete Setter také zadat Settera .

Aktivační události

Element EventTrigger vyžaduje pouze Event vlastnost, například v následujícím "Clicked" příkladu.

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

Všimněte si, že neexistují žádné prvky, ale spíše odkaz na třídu definovanou objektem , který vyžaduje deklarování v XAML Setterlocal:NumericValidationTriggerActionxmlns:local stránky:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:WorkingWithTriggers;assembly=WorkingWithTriggers"

Samotná třída implementuje , což znamená, že by měla poskytovat přepsání pro metodu, TriggerActionInvoke která je volána vždy, když dojde k události triggeru.

Implementace akce triggeru by měla:

• 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. Supertřídy, jako například , můžete použít k zápisu aktivačních akcí, které pracují s různými ovládacími VisualElement prvky, nebo zadat typ ovládacího prvku, jako je Entry .

• Přepište Invoke metodu – volá se při každém splnění kritérií triggeru.

• Volitelně můžete zveřejnit vlastnosti, které lze nastavit v XAML při deklarování triggeru. Příklad najdete v třídě v VisualElementPopTriggerAction doprovodné ukázkové aplikaci.

public class NumericValidationTriggerAction : TriggerAction<Entry>
{
    protected override void Invoke (Entry entry)
    {
        double result;
        bool isValid = Double.TryParse (entry.Text, out result);
        entry.TextColor = isValid ? Color.Default : Color.Red;
    }
}

Trigger události je pak možné využívat z XAML:

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

Při sdílení triggerů v objektu buďte opatrní, aby se jedna instance sdílela mezi ovládacími prvky, takže všechny stavy, které jsou nakonfigurované jednou, ResourceDictionary budou platit pro všechny.

Aktivační události nepodporují a jsou EnterActionsExitActionsEnterActions

Více triggerů

Vypadá MultiTrigger podobně jako nebo s tím TriggerDataTrigger rozdílem, že může být více než jedna podmínka. Před aktivací s musí být Setter splněny všechny podmínky.

Tady je příklad triggeru pro tlačítko, které se váže na dva různé vstupy ( a emailphone ):

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

Kolekce Conditions může také obsahovat PropertyCondition prvky, jako je tento:

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

Vytvoření vícenásobné aktivační události Vyžadovat vše

Vícenásobný trigger aktualizuje svůj ovládací prvek pouze v případě, že jsou splněny všechny podmínky. Testování "všech délek polí je nula" (například přihlašovací stránka, kde musí být dokončeny všechny vstupy) je složité, protože chcete podmínku "where Text.Length 0", ale nelze ji vyjádřit > v XAML.

To lze provést pomocí IValueConverter . Níže uvedený kód převaděče transformuje vazbu na , která označuje, jestli je pole prázdné nebo Text.Lengthbool ne:

public class MultiTriggerConverter : IValueConverter
{
    public object Convert(object value, Type targetType,
        object parameter, CultureInfo culture)
    {
        if ((int)value > 0) // length > 0 ?
            return true;            // some data has been entered
        else
            return false;            // input is empty
    }

    public object ConvertBack(object value, Type targetType,
        object parameter, CultureInfo culture)
    {
        throw new NotSupportedException ();
    }
}

Pokud chcete tento převaděč použít ve více aktivačních událostech, přidejte ho nejprve do slovníku prostředků stránky (společně s definicí xmlns:local vlastního oboru názvů):

<ResourceDictionary>
   <local:MultiTriggerConverter x:Key="dataHasBeenEntered" />
</ResourceDictionary>

Kód XAML je zobrazený níže. Všimněte si následujících rozdílů oproti prvnímu příkladu s více aktivačními událostmi:

• Tlačítko je IsEnabled="false" ve výchozím nastavení nastavené.
• Podmínky s více aktivačními událostmi používají převaděč k Text.Length převodu hodnoty na boolean .
• Pokud jsou všechny podmínky true , setter vytvoří vlastnost IsEnabled tlačítka true .

<Entry x:Name="user" Text="" Placeholder="user name" />

<Entry x:Name="pwd" Text="" Placeholder="password" />

<Button x:Name="loginButton" Text="Login"
        FontSize="Large"
        HorizontalOptions="Center"
        IsEnabled="false">
  <Button.Triggers>
    <MultiTrigger TargetType="Button">
      <MultiTrigger.Conditions>
        <BindingCondition Binding="{Binding Source={x:Reference user},
                              Path=Text.Length,
                              Converter={StaticResource dataHasBeenEntered}}"
                          Value="true" />
        <BindingCondition Binding="{Binding Source={x:Reference pwd},
                              Path=Text.Length,
                              Converter={StaticResource dataHasBeenEntered}}"
                          Value="true" />
      </MultiTrigger.Conditions>
      <Setter Property="IsEnabled" Value="True" />
    </MultiTrigger>
  </Button.Triggers>
</Button>

Tyto snímky obrazovky znázorňují rozdíl mezi dvěma výše uvedenými příklady s více aktivačními událostmi. V horní části obrazovek stačí k povolení tlačítka Uložit textové zadání v jedné Entry z nich. Entry V dolní části obrazovek zůstane tlačítko Přihlásit neaktivní, dokud obě pole neobsahují data.

EnterActions a ExitActions

Dalším způsobem, jak implementovat změny, když dojde k aktivační události, je přidání kolekcí a EnterActionsExitActions a určení TriggerAction<T> implementací.

Kolekce Xamarin_Forms _TriggerBase_EnterActions" data-linktype="absolute-path">se používá k definování objektů, které budou vyvolány při splnití podmínky EnterActionsIListTriggerAction aktivační události. Kolekce Xamarin_Forms _TriggerBase_ExitActions" data-linktype="absolute-path">se používá k definování objektů, které se budou volat po ukončení podmínky ExitActionsIListTriggerAction triggeru.

V triggeru můžete zadat a i , ale nezapomeňte, že se y volaly okamžitě ExitActionsSetter (nečeká SetterEnterAction na dokončení nebo ExitAction ). Alternativně můžete provést všechno v kódu a vůbec Setter použít s.

<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>
            <!-- You can use both Enter/Exit and Setter together if required -->
        </Trigger>
    </Entry.Triggers>
</Entry>

Při odkazech na třídu v jazyce XAML byste jako vždy měli deklarovat obor názvů, jak xmlns:local je znázorněno zde:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:WorkingWithTriggers;assembly=WorkingWithTriggers"

Kód FadeTriggerAction je zobrazený níže:

public class FadeTriggerAction : TriggerAction<VisualElement>
{
    public int StartsFrom { set; get; }

    protected override void Invoke(VisualElement sender)
    {
        sender.Animate("FadeTriggerAction", new Animation((d) =>
        {
            var val = StartsFrom == 1 ? d : 1 - d;
            // so i was aiming for a different color, but then i liked the pink :)
            sender.BackgroundColor = Color.FromRgb(1, val, 1);
        }),
        length: 1000, // milliseconds
        easing: Easing.Linear);
    }
}

Aktivační události stavu

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

Triggery stavu se přidávají do Xamarin_Forms _VisualState_StateTriggers data-linktype="absolute-path">kolekce StateTriggersVisualState . Tato kolekce může obsahovat jednu aktivační událost stavu nebo více aktivačních událostí stavu. Objekt se použije, když jsou aktivní všechny aktivační události VisualState stavu v kolekci.

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

1. Všechny aktivační události, které jsou odvozeny z StateTriggerBase .
2. Aktivované AdaptiveTrigger kvůli Xamarin_Forms _AdaptiveTrigger_MinWindowWidth AdaptiveTrigger data-linktype="absolute-path">MinWindowWidth splněná podmínka.
3. Aktivované AdaptiveTrigger kvůli Xamarin_Forms AdaptiveTrigger _AdaptiveTrigger_MinWindowHeight data-linktype="absolute-path">MinWindowHeight splněná podmínka.

Pokud je současně aktivních více aktivačních událostí (například dvě vlastní triggery), bude mít přednost první aktivační událost deklarovaná ve značek.

Další informace o stavech vizuálů najdete v tématu Xamarin.Forms Visual State Manager .

Aktivační událost stavu

Třída odvozená z třídy má Xamarin_Forms StateTriggerStateTriggerBase _StateTrigger_IsActive StateTrigger data-linktype="absolute-path">IsActive s možností vazby. Objekt StateTrigger aktivuje VisualState změnu, když IsActive vlastnost změní hodnotu.

Třída, která je základní třídou pro všechny aktivační události stavu, má StateTriggerBase Xamarin_Forms StateTriggerBase _StateTriggerBase_IsActive" data-linktype="absolute-path">IsActive vlastnost a IsActiveChanged událost. Tato událost se vyvolá VisualState pokaždé, když dojde ke změně. Kromě toho má StateTriggerBase třída přepisovatelné metody OnAttached a OnDetached .

Následující příklad XAML ukazuje objekt Style , který 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í cílí Style na Grid objekty. Pokud je vlastnost vázaného objektu , barva pozadí objektu je IsToggledtrueGrid nastavena na černou. Když se vlastnost vázaného objektu změní na , aktivuje se změna a barva pozadí objektu IsToggledfalse se změní na VisualStateGrid bílou.

Kromě toho se VisualState pokaždé, když dojde ke změně, IsActiveChanged vyvolá událost pro 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 aktivována obslužná rutina pro událost, obslužná rutina vystupuje bez ohledu na to, jestli IsActiveChanged je objekt aktivní nebo VisualState ne. Například následující zprávy jsou výstupem do okna konzoly při změně stavu vizuálu Checked na Unchecked stav vizuálu:

Checked state active: False
Unchecked state active: True

Adaptivní trigger

Objekt AdaptiveTrigger aktivuje změnu v VisualState případě, že je v okně zadaná výška nebo šířka. Tento trigger má dvě vlastnosti s možností vazby:

• _AdaptiveTrigger_MinWindowHeight" data-linktype="absolute-path">typu , který označuje minimální výšku MinWindowHeightdouble okna, ve kterém se VisualState má použít .
• Xamarin_Forms _AdaptiveTrigger_MinWindowHeight" data-linktype="absolute-path">MinWindowWidth typu double , VisualState který označuje minimální šířku okna, při které se má použít .

Následující příklad XAML ukazuje objekt Style , který 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í cílí Style na StackLayout objekty. Pokud je šířka okna v rozmezí 0 až 800 jednotek nezávislých na zařízení, objekty, na které se použije , budou mít StackLayoutStyle svislou orientaci. Když je šířka okna = 800 jednotek nezávislých na zařízení, aktivuje se změna a orientace se >VisualState změní na StackLayout vodorovnou:

example

Vlastnosti Xamarin_Forms _AdaptiveTrigger_MinWindowHeight" data-linktype="absolute-path">a Xamarin_Forms MinWindowHeightMinWindowHeight _AdaptiveTrigger_MinWindowHeight" data-linktype="absolute-path">MinWindowWidth lze použít nezávisle nebo ve spojení mezi sebou. Následující kód XAML ukazuje příklad nastavení obou vlastností:

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

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

Porovnání triggeru stavu

Objekt CompareStateTrigger aktivuje VisualState změnu, když je vlastnost rovna konkrétní hodnotě. Tento trigger má dvě vlastnosti s možností vazby:

• Xamarin_Forms _CompareStateTrigger_Property" data-linktype="absolute-path">typu , který označuje vlastnost Propertyobject porovnávána aktivační událostí.
• Xamarin_Forms _CompareStateTrigger_Value" data-linktype="absolute-path">typu , který označuje Valueobject hodnotu, na kterou se VisualState má použít .

Následující příklad XAML ukazuje objekt Style , který 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í cílí Style na Grid objekty. Když Xamarin_Forms _CheckBox_IsChecked data-linktype="absolute-path">je , barva pozadí objektu se nastaví IsChecked na CheckBoxfalseGrid bílou. Když se vlastnost změní na , aktivuje se změna a barva pozadí objektu CheckBox.IsCheckedtrue se změní na VisualStateGrid černou:

Snímek obrazovky se aktivovanou změnou stavu vizuáluSnímek obrazovky aktivované změny stavu vizuálu

Trigger stavu zařízení

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

• Xamarin_Forms _DeviceStateTrigger_Device" data-linktype="absolute-path">typu , který označuje platformu Devicestring zařízení, na které VisualState se má použít .

Následující příklad XAML ukazuje objekt Style , který 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>
                <VisualState x:Name="UWP">
                    <VisualState.StateTriggers>
                        <DeviceStateTrigger Device="UWP" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor"
                                Value="Aquamarine" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>

V tomto příkladu objekty explicitní StyleContentPage cíle. ContentPage Objekty, které tento styl využívají, nastavují barvu pozadí na silver v iOSu, na modrou barvu v Androidu a na akvamarínové na UPW. Výsledné stránky v iOSu a Androidu jsou znázorněné na následujících snímcích obrazovky:

obrazovky aktivované změny stavu vizuálu pro iOS a Android

Trigger stavu orientace

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

• Xamarin_Forms _OrientationStateTrigger_Orientation" data-linktype="absolutní_cesta">typu , která označuje orientaci, na kterou se Orientation má objekt DeviceOrientationVisualState použít.

Následující příklad XAML ukazuje objekt Style , který 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 objekty explicitní StyleContentPage cíle. ContentPage Objekty, které styl využívají, nastaví barvu pozadí na silver, když je orientace na výšku, a nastaví barvu pozadí na bílou, pokud je orientace na šířku.

Související odkazy

• Ukázka aktivačních událostí
• Xamarin.Forms Visual State Manager
• Xamarin.Forms Trigger API