Xamarin.Forms Tetikleyiciler

Örneği indirme

Tetikleyiciler, olayları veya özellik değişikliklerini temel alarak denetimlerin görünümünü değiştirecek eylemleri XAML'de bildirimli olarak ifade etmenizi sağlar. Ayrıca, özel bir tetikleyici grubu olan durum tetikleyicileri, ne zaman uygulanması VisualState gerektiğini tanımlar.

Tetikleyiciyi doğrudan bir denetime atayabilirsiniz veya birden çok denetime uygulanacak sayfa düzeyi veya uygulama düzeyinde kaynak sözlüğüne ekleyebilirsiniz.

Özellik tetikleyicileri

Basit bir tetikleyici yalnızca XAML'de ifade edilerek denetimin tetikleyici Trigger koleksiyonuna bir öğe eklenir. Bu örnekte odak alan arka plan Entry renginin değişikliklerini gösteren bir tetikleyici yer alır:

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

Tetikleyici bildiriminin önemli bölümleri:

• TargetType: Tetikleyicinin geçerli olduğu denetim türü.

• Özellik - izlenen denetim özelliği.

• Değer : tetikleyicinin etkinleştirmesi için izlenen özellik oluştuğunda oluşan değer.

• Ayarıcı - öğe koleksiyonu eklenebilir ve tetikleyici koşulu karşılendiğinde. Ayar için ve Property belirtmeniz Value gerekir.

• EnterActions ve ExitActions (gösterilmez) - kodda yazılır ve öğelerin yanı sıra (veya yerine) kullanılabilir. Bunlar aşağıda açıklanmıştır.

Stil kullanarak tetikleyici uygulama

Tetikleyiciler denetim, sayfa Style veya uygulama bildirimine de ResourceDictionary eklenebilir. Bu örnek, sayfada tüm denetimler için geçerli olacak şekilde örtülü bir stil (yani Key ayarsız) Entry bildirecek.

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

Veri tetikleyicileri

Veri tetikleyicileri, başka bir denetimi izlemek için veri bağlamayı kullanarak Setter s'lerin çağrılmalarını sağlar. Özellik Property tetikleyicisinde özniteliği yerine özniteliğini belirtilen Binding değer için izlemek üzere ayarlayın.

Aşağıdaki örnekte veri bağlama söz dizimi lanmıştır{Binding Source={x:Reference entry}, Path=Text.Length} Başka bir denetimin özelliklerine bu şekilde başvururuz. uzunluğu sıfır entry olduğunda tetikleyici etkinleştirilir. Bu örnekte, giriş boş olduğunda tetikleyici düğmeyi devre dışı bırakıyor.

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

ve belirtmeye Setter ek olarak ve de s Setter

Olay tetikleyicileri

öğesi EventTrigger yalnızca aşağıdaki örnekte olduğu gibi bir özellik Event"Clicked" gerektirir.

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

sayfanın Setterlocal:NumericValidationTriggerAction XAML'sinde bildirimini gerektiren bir sınıfa başvuru yerine öğe olmadığını xmlns:local görebilirsiniz:

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

Sınıfın kendisi, tetikleyici TriggerAction olayı her oluştuğunda çağrılan yöntem için bir geçersiz kılma Invoke sağlay gerektiği anlamına gelir.

Tetikleyici eylemi uygulaması şu şekildedir:

• Tetikleyicinin TriggerAction<T> uygulanacak denetim türüne karşılık gelen genel parametre ile genel sınıfını uygulama. Gibi üst sınıfları kullanarak çeşitli denetimlerle birlikte çalışan tetikleyici eylemleri yazabilir veya gibi VisualElement bir denetim türü Entry belirtabilirsiniz.

• Yöntemini Invoke geçersiz kılın; tetikleyici ölçütleri karşılendiğinde bu çağrılır.

• İsteğe bağlı olarak, tetikleyici bildirilsince XAML'de ayarlanabiliyor özellikleri ortaya çıkarır. Bunun bir örneği için, eşlik VisualElementPopTriggerAction eden örnek uygulamanın sınıfına bakın.

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

Olay tetikleyicisi daha sonra XAML'den tüketilebilir:

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

