Bagikan melalui

Xamarin.Forms Memicu

  • Artikel

Pemicu memungkinkan Anda untuk mengekspresikan tindakan secara deklaratif di XAML yang mengubah tampilan kontrol berdasarkan peristiwa atau perubahan properti. Selain itu, pemicu status, yang merupakan sekelompok pemicu khusus, menentukan kapan VisualState harus diterapkan.

Anda dapat menetapkan pemicu langsung ke kontrol, atau menambahkannya ke kamus sumber daya tingkat halaman atau tingkat aplikasi untuk diterapkan ke beberapa kontrol.

Pemicu properti

Pemicu sederhana dapat diekspresikan murni di XAML, menambahkan Trigger elemen ke koleksi pemicu kontrol. Contoh ini menunjukkan pemicu yang mengubah Entry warna latar belakang saat menerima 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>

Bagian penting dari deklarasi pemicu adalah:

  • TargetType - jenis kontrol tempat pemicu diterapkan.

  • Properti - properti pada kontrol yang dipantau.

  • Nilai - nilai, ketika terjadi untuk properti yang dipantau, yang menyebabkan pemicu diaktifkan.

  • Setter - kumpulan Setter elemen dapat ditambahkan dan ketika kondisi pemicu terpenuhi. Anda harus menentukan dan Value yang Property akan diatur.

  • EnterActions dan ExitActions (tidak ditampilkan) - ditulis dalam kode dan dapat digunakan selain elemen (atau bukan). Setter Mereka dijelaskan di bawah ini.

Menerapkan pemicu menggunakan gaya

Pemicu juga dapat ditambahkan ke Style deklarasi pada kontrol, di halaman, atau aplikasi ResourceDictionary. Contoh ini menyatakan gaya implisit (yaitu tidak ada Key yang diatur) yang berarti akan berlaku untuk semua Entry kontrol pada halaman.

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

Pemicu data

Pemicu data menggunakan pengikatan data untuk memantau kontrol lain untuk menyebabkan Setters dipanggil. Alih-alih Property atribut dalam pemicu properti, atur Binding atribut untuk memantau nilai yang ditentukan.

Contoh di bawah ini menggunakan sintaks pengikatan data {Binding Source={x:Reference entry}, Path=Text.Length} yang merupakan cara kita merujuk ke properti kontrol lain. Ketika panjangnya entry adalah nol, pemicu diaktifkan. Dalam sampel ini, pemicu menonaktifkan tombol saat input kosong.

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

Tip

Saat mengevaluasi Path=Text.Length selalu berikan nilai default untuk properti target (misalnya. Text="") karena jika tidak, maka pemicu null tidak akan berfungsi seperti yang Anda harapkan.

Selain menentukan Setters Anda juga dapat menyediakan EnterActions dan ExitActions.

Pemicu kejadian

Elemen EventTrigger hanya Event memerlukan properti, seperti "Clicked" dalam contoh di bawah ini.

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

Perhatikan bahwa tidak Setter ada elemen melainkan referensi ke kelas yang ditentukan oleh local:NumericValidationTriggerAction yang mengharuskan xmlns:local dideklarasikan dalam XAML halaman:

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

Kelas itu sendiri mengimplementasikan TriggerAction yang berarti harus memberikan penimpaan untuk Invoke metode yang dipanggil setiap kali peristiwa pemicu terjadi.

Implementasi tindakan pemicu harus:

  • Terapkan kelas generik TriggerAction<T> , dengan parameter generik yang sesuai dengan jenis kontrol yang akan diterapkan pemicu. Anda dapat menggunakan superkelas seperti VisualElement untuk menulis tindakan pemicu yang bekerja dengan berbagai kontrol, atau menentukan jenis kontrol seperti Entry.

  • Ambil alih Invoke metode - ini dipanggil setiap kali kriteria pemicu terpenuhi.

  • Secara opsional mengekspos properti yang dapat diatur di XAML saat pemicu dideklarasikan. Untuk contoh ini, lihat VisualElementPopTriggerAction kelas dalam aplikasi sampel yang menyertainya.

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

Pemicu peristiwa kemudian dapat dikonsumsi dari XAML:

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

Berhati-hatilah saat berbagi pemicu dalam ResourceDictionary, satu instans akan dibagikan di antara kontrol sehingga status apa pun yang dikonfigurasi sekali akan berlaku untuk mereka semua.

Perhatikan bahwa pemicu peristiwa tidak mendukung EnterActions dan ExitActionsdijelaskan di bawah ini.

Multi pemicu

Terlihat MultiTrigger mirip Trigger dengan atau DataTrigger kecuali mungkin ada lebih dari satu kondisi. Semua kondisi harus benar sebelum dipicu Setter.

