Udostępnij za pośrednictwem

Xamarin.Forms Wyzwalaczy

  • Artykuł

Wyzwalacze umożliwiają deklaratywne wyrażanie akcji w języku XAML, które zmieniają wygląd kontrolek na podstawie zdarzeń lub zmian właściwości. Ponadto wyzwalacze stanu, które są wyspecjalizowaną grupą wyzwalaczy, definiują, kiedy VisualState należy zastosować.

Wyzwalacz można przypisać bezpośrednio do kontrolki lub dodać go do słownika zasobów na poziomie strony lub na poziomie aplikacji, który ma zostać zastosowany do wielu kontrolek.

Wyzwalacze właściwości

Prosty wyzwalacz można wyrazić wyłącznie w języku XAML, dodając Trigger element do kolekcji wyzwalaczy kontrolki. W tym przykładzie pokazano wyzwalacz, który zmienia kolor tła po odebraniu fokusu Entry :

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

Ważne elementy deklaracji wyzwalacza to:

  • TargetType — typ kontrolki, do którego ma zastosowanie wyzwalacz.

  • Właściwość — właściwość kontrolki, która jest monitorowana.

  • Value — wartość, gdy występuje dla monitorowanej właściwości, która powoduje aktywowanie wyzwalacza.

  • Setter — można dodać kolekcję Setter elementów i po spełnieniu warunku wyzwalacza. Należy określić wartości Property i Value , aby je ustawić.

  • EnterActions i ExitActions (nie są wyświetlane) — są zapisywane w kodzie i mogą być używane oprócz (lub zamiast) Setter elementów. Zostały one opisane poniżej.

Stosowanie wyzwalacza przy użyciu stylu

Wyzwalacze można również dodać do Style deklaracji w kontrolce, na stronie lub aplikacji ResourceDictionary. W tym przykładzie zadeklarowany jest niejawny styl (tj. nie Key jest ustawiony), co oznacza, że będzie on stosowany do wszystkich Entry kontrolek na stronie.

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

Wyzwalacze danych

Wyzwalacze danych używają powiązania danych do monitorowania innej kontrolki w celu wywołania wywołania elementu Setter. Zamiast atrybutu Property w wyzwalaczu właściwości ustaw Binding atrybut, aby monitorować określoną wartość.

W poniższym przykładzie użyto składni powiązania danych {Binding Source={x:Reference entry}, Path=Text.Length} w jaki sposób odwołujemy się do właściwości innej kontrolki. Gdy długość entry wartości wynosi zero, wyzwalacz jest aktywowany. W tym przykładzie wyzwalacz wyłącza przycisk, gdy dane wejściowe są puste.

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

Napiwek

Podczas oceny Path=Text.Length zawsze podaj wartość domyślną dla właściwości docelowej (np. Text=""), ponieważ w przeciwnym razie będzie null to i wyzwalacz nie będzie działać tak, jak oczekiwano.

Oprócz określania Setterparametrów można również podaćEnterActionselementy i ExitActions.

Wyzwalacze zdarzeń

Element EventTrigger wymaga tylko Event właściwości, takiej jak "Clicked" w poniższym przykładzie.

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

Zwróć uwagę, że nie Setter ma żadnych elementów, ale raczej odwołania do klasy zdefiniowanej przez local:NumericValidationTriggerAction element , który wymaga zadeklarowania elementu xmlns:local w języku XAML strony:

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

Sama klasa implementuje TriggerAction , co oznacza, że powinna podać przesłonięcia metody Invoke , która jest wywoływana za każdym razem, gdy wystąpi zdarzenie wyzwalacza.

Implementacja akcji wyzwalacza powinna:

  • Zaimplementuj klasę ogólną z parametrem ogólnym TriggerAction<T> odpowiadającym typowi kontrolki, do których zostanie zastosowany wyzwalacz. Można użyć superklas, takich jak VisualElement do pisania akcji wyzwalacza, które działają z różnymi kontrolkami, lub określić typ kontrolki, taki jak Entry.

  • Zastąpij metodę Invoke — jest to wywoływane za każdym razem, gdy zostaną spełnione kryteria wyzwalacza.

  • Opcjonalnie uwidaczniaj właściwości, które można ustawić w języku XAML po zadeklarowaniu wyzwalacza. Aby zapoznać się z przykładem, zobacz klasę VisualElementPopTriggerAction w towarzyszącej przykładowej aplikacji.

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

