Aracılığıyla paylaş

Tetikleyiciler

  • Makale

Browse sample. Örneğe göz atın

.NET Çok Platformlu Uygulama Kullanıcı Arabirimi (.NET MAUI) tetikleyicileri, olaylara veya veri değişikliklerine göre denetimlerin görünümünü değiştiren eylemleri XAML'de bildirimli olarak ifade etmenizi sağlar. Ayrıca, özel bir tetikleyici grubu olan durum tetikleyicileri, ne VisualState zaman uygulanması gerektiğini tanımlar.

Bir tetikleyiciyi doğrudan denetimin koleksiyonuna atayabilir veya birden çok denetime Triggers uygulanacak sayfa düzeyinde veya uygulama düzeyinde bir kaynak sözlüğüne ekleyebilirsiniz.

Özellik tetikleyicileri

A Trigger , belirtilen özellik belirtilen bir koşulu karşıladığında özellik değerlerini uygulayan veya eylemler gerçekleştiren bir tetikleyiciyi temsil eder.

Aşağıdaki örnek, odağı aldığında arka plan rengini değiştiren bir TriggerEntry örneği gösterir:

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

Tetikleyicinin bildirimi aşağıdakileri belirtir:

  • TargetType - tetikleyicinin uygulandığı denetim türü.
  • Property - izlenen denetimdeki özelliği.
  • Value - değeri, izlenen özellik için gerçekleştiğinde tetikleyicinin etkinleştirilmesine neden olur.
  • Setter - tetikleyici koşulu karşılandığında uygulanan öğe koleksiyonu Setter .

Ayrıca isteğe bağlı EnterActions ve ExitActions koleksiyonlar belirtilebilir. Daha fazla bilgi için bkz . EnterActions ve ExitActions.

Stil kullanarak tetikleyici uygulama

Tetikleyiciler denetim, sayfa veya uygulama ResourceDictionaryüzerindeki bir bildirime Style de eklenebilir. Aşağıdaki örnek, sayfadaki tüm Entry denetimler için örtük bir stil bildirir:

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

Veri tetikleyicileri

, DataTrigger ilişkili veriler belirtilen bir koşula uyduğunda özellik değerlerini uygulayan veya eylemler gerçekleştiren bir tetikleyiciyi temsil eder. İşaretlemeyi Binding uzantısı belirtilen koşulu izlemek için kullanılır.

Aşağıdaki örnekte, boş olduğunda a'nın Entry devre dışı bırakıldığını gösteren bir DataTriggerButton gösterilmektedir:

<Entry x:Name="entry"
       Text=""
       Placeholder="Enter text" />
<Button Text="Save">
    <Button.Triggers>
        <DataTrigger TargetType="Button"
                     Binding="{Binding Source={x:Reference entry},
                                       Path=Text.Length}"
                     Value="0">
            <Setter Property="IsEnabled"
                    Value="False" />
            <!-- Multiple Setter elements are allowed -->
        </DataTrigger>
    </Button.Triggers>
</Button>

Bu örnekte, uzunluğu Entry sıfır olduğunda tetikleyici etkinleştirilir.

Bahşiş

Değerlendirme Path=Text.Length sırasında her zaman hedef özellik (örn. Text="") için varsayılan bir değer sağlayın çünkü aksi takdirde null olur ve tetikleyici beklediğiniz gibi çalışmaz.

Ayrıca isteğe bağlı EnterActions ve ExitActions koleksiyonlar belirtilebilir. Daha fazla bilgi için bkz . EnterActions ve ExitActions.

Olay tetikleyicileri

, EventTrigger bir olaya yanıt olarak bir dizi eylem uygulayan bir tetikleyiciyi temsil eder. EventTrigger'nin aksineTrigger, durumu sonlandırma kavramı yoktur, bu nedenle olayı tetikleyen koşul artık doğru olmadığında eylemler geri alınmaz.

yalnızca EventTrigger bir Event özelliğin ayarlanmasını gerektirir:

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

Bu örnekte hiçbir öğe yoktur Setter . Bunun yerine bir NumericalValidationTriggerAction nesne vardır.

Dekont

Olay tetikleyicileri ve ExitActions'i desteklemezEnterActions.

Tetikleyici eylemi uygulaması şu şekilde olmalıdır:

  • Tetikleyicinin TriggerAction<T> uygulanacağı denetim türüne karşılık gelen genel parametreyle genel sınıfı uygulayın. gibi VisualElement sınıfları kullanarak çeşitli denetimlerle çalışan tetikleyici eylemleri yazabilir veya gibi Entrybir denetim türü belirtebilirsiniz.
  • Invoke yöntemini geçersiz kılın. Tetikleyici olayı her gerçekleştiğinde bu yöntem çağrılır.
  • İsteğe bağlı olarak, tetikleyici bildirildiğinde XAML'de ayarlanabilen özellikleri kullanıma sunar.

Aşağıdaki örnekte sınıfı gösterilmektedir NumericValidationTriggerAction :

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

Uyarı

