Xamarin.Forms Wyzwalaczy
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.
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ściProperty
iValue
, 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.
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 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>
Porada
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 Setter
parametrów można również podaćEnterActions
elementy i ExitActions
.
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 jakVisualElement
do pisania akcji wyzwalacza, które działają z różnymi kontrolkami, lub określić typ kontrolki, taki jakEntry
.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 ExitActions
zostały opisane poniżej.
Obiekt MultiTrigger
wygląda podobnie do obiektu Trigger
lub DataTrigger
z wyjątkiem jednego warunku. Wszystkie warunki muszą być spełnione przed wyzwoleniem Setter
s.
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" />
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ść wboolean
wartość . - Gdy wszystkie warunki to
true
, setter sprawia, że właściwośćtrue
przyciskuIsEnabled
.
<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.
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 IList
TriggerAction
obiektów, które będą wywoływane po spełnieniu warunku wyzwalacza. Kolekcja ExitActions
służy do definiowania IList
TriggerAction
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 element EnterActions
, jak Setter
i ExitActions
s w wyzwalaczu, ale należy pamiętać, że Setter
s są wywoływane natychmiast (nie czekają na EnterAction
ukończenie operacji lubExitAction
). Alternatywnie możesz wykonać wszystko w kodzie i nie używać Setter
s 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 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 VisualState
im ) będzie aktywny:
- Każdy wyzwalacz pochodzący z elementu
StateTriggerBase
. - Aktywowano
AdaptiveTrigger
z powoduMinWindowWidth
spełnienia warunku. - Aktywowano
AdaptiveTrigger
z powoduMinWindowHeight
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 Style
lub bezpośrednio na elementach.
Aby uzyskać więcej informacji na temat stanów wizualizacji, zobacz Xamarin.Forms Visual State Manager.
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. IsToggled
Gdy właściwość powiązanego obiektu zostanie wyzwolona, VisualState
zostanie wyzwolona false
zmiana, 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.
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:
MinWindowHeight
, typudouble
, który wskazuje minimalną wysokość okna, w którymVisualState
należy zastosować.MinWindowWidth
, typudouble
, który wskazuje minimalną szerokość okna, w którymVisualState
należy zastosować.
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ą:
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.
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
, typuobject
, który wskazuje właściwość porównywaną przez wyzwalacz.Value
, typuobject
, który wskazuje wartość, przy którejVisualState
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 true
zmiana, a kolor Grid
tła właściwości stanie się:
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
, typustring
, który wskazuje platformę urządzenia, na którejVisualState
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:
Wyzwala OrientationStateTrigger
zmianę VisualState
po zmianie orientacji urządzenia. Ten wyzwalacz ma jedną właściwość z możliwością powiązania:
Orientation
, typuDeviceOrientation
, który wskazuje orientację, do którejVisualState
należy zastosować.
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.