Wyzwalacz zdarzenia można następnie użyć z kodu XAML:

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

Zachowaj ostrożność podczas udostępniania wyzwalaczy w elemecie ResourceDictionary, jedno wystąpienie będzie współużytkowane między kontrolkami, tak aby każdy stan skonfigurowany raz był stosowany do nich wszystkich.

Pamiętaj, że wyzwalacze zdarzeń nie obsługują EnterActions i ExitActionszostały opisane poniżej.

Wyzwalacze z wieloma wyzwalaczami

Obiekt MultiTrigger wygląda podobnie do obiektu Trigger lub DataTrigger z wyjątkiem jednego warunku. Wszystkie warunki muszą być spełnione przed wyzwoleniem Setters.

Oto przykład wyzwalacza dla przycisku powiązanego z dwoma różnymi danymi wejściowymi (email i phone):

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

Kolekcja Conditions może również zawierać PropertyCondition elementy podobne do następujących:

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

Kompilowanie wyzwalacza z wieloma wyzwalaczami "wymagaj wszystkich"

Wyzwalacz wielokrotny aktualizuje kontrolkę tylko wtedy, gdy wszystkie warunki są spełnione. Testowanie wartości "wszystkie długości pól są zerowe" (na przykład strona logowania, na której muszą zostać ukończone wszystkie dane wejściowe), jest trudne, ponieważ chcesz mieć warunek "where Text.Length > 0", ale nie można go wyrazić w języku XAML.

Można to zrobić za pomocą elementu IValueConverter. Poniższy kod konwertera Text.Length przekształca powiązanie w element bool , który wskazuje, czy pole jest puste, czy nie:

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

Aby użyć tego konwertera w wyzwalaczu z wieloma wyzwalaczami, najpierw dodaj go do słownika zasobów strony (wraz z niestandardową xmlns:local definicją przestrzeni nazw):

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

Kod XAML jest pokazany poniżej. Zwróć uwagę na następujące różnice w przykładzie pierwszego wyzwalacza z wieloma wyzwalaczami:

  • Przycisk został IsEnabled="false" ustawiony domyślnie.
  • Warunki wielu wyzwalaczy używają konwertera, aby przekształcić Text.Length wartość w booleanwartość .
  • Gdy wszystkie warunki to true, setter sprawia, że właściwość trueprzycisku IsEnabled .
<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>

Te zrzuty ekranu pokazują różnicę między dwoma przykładami z wieloma wyzwalaczami powyżej. W górnej części ekranów wystarczy wprowadzić tekst tylko jeden Entry , aby włączyć przycisk Zapisz . W dolnej części ekranów przycisk Zaloguj pozostaje nieaktywny, dopóki oba pola nie zawierają danych.

Przykłady multitrigger

EnterActions i ExitActions

Innym sposobem implementacji zmian w przypadku wystąpienia wyzwalacza jest dodanie EnterActions i ExitActions kolekcje oraz określenie TriggerAction<T> implementacji.

Kolekcja EnterActions służy do definiowania IListTriggerAction obiektów, które będą wywoływane po spełnieniu warunku wyzwalacza. Kolekcja ExitActions służy do definiowania IListTriggerAction obiektów, które będą wywoływane po spełnieniu warunku wyzwalacza.

Uwaga

Obiekty TriggerAction zdefiniowane w EnterActions kolekcjach i ExitActions są ignorowane przez klasę EventTrigger .

Możesz podać zarówno elementEnterActions , jak Setteri ExitActions s w wyzwalaczu, ale należy pamiętać, że Setters są wywoływane natychmiast (nie czekają na EnterAction ukończenie operacji lubExitAction). Alternatywnie możesz wykonać wszystko w kodzie i nie używać Setters w ogóle.

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

Jak zawsze, gdy klasa jest przywoływana w języku XAML, należy zadeklarować przestrzeń nazw, taką jak xmlns:local pokazano poniżej:

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

Poniżej FadeTriggerAction przedstawiono kod:

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

Wyzwalacze stanu