içinde ResourceDictionarytetikleyicileri paylaşırken dikkatli olun. Bir örnek denetimler arasında paylaşılır, böylece bir kez yapılandırılan tüm durumların tümüne uygulanır.

Çoklu tetikleyiciler

A MultiTrigger , bir dizi koşul karşılandığında özellik değerlerini uygulayan veya eylemler gerçekleştiren bir tetikleyiciyi temsil eder. Nesneler uygulanmadan önce Setter tüm koşullar doğru olmalıdır.

Aşağıdaki örnekte iki Entry nesneye bağlanan bir MultiTrigger gösterilmektedir:

<Entry x:Name="email"
       Text="" />
<Entry x:Name="phone"
       Text="" />
<Button Text="Save">
    <Button.Triggers>
        <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>
    </Button.Triggers>
</Button>

Buna ek olarak, MultiTrigger.Conditions koleksiyon nesneleri de içerebilir PropertyCondition :

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

EnterActions ve ExitActions

Tetikleyici gerçekleştiğinde değişiklikleri uygulamaya yönelik alternatif bir yaklaşım, ve koleksiyonları belirtmek EnterActions ve ExitActions uygulama oluşturmaktır TriggerAction<T> .

EnterActions türünde IList<TriggerAction>koleksiyon, tetikleyici koşulu karşılandığında çağrılacak bir koleksiyon tanımlar. ExitActions türünde IList<TriggerAction>koleksiyon, tetikleyici koşulu artık karşılanmadıktan sonra çağrılacak bir koleksiyon tanımlar.

Dekont

TriggerAction ve ExitActions koleksiyonlarında EnterActions tanımlanan nesneler sınıfı tarafından EventTrigger yoksayılır.

Aşağıdaki örnekte bir ve ExitActionbelirten EnterAction bir özellik tetikleyicisi gösterilmektedir:

<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>
        </Trigger>
    </Entry.Triggers>
</Entry>

Tetikleyici eylemi uygulaması şu şekilde olmalıdır:

  • Tetikleyicinin TriggerAction<T> uygulanacağı denetim türüne karşılık gelen genel parametreyle genel sınıfı uygulayın. gibi VisualElement sınıfları kullanarak çeşitli denetimlerle çalışan tetikleyici eylemleri yazabilir veya gibi Entrybir denetim türü belirtebilirsiniz.
  • Invoke yöntemini geçersiz kılın. Tetikleyici olayı her gerçekleştiğinde bu yöntem çağrılır.
  • İsteğe bağlı olarak, tetikleyici bildirildiğinde XAML'de ayarlanabilen özellikleri kullanıma sunar.

Aşağıdaki örnekte sınıfı gösterilmektedir FadeTriggerAction :

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

    protected override void Invoke(VisualElement sender)
    {
        sender.Animate("FadeTriggerAction", new Animation((d) =>
        {
            var val = StartsFrom == 1 ? d : 1 - d;
            sender.BackgroundColor = Color.FromRgb(1, val, 1);
        }),
        length: 1000, // milliseconds
        easing: Easing.Linear);
    }
}

Dekont

EnterActions Tetikleyicideki nesneleri ve ExitActionsSetter sağlayabilirsiniz, ancak nesnelerin hemen çağrıldığını Setter unutmayın (veya ExitAction işleminin EnterAction tamamlanmasını beklemez).

Durum tetikleyicileri

Durum tetikleyicileri, uygulanması gereken koşulları tanımlayan özel bir VisualState tetikleyici grubudır.

Durum tetikleyicileri bir VisualStatekoleksiyonuna StateTriggers eklenir. Bu koleksiyon tek bir durum tetikleyicisi veya birden çok durum tetikleyicisi içerebilir. VisualState Bir, koleksiyondaki durum tetikleyicileri etkin olduğunda uygulanır.

Görsel durumları denetlemek için durum tetikleyicileri kullanılırken ,NET MAUI hangi tetikleyicinin (ve karşılık gelen VisualState) etkin olacağını belirlemek için aşağıdaki öncelik kurallarını kullanır:

  1. 'den StateTriggerBasetüretilen tüm tetikleyiciler.
  2. AdaptiveTrigger Koşul karşılandığından MinWindowWidth etkinleştirildi.
  3. AdaptiveTrigger Koşul karşılandığından MinWindowHeight etkinleştirildi.

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

Dekont

Durum tetikleyicileri bir Styleiçinde veya doğrudan öğelerde ayarlanabilir.

Görsel durumlar hakkında daha fazla bilgi için bkz . Görsel durumlar.

Durum tetikleyicisi

StateTrigger sınıfından türetilen sınıfın StateTriggerBase bağlanabilir özelliği IsActive vardır. StateTrigger özelliği değeri değiştirdiğinde IsActive bir VisualState değişikliği tetikler.

StateTriggerBase Tüm durum tetikleyicileri için temel sınıf olan sınıfın bir IsActive özelliği ve olayı IsActiveChanged vardır. Bu olay, bir VisualState değişiklik olduğunda tetikler. Ayrıca, sınıfı geçersiz StateTriggerBase kılınabilir OnAttached ve OnDetached yöntemleri vardır.