bir içinde tetikleyicileri paylaştığınızda, bir örnek denetimler arasında paylaşılır, böylece bir kez yapılandırılan tüm durumların ResourceDictionary hepsi için geçerli olur.

Olay tetikleyicileri aşağıda açıklandığı gibi EnterActionsExitActionsEnterActions

Birden çok tetikleyici

birden fazla koşul olması dışında bir veya MultiTriggerTrigger ile DataTrigger benzerdir. Tüm koşullar tetik başlamadan önce Setter doğru olması gerekir.

burada iki farklı girişe ( ve ) bağlanan bir düğmenin tetikleyicisi örneği ve yer emailphone almaktadır:

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

Koleksiyon Conditions aşağıdakine benzer PropertyCondition öğeler de içerebilir:

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

"Hepsini gerektir" çoklu tetikleyicisi

Çoklu tetikleyici yalnızca tüm koşullar doğru olduğunda denetimi ler. "Tüm alan uzunlukları sıfırdır" (tüm girişlerin tamamlanması gereken bir oturum açma sayfası gibi) için test yapmak karmaşık bir süreçtir çünkü "Text.Length 0" koşuluna sahip olmak istiyor ancak bu durum XAML'de ifade etmek mümkün > değildir.

Bu bir ile IValueConverter yapılabilir. Aşağıdaki dönüştürücü kodu, Text.Length bağlamayı alanın boş olup olmadığını belirten bir içine bool dönüştürmektedir:

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

Bu dönüştürücüyü birden çok tetikleyicide kullanmak için önce sayfanın kaynak sözlüğüne (özel ad alanı tanımıyla birlikte) xmlns:local ekleyin:

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

XAML aşağıda gösterilmiştir. İlk çoklu tetikleyici örneğinden aşağıdaki farkları unutmayın:

• Düğme varsayılan IsEnabled="false" olarak ayarlanmıştır.
• Çoklu tetikleyici koşulları, değeri bir değerine çevirmek Text.Length için dönüştürücüyü boolean kullanır.
• Tüm koşullar true olduğunda, ayarıcı düğmenin özelliğini IsEnabledtrue yapar.

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

Bu ekran görüntüleri, yukarıdaki iki çoklu tetikleyici örneği arasındaki farkı gösterir. Ekranların üst kısmında, Kaydet düğmesini etkinleştirmek için yalnızca bir metin Entry girişi yeterlidir. Entry Ekranların alt kısmında, her iki alan da veri içerene kadar Oturum Aç düğmesi etkin değil olarak kalır.

EnterActions ve ExitActions

Tetikleyici oluştuğunda değişiklikleri uygulamanın başka bir yolu, ve EnterActionsExitActions koleksiyonları eklemek ve uygulamaları TriggerAction<T> belirtmektir.

Xamarin_Forms _TriggerBase_EnterActions" data-linktype="absolute-path">koleksiyonu, tetikleyici koşulu karşılendiğinde çağrılan nesnelerin bir tanımlamak EnterActionsIListTriggerAction için kullanılır. Xamarin_Forms _TriggerBase_ExitActions" data-linktype="absolute-path">koleksiyonu, tetikleyici koşulu artık karşılanmayacaktan sonra çağrılan nesnelerin bir tanımlamak ExitActionsIListTriggerAction için kullanılır.

Tetikleyicide hem de s sağ ancak hemen çağrılır (veya işleminin tamamlandıktan sonra ExitActionsSetterSetterEnterActionExitAction beklemezler). Alternatif olarak, kodda her şeyi gerçekleştirebilirsiniz ve hiç Setter s kullanmayabilirsiniz.

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

Her zaman olduğu gibi, XAML'de bir sınıfa başvurulsa, burada gösterildiği gibi bir ad xmlns:local alanı bildirebilirsiniz:

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

Kod FadeTriggerAction aşağıda gösterilmiştir:

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

Durum tetikleyicileri

Durum tetikleyicileri, bir'nin uygulanması gereken koşulları tanımlayan özel bir tetikleyici VisualState grubu olur.