Berikut adalah contoh pemicu untuk tombol yang mengikat ke dua input yang berbeda (email dan 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>

Koleksi Conditions juga dapat berisi PropertyCondition elemen seperti ini:

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

Membangun pemicu multi "perlu semua"

Multi pemicu hanya memperbarui kontrolnya ketika semua kondisi benar. Pengujian untuk "semua panjang bidang adalah nol" (seperti halaman masuk di mana semua input harus selesai) rumit karena Anda menginginkan kondisi "di mana Text.Length > 0" tetapi ini tidak dapat diekspresikan di XAML.

Ini dapat dilakukan dengan IValueConverter. Kode pengonversi di bawah ini mengubah Text.Length pengikatan menjadi bool yang menunjukkan apakah bidang kosong atau tidak:

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

Untuk menggunakan pengonversi ini dalam pemicu multi, pertama-tama tambahkan ke kamus sumber daya halaman (bersama dengan definisi namespace kustom xmlns:local ):

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

XAML ditunjukkan di bawah ini. Perhatikan perbedaan berikut dari contoh multi pemicu pertama:

  • Tombol telah IsEnabled="false" diatur secara default.
  • Kondisi multi pemicu menggunakan pengonversi untuk mengubah Text.Length nilai menjadi boolean.
  • Ketika semua kondisi adalah true, setter membuat properti truetombol 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>

Cuplikan layar ini menunjukkan perbedaan antara dua contoh pemicu multi di atas. Di bagian atas layar, input teks hanya dalam satu Entry sudah cukup untuk mengaktifkan tombol Simpan . Di bagian bawah layar, tombol Masuk tetap tidak aktif hingga kedua bidang berisi data.

Contoh MultiTrigger

EnterActions dan ExitActions

Cara lain untuk menerapkan perubahan ketika pemicu terjadi adalah dengan menambahkan dan ExitActions mengumpulkan EnterActions dan menentukan TriggerAction<T> implementasi.

Koleksi EnterActions digunakan untuk menentukan IListTriggerAction objek yang akan dipanggil saat kondisi pemicu terpenuhi. Koleksi ExitActions digunakan untuk menentukan IListTriggerAction objek yang akan dipanggil setelah kondisi pemicu tidak lagi terpenuhi.

Catatan

Objek TriggerAction yang ditentukan dalam EnterActions koleksi dan ExitActions diabaikan oleh EventTrigger kelas .

Anda dapat menyediakan keduanyaEnterActions dan ExitActions juga Setterdalam pemicu, tetapi ketahuilah bahwa Setters segera dipanggil (mereka tidak menunggu EnterAction atau ExitAction selesai). Atau Anda dapat melakukan semuanya dalam kode dan tidak menggunakan Settersama sekali.

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

Seperti biasa, ketika kelas direferensikan di XAML, Anda harus mendeklarasikan namespace seperti xmlns:local yang ditunjukkan di sini:

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

Kode FadeTriggerAction ditunjukkan di bawah ini:

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

Pemicu status

Pemicu status adalah grup pemicu khusus yang menentukan kondisi di mana VisualState harus diterapkan.

Pemicu status ditambahkan ke StateTriggers kumpulan VisualState. Koleksi ini dapat berisi pemicu status tunggal, atau beberapa pemicu status. VisualState Akan diterapkan ketika setiap pemicu status dalam koleksi aktif.

Saat menggunakan pemicu status untuk mengontrol status visual, Xamarin.Forms menggunakan aturan prioritas berikut untuk menentukan pemicu mana (dan yang VisualStatesesuai ) yang akan aktif:

  1. Pemicu apa pun yang berasal dari StateTriggerBase.
  2. Diaktifkan AdaptiveTrigger karena kondisi terpenuhi MinWindowWidth .
  3. Diaktifkan AdaptiveTrigger karena kondisi terpenuhi MinWindowHeight .

Jika beberapa pemicu aktif secara bersamaan (misalnya, dua pemicu kustom) maka pemicu pertama yang dideklarasikan dalam markup lebih diutamakan.

Catatan

Pemicu status dapat diatur dalam Style, atau langsung pada elemen.

Untuk informasi selengkapnya tentang status visual, lihat Xamarin.Forms Visual State Manager.

Pemicu status

Kelas StateTrigger , yang berasal dari StateTriggerBase kelas , memiliki properti yang IsActive dapat diikat. Memicu StateTriggerVisualState perubahan saat IsActive properti mengubah nilai.

Kelas StateTriggerBase , yang merupakan kelas dasar untuk semua pemicu status, memiliki IsActive properti dan IsActiveChanged peristiwa. Peristiwa ini terjadi setiap kali VisualState perubahan terjadi. Selain itu, StateTriggerBase kelas memiliki metode dan OnDetached yang dapat OnAttached diambil alih.

Penting

Properti StateTrigger.IsActive yang dapat diikat menyembunyikan properti yang diwariskan StateTriggerBase.IsActive .

Contoh XAML berikut menunjukkan Style yang menyertakan StateTrigger objek:

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

Dalam contoh ini, implisit Style menargetkan Grid objek. IsToggled Ketika properti objek terikat adalah true, warna Grid latar belakang diatur ke hitam. IsToggled Ketika properti objek terikat menjadi false, VisualState perubahan dipicu, dan warna Grid latar belakang menjadi putih.

Selain itu, setiap kali VisualState perubahan terjadi, IsActiveChanged peristiwa untuk dipicu VisualState . Masing-masing VisualState mendaftarkan penanganan aktivitas untuk kejadian ini:

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

Dalam contoh ini, ketika handler untuk IsActiveChanged peristiwa diaktifkan, handler menghasilkan apakah VisualState aktif atau tidak. Misalnya, pesan berikut adalah output ke jendela konsol saat berubah dari Checked status visual ke Unchecked status visual:

Checked state active: False
Unchecked state active: True

Catatan

Pemicu status kustom dapat dibuat dengan turunan dari StateTriggerBase kelas, dan mengambil alih OnAttached metode dan OnDetached untuk melakukan pendaftaran dan pembersihan yang diperlukan.

Pemicu adaptif

Memicu AdaptiveTriggerVisualState perubahan saat jendela adalah tinggi atau lebar yang ditentukan. Pemicu ini memiliki dua properti yang dapat diikat:

Catatan

Oleh karena itu AdaptiveTrigger , berasal dari StateTriggerBase kelas dan dapat melampirkan penanganan aktivitas ke IsActiveChanged acara.

Contoh XAML berikut menunjukkan Style yang menyertakan AdaptiveTrigger objek:

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

Dalam contoh ini, implisit Style menargetkan StackLayout objek. Ketika lebar jendela antara 0 dan 800 unit independen perangkat, StackLayout objek yang Style diterapkan akan memiliki orientasi vertikal. Ketika lebar jendela = >800 unit independen perangkat, VisualState perubahan dipicu, dan StackLayout orientasi berubah menjadi horizontal:

StackLayout VisualState VertikalHorizontal StackLayout VisualState

Properti MinWindowHeight dan MinWindowWidth dapat digunakan secara independen atau bersama satu sama lain. XAML berikut menunjukkan contoh pengaturan kedua properti:

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

Dalam contoh ini, AdaptiveTrigger menunjukkan bahwa yang sesuai VisualState akan diterapkan ketika lebar jendela saat ini adalah >= 800 unit independen perangkat dan tinggi jendela saat ini adalah >= 1200 unit independen perangkat.

Membandingkan pemicu status

Memicu CompareStateTriggerVisualState perubahan saat properti sama dengan nilai tertentu. Pemicu ini memiliki dua properti yang dapat diikat:

  • Property, dari jenis object, yang menunjukkan properti dibandingkan dengan pemicu.
  • Value, dari jenis object, yang menunjukkan nilai di mana VisualState harus diterapkan.

Catatan

Oleh karena itu CompareStateTrigger , berasal dari StateTriggerBase kelas dan dapat melampirkan penanganan aktivitas ke IsActiveChanged acara.

Contoh XAML berikut menunjukkan Style yang menyertakan CompareStateTrigger objek:

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

Dalam contoh ini, implisit Style menargetkan Grid objek. IsChecked Ketika properti adalah CheckBoxfalse, warna latar belakang diatur Grid ke putih. CheckBox.IsChecked Ketika properti menjadi true, VisualState perubahan dipicu, dan warna Grid latar belakang menjadi hitam:

Cuplikan layar perubahan status visual yang dipicu, di iOS dan Android, dengan pemicu tidak dicentang.Cuplikan layar perubahan status visual yang dipicu, di iOS dan Android, dengan pemicu diperiksa.

Pemicu status perangkat

Pemicu DeviceStateTriggerVisualState perubahan berdasarkan platform perangkat tempat aplikasi berjalan. Pemicu ini memiliki satu properti yang dapat diikat:

  • Device, dari jenis string, yang menunjukkan platform perangkat tempat VisualState harus diterapkan.

Catatan

Oleh karena itu DeviceStateTrigger , berasal dari StateTriggerBase kelas dan dapat melampirkan penanganan aktivitas ke IsActiveChanged acara.

Contoh XAML berikut menunjukkan Style yang menyertakan DeviceStateTrigger objek:

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

Dalam contoh ini, eksplisit Style menargetkan ContentPage objek. ContentPage objek yang menggunakan gaya mengatur warna latar belakang mereka menjadi perak di iOS, menjadi biru pucat di Android, dan ke aquamarine di UWP. Cuplikan layar berikut menunjukkan halaman yang dihasilkan di iOS dan Android:

Cuplikan layar perubahan status visual yang dipicu, di iOS dan Android

Pemicu status orientasi

Memicu OrientationStateTriggerVisualState perubahan saat orientasi perangkat berubah. Pemicu ini memiliki satu properti yang dapat diikat:

Catatan

Oleh karena itu OrientationStateTrigger , berasal dari StateTriggerBase kelas dan dapat melampirkan penanganan aktivitas ke IsActiveChanged acara.

Contoh XAML berikut menunjukkan Style yang menyertakan OrientationStateTrigger objek:

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

Dalam contoh ini, eksplisit Style menargetkan ContentPage objek. ContentPage objek yang mengonsumsi gaya mengatur warna latar belakangnya menjadi perak ketika orientasinya adalah potret, dan mengatur warna latar belakangnya menjadi putih ketika orientasinya adalah lanskap.