Wyzwalacze stanu to wyspecjalizowana grupa wyzwalaczy, które definiują warunki, w których VisualState należy zastosować element .

Wyzwalacze stanu są dodawane do StateTriggers kolekcji elementu VisualState. Ta kolekcja może zawierać jeden wyzwalacz stanu lub wiele wyzwalaczy stanu. Element VisualState zostanie zastosowany, gdy wszystkie wyzwalacze stanu w kolekcji są aktywne.

W przypadku używania wyzwalaczy stanu do kontrolowania stanów wizualizacji użyj następujących reguł pierwszeństwa, aby określić, Xamarin.Forms który wyzwalacz (i odpowiadający VisualStateim ) będzie aktywny:

  1. Każdy wyzwalacz pochodzący z elementu StateTriggerBase.
  2. Aktywowano AdaptiveTrigger z powodu MinWindowWidth spełnienia warunku.
  3. Aktywowano AdaptiveTrigger z powodu MinWindowHeight spełnienia warunku.

Jeśli wiele wyzwalaczy jest jednocześnie aktywnych (na przykład dwa wyzwalacze niestandardowe), pierwszy wyzwalacz zadeklarowany w znaczniku ma pierwszeństwo.

Uwaga

Wyzwalacze stanu można ustawić w elemecie Stylelub bezpośrednio na elementach.

Aby uzyskać więcej informacji na temat stanów wizualizacji, zobacz Xamarin.Forms Visual State Manager.

Wyzwalacz stanu

Klasa StateTrigger , która pochodzi z StateTriggerBase klasy, ma IsActive właściwość, którą można powiązać. Element StateTrigger wyzwala zmianę VisualState , gdy IsActive właściwość zmienia wartość.

Klasa StateTriggerBase , która jest klasą bazową dla wszystkich wyzwalaczy stanu, ma IsActive właściwość i IsActiveChanged zdarzenie. To zdarzenie jest uruchamiane za każdym razem, gdy VisualState nastąpi zmiana. Ponadto StateTriggerBase klasa ma przesłonięcia OnAttached i OnDetached metody.

Ważne

Właściwość StateTrigger.IsActive powiązana ukrywa dziedziczona StateTriggerBase.IsActive właściwość.

W poniższym przykładzie XAML pokazano obiekt Style zawierający StateTrigger obiekty:

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

W tym przykładzie niejawne Style obiekty docelowe Grid . IsToggled Gdy właściwość powiązanego obiektu to true, kolor tła obiektu Grid jest ustawiony na czarny. IsToggled Gdy właściwość powiązanego obiektu zostanie wyzwolona, VisualState zostanie wyzwolona falsezmiana, a kolor Grid tła obiektu stanie się biały.

Ponadto za każdym razem, gdy VisualState nastąpi zmiana, IsActiveChanged zdarzenie jest VisualState uruchamiane. Każdy VisualState rejestruje program obsługi zdarzeń dla tego zdarzenia:

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

W tym przykładzie po uruchomieniu IsActiveChanged programu obsługi dla zdarzenia program obsługi zwraca dane wyjściowe niezależnie od tego VisualState , czy jest aktywny, czy nie. Na przykład następujące komunikaty są danymi wyjściowymi okna konsoli podczas zmiany Checked stanu wizualizacji na stan wizualizacji Unchecked :

Checked state active: False
Unchecked state active: True

Uwaga

Wyzwalacze stanu niestandardowego można utworzyć, wyprowadzając z StateTriggerBase klasy, i przesłaniając OnAttached metody i OnDetached w celu przeprowadzenia wszelkich wymaganych rejestracji i czyszczenia.

Wyzwalacz adaptacyjny

Wyzwala AdaptiveTrigger zmianę VisualState , gdy okno jest określoną wysokością lub szerokością. Ten wyzwalacz ma dwie właściwości możliwe do powiązania:

Uwaga

Element AdaptiveTrigger pochodzi z StateTriggerBase klasy i może w związku z tym IsActiveChanged dołączyć program obsługi zdarzeń do zdarzenia.

W poniższym przykładzie XAML pokazano obiekt Style zawierający AdaptiveTrigger obiekty:

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