Durum tetikleyicileri, Xamarin_Forms _VisualState_StateTriggers" data-linktype="absolute-path">StateTriggers koleksiyonuna VisualState eklenir. Bu koleksiyon tek bir durum tetikleyicisi veya birden çok durum tetikleyicisi içerebilir. Koleksiyonda VisualState herhangi bir durum tetikleyicisi etkin olduğunda bir uygulanır.

Görsel durumları kontrol etmek için durum tetikleyicilerini kullanırken, hangi tetikleyicinin (ve karşılık gelen ) etkin olacağını belirlemek Xamarin.Forms için aşağıdaki öncelik kurallarını VisualState kullanır:

1. 'den türeten herhangi bir StateTriggerBase tetikleyici.
2. AdaptiveTriggerAdaptiveTrigger "data-linktype="absolute-path"Xamarin_Forms _AdaptiveTrigger_MinWindowWidth" koşulu karşı >MinWindowWidth etkinleştirildi.
3. AdaptiveTriggerAdaptiveTrigger "data-linktype="absolute-path"Xamarin_Forms _AdaptiveTrigger_MinWindowHeight" koşulu karşı >MinWindowHeight etkinleştirildi.

Birden çok tetikleyici aynı anda etkinse (örneğin, iki özel tetikleyici) işaretlemede bildirilen ilk tetikleyici önceliklidir.

Görsel durumları hakkında daha fazla bilgi için Xamarin.Forms Visual State Manager bkz. .

Durum tetikleyicisi

sınıfından StateTrigger türeten sınıf, Xamarin_Forms StateTriggerBaseStateTrigger _StateTrigger_IsActive" data-linktype="absolute-path">IsActive bindable özelliğine sahip. Özelliğin StateTrigger değeri VisualState değiştirlendiğinde bir değişikliği IsActive tetikler.

Tüm durum tetikleyicileri için temel sınıf olan StateTriggerBase sınıf, Xamarin_Forms StateTriggerBase _StateTriggerBase_IsActive" data-linktype="absolute-path">özelliğine ve bir IsActive olayına IsActiveChanged sahip. Bu olay her değişiklik olduğunda VisualState etkindir. Ayrıca, sınıfı StateTriggerBase geçersiz kılınabilir ve OnAttached yöntemleri OnDetached vardır.

Aşağıdaki XAML örneği nesneleri içeren Style bir StateTrigger gösterir:

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

Bu örnekte, örtülü Style nesneleri Grid hedefler. Bağlı IsToggled nesnenin özelliği true olduğunda, arka plan rengi Grid siyah olarak ayarlanır. IsToggledBağlantılı nesnenin özelliği olduğunda, false bir VisualState değişiklik tetiklenir ve arka plan rengi Grid beyaz olur.

Ayrıca, bir VisualState değişiklik her gerçekleştiğinde IsActiveChanged , için olayı VisualState tetiklenir. Her biri VisualState Bu olay için bir olay işleyicisi kaydeder:

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

Bu örnekte, olay için bir işleyici tetiklendiğinde IsActiveChanged işleyici, etkin olup olmadığını çıktı VisualState . Örneğin, aşağıdaki iletiler Checked görsel durumdan görsel duruma değiştirirken konsol penceresine çıktıdır Unchecked :

Checked state active: False
Unchecked state active: True

Uyarlamalı tetikleyici

AdaptiveTriggerVisualState Pencere belirtilen yükseklik veya genişlik olduğunda bir değişikliği tetikler. Bu tetikleyici, iki bağlanabilir özelliğe sahiptir:

• _AdaptiveTrigger_MinWindowHeight "Data-LinkType =" Absolute-path ">, MinWindowHeightdouble Uygulanacağı en düşük pencere yüksekliğini gösteren tür VisualState .
• Xamarin_Forms _AdaptiveTrigger_MinWindowHeight "Data-LinkType =" Absolute-path ">, MinWindowWidthdouble Uygulanacağı en küçük pencere genişliğini gösterir VisualState .

Aşağıdaki XAML örneğinde, Style nesneleri içeren bir gösterilmektedir AdaptiveTrigger :

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