Önemli

StateTrigger.IsActive Bağlanabilir özellik devralınan StateTriggerBase.IsActive özelliği gizler.

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

<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ük Style nesneleri hedefler Grid . IsToggled İlişkili nesnenin özelliği olduğunda trueöğesinin arka plan rengi Grid siyah olarak ayarlanır. IsToggled İlişkili nesnenin özelliği haline geldiğinde falsebir VisualState değişiklik tetiklenir ve arka plan rengi Grid beyaz olur.

Buna ek olarak, her VisualState değişiklik gerçekleştiğinde IsActiveChanged için VisualState olayı oluşturulur. Her VisualState bir olay, 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 IsActiveChanged bir işleyici tetiklendiğinde, işleyici etkin olup olmadığını VisualState çıkışını alır. Örneğin, aşağıdaki iletiler görsel durumundan görsel durumuna değiştirilirken Checked konsol penceresine Unchecked gönderilir:

Checked state active: False
Unchecked state active: True

Dekont

Özel durum tetikleyicileri sınıfından StateTriggerBase türetilerek ve gerekli kayıtları ve temizleme işlemlerini gerçekleştirmek için ve OnDetached yöntemlerini geçersiz kılarak OnAttached oluşturulabilir.

Uyarlamalı tetikleyici

Pencere AdaptiveTrigger belirtilen yükseklik veya genişlikte olduğunda bir VisualState değişiklik tetikler. Bu tetikleyicinin iki bağlanabilir özelliği vardır:

Dekont

sınıfından AdaptiveTriggerStateTriggerBase türetilir ve bu nedenle olaya bir olay işleyicisi IsActiveChanged ekleyebilir.

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

<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 nesneleri hedefler StackLayout . Pencere genişliği 0 ile 800 cihazdan bağımsız birim arasında olduğunda, StackLayout uygulandığı nesnelerin Style dikey yönlendirmesi olur. Pencere genişliği >= 800 cihazdan VisualState bağımsız birim olduğunda, değişiklik tetikler ve StackLayout yönlendirme yatay olarak değişir.

MinWindowHeight ve MinWindowWidth özellikleri birbirinden bağımsız olarak veya birbiriyle birlikte kullanılabilir. Aşağıdaki XAML'de her iki özelliğin de ayarlanmasına ilişkin bir örnek gösterilmektedir:

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

Bu örnekte, AdaptiveTrigger geçerli pencere genişliği >= 800 cihazdan bağımsız birim ve geçerli pencere yüksekliği = 1200 cihazdan bağımsız birim olduğunda >ilgilinin VisualState uygulanacağını gösterir.

Durum tetikleyicisi karşılaştırması

özelliği CompareStateTrigger belirli bir VisualState değere eşit olduğunda bir değişikliği tetikler. Bu tetikleyicinin iki bağlanabilir özelliği vardır:

  • Property, türündedir objectve tetikleyici tarafından karşılaştırılan özelliği gösterir.
  • Value, türündedir object. Bu, uygulanacağı değeri VisualState gösterir.

Dekont

sınıfından CompareStateTriggerStateTriggerBase türetilir ve bu nedenle olaya bir olay işleyicisi IsActiveChanged ekleyebilir.

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

<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 nesneleri hedefler Grid . IsChecked özelliği CheckBox olduğundafalse, öğesinin Grid arka plan rengi beyaz olarak ayarlanır. CheckBox.IsChecked özelliği olduğunda truebir VisualState değişiklik tetiklenir ve arka plan rengi Grid siyah olur.

Cihaz durumu tetikleyicisi

, DeviceStateTrigger uygulamanın üzerinde çalıştığı cihaz platformuna göre bir VisualState değişiklik tetikler. Bu tetikleyicinin tek bir bağlanabilir özelliği vardır:

  • Device, türüne stringgöre, uygulanacağı cihaz platformunu VisualState gösterir.

Dekont

sınıfından DeviceStateTriggerStateTriggerBase türetilir ve bu nedenle olaya bir olay işleyicisi IsActiveChanged ekleyebilir.

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

<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>
            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>

Bu örnekte, açık Style nesneleri hedefler ContentPage . ContentPage stil kullanan nesneler, arka plan renklerini iOS'ta gümüş ve Android'de soluk mavi olarak ayarlar.

Yönlendirme durumu tetikleyicisi

cihazın OrientationStateTrigger yönü değiştiğinde bir VisualState değişiklik tetikler. Bu tetikleyicinin tek bir bağlanabilir özelliği vardır:

Dekont

sınıfından OrientationStateTriggerStateTriggerBase türetilir ve bu nedenle olaya bir olay işleyicisi IsActiveChanged ekleyebilir.

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

<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 nesneleri hedefler ContentPage . ContentPage stili kullanan nesneler, yönlendirme dikey olduğunda arka plan renklerini gümüş olarak, yönlendirme yatay olduğunda ise arka plan renklerini beyaz olarak ayarlar.