W tym przykładzie niejawne Style obiekty docelowe StackLayout . Gdy szerokość okna wynosi od 0 do 800 jednostek niezależnych od urządzenia, obiekty, StackLayout do których Style zastosowano, będą miały orientację pionową. Gdy szerokość okna wynosi >800 jednostek niezależnych od urządzenia, VisualState zmiana jest wyzwalana, a orientacja StackLayout zmienia się na poziomą:

Pionowy element StackLayout VisualStatePozioma wartość StackLayout VisualState

Właściwości MinWindowHeight i MinWindowWidth mogą być używane niezależnie lub w połączeniu ze sobą. Poniższy kod XAML przedstawia przykład ustawienia obu właściwości:

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

W tym przykładzie AdaptiveTrigger parametr wskazuje, że odpowiedni VisualState element zostanie zastosowany, gdy bieżąca szerokość okna wynosi >= 800 jednostek niezależnych od urządzenia, a bieżąca wysokość okna to >= 1200 jednostek niezależnych od urządzenia.

Porównywanie wyzwalacza stanu

Wyzwala CompareStateTrigger zmianę VisualState , gdy właściwość jest równa określonej wartości. Ten wyzwalacz ma dwie właściwości możliwe do powiązania:

  • Property, typu object, który wskazuje właściwość porównywaną przez wyzwalacz.
  • Value, typu object, który wskazuje wartość, przy której VisualState należy zastosować.

Uwaga

Element CompareStateTrigger pochodzi z StateTriggerBase klasy i może w związku z tym IsActiveChanged dołączyć program obsługi zdarzeń do zdarzenia.

W poniższym przykładzie XAML pokazano obiekt Style zawierający CompareStateTrigger obiekty:

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

W tym przykładzie niejawne Style obiekty docelowe Grid . IsChecked Gdy właściwość CheckBox właściwości to false, kolor tła obiektu Grid jest ustawiony na biały. CheckBox.IsChecked Gdy właściwość zostanie wyzwolona, VisualState zostanie wyzwolona truezmiana, a kolor Grid tła właściwości stanie się czarny:

Zrzut ekranu przedstawiający wyzwolone zmiany stanu wizualizacji w systemach iOS i Android z niezaznakowanym wyzwalaczem.Zrzut ekranu przedstawiający wyzwolone zmiany stanu wizualizacji w systemach iOS i Android z zaznaczonym wyzwalaczem.

Wyzwalacz stanu urządzenia

Wyzwala DeviceStateTrigger zmianę VisualState na podstawie platformy urządzenia, na którym działa aplikacja. Ten wyzwalacz ma jedną właściwość z możliwością powiązania:

  • Device, typu string, który wskazuje platformę urządzenia, na której VisualState należy zastosować.

Uwaga

Element DeviceStateTrigger pochodzi z StateTriggerBase klasy i może w związku z tym IsActiveChanged dołączyć program obsługi zdarzeń do zdarzenia.

W poniższym przykładzie XAML pokazano obiekt Style zawierający DeviceStateTrigger obiekty:

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

W tym przykładzie jawne Style obiekty docelowe ContentPage . ContentPage obiekty, które używają stylu, ustawiają kolor tła na srebrny w systemie iOS, na jasnoniebieski w systemie Android i aquamarine na platformie UWP. Na poniższych zrzutach ekranu przedstawiono wynikowe strony w systemach iOS i Android:

Zrzut ekranu przedstawiający zmianę stanu wizualizacji wyzwalanej w systemach iOS i Android

Wyzwalacz stanu orientacji

Wyzwala OrientationStateTrigger zmianę VisualState po zmianie orientacji urządzenia. Ten wyzwalacz ma jedną właściwość z możliwością powiązania:

Uwaga

Element OrientationStateTrigger pochodzi z StateTriggerBase klasy i może w związku z tym IsActiveChanged dołączyć program obsługi zdarzeń do zdarzenia.

W poniższym przykładzie XAML pokazano obiekt Style zawierający OrientationStateTrigger obiekty:

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

W tym przykładzie jawne Style obiekty docelowe ContentPage . ContentPage obiekty, które używają stylu, ustawiają kolor tła na srebrny, gdy orientacja jest pionowa, i ustawiają kolor tła na biały, gdy orientacja jest pozioma.