Bu örnekte, örtük Style hedefler StackLayout nesneleri. Pencere genişliği 0 ve 800 cihazdan bağımsız birim arasındaysa, StackLayoutStyle uygulandığı nesneler dikey yönlendirmeye sahip olur. Pencere genişliği > = 800 cihazdan bağımsız birimler olduğunda, VisualState değişiklik tetiklenir ve StackLayout yönlendirme yatay olarak değişir:

Xamarin_Forms _AdaptiveTrigger_MinWindowHeight "Data-LinkType =" Absolute-path ">MinWindowHeight ve Xamarin_Forms MinWindowHeight _AdaptiveTrigger_MinWindowHeight" Data-LinkType = "Absolute-path" >MinWindowWidth özellikleri bağımsız olarak veya birbirleriyle birlikte kullanılabilir. Aşağıdaki XAML her iki özelliği de ayarlamaya ilişkin bir örnek göstermektedir:

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

Bu örnekte, AdaptiveTriggerVisualState geçerli pencere genişliği > = 800 ise cihazdan bağımsız birimler ve geçerli pencere yüksekliği > = 1200 cihazdan bağımsız birimler olduğunda karşılık gelen uygulanacağını gösterir.

Durum tetikleyicisini Karşılaştır

, Bir CompareStateTriggerVisualState özellik belirli bir değere eşitse bir değişikliği tetikler. Bu tetikleyici, iki bağlanabilir özelliğe sahiptir:

• Xamarin_Forms _CompareStateTrigger_Property "Data-LinkType =" Absolute-path ">, Propertyobject tetikleyiciden karşılaştırılan özelliği gösterir.
• Xamarin_Forms _CompareStateTrigger_Value "Data-LinkType =" Absolute-path ">, Value öğesinin object uygulanması gereken değeri gösteren tür VisualState .

Aşağıdaki XAML örneğinde, Style nesneleri içeren bir gösterilmektedir CompareStateTrigger :

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

Bu örnekte, örtük Style hedefler Grid nesneleri. Xamarin_Forms "Data-LinkType =" Absolute-path ">özelliği _CheckBox_IsChecked, öğesinin IsCheckedCheckBoxfalse arka plan rengi Grid beyaz olarak ayarlanır. Özelliği olduğunda CheckBox.IsCheckedtrue , bir VisualState değişiklik tetiklenir ve arka plan rengi Grid siyah olur:

Cihaz durumu tetikleyicisi

DeviceStateTriggerVisualState Uygulamanın üzerinde çalıştığı cihaz platformuna bağlı olarak bir değişiklik tetikler. Bu tetikleyicinin tek bir bağlanabilir özelliği vardır:

• Xamarin_Forms _DeviceStateTrigger_Device "Data-LinkType =" Absolute-path ">, Devicestring üzerinde uygulanması gereken cihaz platformunu gösteren tür VisualState .

Aşağıdaki XAML örneğinde, Style nesneleri içeren bir gösterilmektedir DeviceStateTrigger :

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

Bu örnekte, açık Style hedefler ContentPage nesneleri. ContentPage stili kullanan nesneler, arka plan rengini iOS üzerinde gümüş, Android 'de soluk mavi ve UWP üzerinde deniz mavisi olarak ayarlar. Aşağıdaki ekran görüntülerinde iOS ve Android 'de ortaya çıkan sayfalar gösterilmektedir:

, iOS ve Android

Yön durumu tetikleyicisi

, OrientationStateTriggerVisualState Cihazın yönlendirmesi değiştiğinde bir değişikliği tetikler. Bu tetikleyicinin tek bir bağlanabilir özelliği vardır:

• Xamarin_Forms _OrientationStateTrigger_Orientation "Data-LinkType =" Absolute-path ">, OrientationDeviceOrientation Uygulanacağı yönlendirmeyi gösteren tür VisualState .

Aşağıdaki XAML örneğinde, Style nesneleri içeren bir gösterilmektedir OrientationStateTrigger :

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

Bu örnekte, açık Style hedefler ContentPage nesneleri. ContentPage stili kullanan nesneler, Yön dikey olduğunda arka plan rengini gümüş olarak ayarlar ve yön yatay olduğunda arka plan rengini beyaz olarak ayarlar.

İlgili bağlantılar

• Tetikleyiciler örneği
• Xamarin.Forms Visual State Manager
• Xamarin.Forms Trigger API