Bagikan melalui

Memicu

  • Artikel

Browse sample. Telusuri sampel

Pemicu .NET Multi-platform App UI (.NET MAUI) memungkinkan Anda untuk mengekspresikan tindakan secara deklaratif di XAML yang mengubah tampilan kontrol berdasarkan peristiwa atau perubahan data. Selain itu, pemicu status, yang merupakan sekelompok pemicu khusus, menentukan kapan VisualState harus diterapkan.

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

Pemicu properti

Trigger mewakili pemicu yang menerapkan nilai properti, atau melakukan tindakan, ketika properti yang ditentukan memenuhi kondisi tertentu.

Contoh berikut menunjukkan Trigger bahwa 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 Setter elements are allowed -->
        </Trigger>
    </Entry.Triggers>
</Entry>

Deklarasi pemicu menentukan hal berikut:

  • TargetType - jenis kontrol yang diterapkan pemicu.
  • Property - properti pada kontrol yang dipantau.
  • Value - nilai, ketika itu terjadi untuk properti yang dipantau, yang menyebabkan pemicu diaktifkan.
  • Setter - kumpulan Setter elemen yang diterapkan saat kondisi pemicu terpenuhi.

Selain itu, opsional EnterActions dan ExitActions koleksi dapat ditentukan. Untuk informasi selengkapnya, lihat EnterActions dan ExitActions.

Menerapkan pemicu menggunakan gaya

Pemicu juga dapat ditambahkan ke Style deklarasi pada kontrol, di halaman, atau aplikasi ResourceDictionary. Contoh berikut mendeklarasikan gaya implisit untuk semua Entry kontrol di halaman:

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

Pemicu data

DataTrigger mewakili pemicu yang menerapkan nilai properti, atau melakukan tindakan, saat data terikat memenuhi kondisi tertentu. Ekstensi Binding markup digunakan untuk memantau kondisi yang ditentukan.

Contoh berikut menunjukkan DataTrigger yang menonaktifkan Button saat Entry kosong:

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

Dalam contoh ini, ketika panjangnya Entry adalah nol, pemicu diaktifkan.

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 itu, opsional EnterActions dan ExitActions koleksi dapat ditentukan. Untuk informasi selengkapnya, lihat EnterActions dan ExitActions.

Pemicu kejadian

Mewakili EventTrigger pemicu yang menerapkan serangkaian tindakan sebagai respons terhadap suatu peristiwa. Tidak seperti Trigger, EventTrigger tidak memiliki konsep penghentian status, sehingga tindakan tidak akan dibatalkan setelah kondisi yang memunculkan peristiwa tidak lagi benar.

Hanya EventTrigger mengharuskan Event properti diatur:

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

Dalam contoh ini, tidak Setter ada elemen. Sebaliknya, ada NumericalValidationTriggerAction objek.

Catatan

Pemicu peristiwa tidak mendukung EnterActions dan ExitActions.

Implementasi tindakan pemicu harus:

  • Terapkan kelas generik TriggerAction<T> , dengan parameter generik yang sesuai dengan jenis kontrol yang akan diterapkan pemicu. Anda dapat menggunakan kelas seperti VisualElement untuk menulis tindakan pemicu yang berfungsi dengan berbagai kontrol, atau menentukan jenis kontrol seperti Entry.
  • Ambil alih metode Invoke. Metode ini dipanggil setiap kali peristiwa pemicu terjadi.
  • Secara opsional mengekspos properti yang dapat diatur di XAML saat pemicu dideklarasikan.

Contoh berikut menunjukkan NumericValidationTriggerAction kelas:

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

Peringatan

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.

Multi-pemicu

MultiTrigger mewakili pemicu yang menerapkan nilai properti, atau melakukan tindakan, saat serangkaian kondisi terpenuhi. Semua kondisi harus benar sebelum Setter objek diterapkan.

Contoh berikut menunjukkan MultiTrigger yang mengikat ke dua Entry objek:

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

Selain itu, MultiTrigger.Conditions koleksi juga dapat berisi PropertyCondition objek:

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

EnterActions dan ExitActions

Pendekatan alternatif untuk menerapkan perubahan ketika pemicu terjadi adalah dengan menentukan dan ExitActions mengumpulkanEnterActions, dan membuat TriggerAction<T> implementasi.

Koleksi EnterActions , jenis IList<TriggerAction>, mendefinisikan koleksi yang akan dipanggil saat kondisi pemicu terpenuhi. Koleksi ExitActions , jenis IList<TriggerAction>, mendefinisikan koleksi yang akan dipanggil setelah kondisi pemicu tidak lagi terpenuhi.

Catatan

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

Contoh berikut menunjukkan pemicu properti yang menentukan dan EnterActionExitAction:

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

Implementasi tindakan pemicu harus:

  • Terapkan kelas generik TriggerAction<T> , dengan parameter generik yang sesuai dengan jenis kontrol yang akan diterapkan pemicu. Anda dapat menggunakan kelas seperti VisualElement untuk menulis tindakan pemicu yang berfungsi dengan berbagai kontrol, atau menentukan jenis kontrol seperti Entry.
  • Ambil alih metode Invoke. Metode ini dipanggil setiap kali peristiwa pemicu terjadi.
  • Secara opsional mengekspos properti yang dapat diatur di XAML saat pemicu dideklarasikan.

Contoh berikut menunjukkan FadeTriggerAction kelas:

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

Catatan

Anda dapat menyediakan EnterActions dan ExitActions serta Setter objek dalam pemicu, tetapi ketahuilah bahwa Setter objek segera dipanggil (objek tidak menunggu EnterAction atau ExitAction selesai).

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, .NET MAUI 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 Status visual.

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 dinaikkan 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 dinaikkan, 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.

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.

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>
            </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, dan menjadi biru pucat di 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.