Status visual

Artikel
02/25/2025

Visual State Manager .NET Multi-platform App UI (.NET MAUI) menyediakan cara terstruktur untuk membuat perubahan visual pada antarmuka pengguna dari kode. Dalam kebanyakan kasus, antarmuka pengguna aplikasi didefinisikan dalam XAML, dan XAML ini dapat menyertakan markup yang menjelaskan bagaimana Visual State Manager memengaruhi visual antarmuka pengguna.

Visual State Manager memperkenalkan konsep status visual. Tampilan MAUI .NET seperti Button dapat memiliki beberapa tampilan visual yang berbeda tergantung pada status yang mendasarinya — baik dinonaktifkan, atau ditekan, atau memiliki fokus input. Ini adalah status tombol. Status visual dikumpulkan dalam grup status visual. Semua status visual dalam grup status visual saling eksklusif. Status visual dan grup status visual diidentifikasi oleh string teks sederhana.

.NET MAUI Visual State Manager menentukan grup status visual bernama CommonStates dengan status visual berikut:

Normal
Nonaktif
Terfokus
Dipilih
PointerOver

Status Normalvisual , , DisabledFocused, dan PointerOver didukung pada semua kelas yang berasal dari VisualElement, yang merupakan kelas dasar untuk View dan Page. Selain itu, Anda juga dapat menentukan grup status visual dan status visual Anda sendiri.

Keuntungan menggunakan Visual State Manager untuk menentukan tampilan, daripada mengakses elemen visual langsung dari code-behind, adalah Anda dapat mengontrol bagaimana elemen visual bereaksi terhadap status yang berbeda sepenuhnya di XAML, yang menjaga semua desain UI di satu lokasi.

Catatan

Pemicu juga dapat membuat perubahan pada visual di antarmuka pengguna berdasarkan perubahan properti tampilan atau penembakan peristiwa. Namun, menggunakan pemicu untuk menangani berbagai kombinasi perubahan ini dapat menjadi membingungkan. Dengan Visual State Manager, status visual dalam grup status visual selalu saling eksklusif. Kapan saja, hanya satu status di setiap grup yang merupakan status saat ini.

Status visual umum

Visual State Manager memungkinkan Anda menyertakan markup dalam file XAML yang dapat mengubah tampilan visual tampilan jika tampilan normal, dinonaktifkan, memiliki fokus input, dipilih, atau kursor mouse mengarah ke atasnya tetapi tidak ditekan. Ini dikenal sebagai keadaan umum.

Misalnya, Anda memiliki Entry tampilan di halaman Anda, dan Anda ingin tampilan Entry visual berubah dengan cara berikut:

Entry harus memiliki latar belakang merah muda ketika dinonaktifkanEntry.
Seharusnya Entry memiliki latar belakang kapur secara normal.
Entry harus meluas ke dua kali tinggi normalnya ketika memiliki fokus input.
Entry harus memiliki latar belakang biru muda ketika memiliki kursor mouse melayang di atasnya tetapi tidak ditekan.

Anda dapat melampirkan markup Visual State Manager ke tampilan individual, atau Anda dapat menentukannya dalam gaya jika berlaku untuk beberapa tampilan.

Menentukan status visual pada tampilan

Kelas VisualStateManager menentukan VisualStateGroups properti terlampir, yang digunakan untuk melampirkan status visual ke tampilan. Properti VisualStateGroups berjenis VisualStateGroupList, yang merupakan kumpulan VisualStateGroup objek. Oleh karena itu, anak dari VisualStateManager.VisualStateGroups properti terlampir adalah VisualStateGroup objek. Objek ini mendefinisikan x:Name atribut yang menunjukkan nama grup. Atau, VisualStateGroup kelas menentukan Name properti yang dapat Anda gunakan sebagai gantinya. Untuk informasi selengkapnya tentang properti terlampir, lihat Properti terlampir.

Kelas VisualStateGroup mendefinisikan properti bernama States, yang merupakan kumpulan VisualState objek. States adalah properti konten kelas VisualStateGroups sehingga Anda dapat menyertakan VisualState objek sebagai turunan dari VisualStateGroup. Setiap VisualState objek harus diidentifikasi menggunakan x:Name atau Name.

Kelas VisualState mendefinisikan properti bernama Setters, yang merupakan kumpulan Setter objek. Ini adalah objek yang sama Setter dengan yang Anda gunakan dalam Style objek. Setters bukan properti VisualStatekonten , jadi perlu untuk menyertakan tag elemen properti untuk Setters properti . Setter objek harus dimasukkan sebagai turunan dari Setters. Setiap Setter objek menunjukkan nilai properti saat status tersebut saat ini. Properti apa pun yang Setter direferensikan oleh objek harus didukung oleh properti yang dapat diikat.

Penting

Agar objek status Setter visual berfungsi dengan benar, harus VisualStateGroup berisi VisualState objek untuk Normal status. Jika status visual ini tidak memiliki objek apa pun Setter , status visual harus disertakan sebagai status visual kosong (<VisualState Name="Normal" />).

Contoh berikut menunjukkan status visual yang Entryditentukan pada :

<Entry FontSize="18">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroupList>
            <VisualStateGroup Name="CommonStates">
                <VisualState Name="Normal">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="Lime" />
                    </VisualState.Setters>
                </VisualState>

                <VisualState Name="Focused">
                    <VisualState.Setters>
                        <Setter Property="FontSize" Value="36" />
                    </VisualState.Setters>
                </VisualState>

                <VisualState Name="Disabled">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="Pink" />
                    </VisualState.Setters>
                </VisualState>

                <VisualState Name="PointerOver">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="LightBlue" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </VisualStateManager.VisualStateGroups>
</Entry>

Cuplikan layar berikut menunjukkan Entry dalam empat status visual yang ditentukan:

Cuplikan layar dari tiga status visual yang ditentukan pada Entri.

Entry Ketika berada di negara bagianNormal, latar belakangnya adalah kapur. Entry Ketika input perolehan memfokuskan ukuran font-nya dua kali lipat. Ketika menjadi Entry dinonaktifkan, latar belakangnya menjadi merah muda. Entry tidak mempertahankan latar belakang kapurnya ketika mendapatkan fokus input. Ketika penunjuk mouse mengarah ke Entryatas , tetapi tidak ditekan, Entry latar belakang menjadi biru muda. Saat Visual State Manager beralih di antara status visual, properti yang diatur oleh status sebelumnya tidak diatur. Oleh karena itu, status visual saling eksklusif.

Jika Anda ingin Entry memiliki latar belakang kapur dalam Focused status , tambahkan yang lain Setter ke status visual tersebut:

<VisualState Name="Focused">
    <VisualState.Setters>
        <Setter Property="FontSize" Value="36" />
        <Setter Property="BackgroundColor" Value="Lime" />
    </VisualState.Setters>
</VisualState>

Menentukan status visual dalam gaya

Seringkali perlu untuk berbagi status visual yang sama dalam dua tampilan atau lebih. Dalam skenario ini, status visual dapat didefinisikan dalam Style. Ini dapat dicapai dengan menambahkan Setter objek untuk VisualStateManager.VisualStateGroups properti . Properti konten untuk Setter objek adalah propertinya Value , yang oleh karena itu dapat ditentukan sebagai turunan objek Setter . Properti VisualStateGroups berjenis VisualStateGroupList, sehingga anak dari Setter objek adalah VisualStateGroupList VisualStateGroup yang dapat ditambahkan yang berisi VisualState objek.

Contoh berikut menunjukkan gaya implisit untuk yang Entry menentukan status visual umum:

<Style TargetType="Entry">
    <Setter Property="FontSize" Value="18" />
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
            <VisualStateGroup Name="CommonStates">
                <VisualState Name="Normal">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="Lime" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState Name="Focused">
                    <VisualState.Setters>
                        <Setter Property="FontSize" Value="36" />
                        <Setter Property="BackgroundColor" Value="Lime" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState Name="Disabled">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="Pink" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState Name="PointerOver">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="LightBlue" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>

Ketika gaya ini disertakan dalam kamus sumber daya tingkat halaman, Style objek akan diterapkan ke semua Entry objek di halaman. Oleh karena itu, semua Entry objek di halaman akan merespons dengan cara yang sama dengan status visual mereka.

Status visual di .NET MAUI

Tabel berikut mencantumkan status visual yang ditentukan dalam .NET MAUI:

Kelas	Status	Informasi Selengkapnya
Button	`Pressed`	Status visual tombol
CarouselView	`DefaultItem`, , `CurrentItemPreviousItem`,`NextItem`	Status visual CarouselView
CheckBox	`IsChecked`	Status visual Kotak Centang
CollectionView	`Selected`	Status visual CollectionView
ImageButton	`Pressed`	Status visual ImageButton
RadioButton	`Checked`, `Unchecked`	Status visual RadioButton
Switch	`On`, `Off`	Mengalihkan status visual
VisualElement	`Normal`, , `DisabledFocused`,`PointerOver`	Status umum

Mengatur status pada beberapa elemen

Dalam contoh sebelumnya, status visual dilampirkan dan dioperasikan pada elemen tunggal. Namun, dimungkinkan juga untuk membuat status visual yang dilampirkan ke satu elemen, tetapi yang mengatur properti pada elemen lain dalam cakupan yang sama. Ini menghindari harus mengulangi status visual pada setiap elemen yang dioperasikan oleh status.

Setter Jenis memiliki TargetName properti, jenis string, yang mewakili objek target yang akan dimanipulasi Setter untuk status visual. TargetName Ketika properti didefinisikan, Setter set Property objek yang ditentukan ke TargetName Value:

<Setter TargetName="label"
        Property="Label.TextColor"
        Value="Red" />

Dalam contoh ini, nama Label label akan memiliki propertinya TextColor yang diatur ke Red. Saat mengatur TargetName properti, Anda harus menentukan jalur lengkap ke properti di Property. Oleh karena itu, untuk mengatur TextColor properti pada Label, Property ditentukan sebagai Label.TextColor.

Catatan

Properti apa pun yang Setter direferensikan oleh objek harus didukung oleh properti yang dapat diikat.

Contoh berikut menunjukkan cara mengatur status pada beberapa objek, dari satu grup status visual:

<StackLayout>
    <Label Text="What is the capital of France?" />
    <Entry x:Name="entry"
           Placeholder="Enter answer" />
    <Button Text="Reveal answer">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup Name="CommonStates">
                <VisualState Name="Normal" />
                <VisualState Name="Pressed">
                    <VisualState.Setters>
                        <Setter Property="Scale"
                                Value="0.8" />
                        <Setter TargetName="entry"
                                Property="Entry.Text"
                                Value="Paris" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Button>
</StackLayout>

Dalam contoh ini, status Normal aktif saat Button tidak ditekan, dan respons dapat dimasukkan ke Entrydalam . Status Pressed menjadi aktif ketika Button ditekan, dan menentukan bahwa propertinya Scale akan diubah dari nilai default 1 menjadi 0,8. Selain itu, yang Entry bernama entry akan memiliki propertinya Text diatur ke Paris. Oleh karena itu, hasilnya adalah bahwa ketika Button ditekan, diskalakan ulang menjadi sedikit lebih kecil, dan Entry menampilkan Paris:

Kemudian, ketika Button dirilis, itu diskalakan ulang ke nilai default 1, dan Entry menampilkan teks yang dimasukkan sebelumnya.

Penting

Jalur properti tidak didukung dalam Setter elemen yang menentukan TargetName properti .

Menentukan status visual kustom

Status visual kustom dapat diimplementasikan dengan mendefinisikannya karena Anda akan menentukan status visual untuk status umum, tetapi dengan nama yang Anda pilih, lalu memanggil VisualStateManager.GoToState metode untuk mengaktifkan status.

Contoh berikut menunjukkan cara menggunakan Visual State Manager untuk validasi input:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="VsmDemos.VsmValidationPage"
             Title="VSM Validation">
    <StackLayout x:Name="stackLayout"
                 Padding="10, 10">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup Name="ValidityStates">
                    <VisualState Name="Valid">
                        <VisualState.Setters>
                            <Setter TargetName="helpLabel"
                                    Property="Label.TextColor"
                                    Value="Transparent" />
                            <Setter TargetName="entry"
                                    Property="Entry.BackgroundColor"
                                    Value="Lime" />
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState Name="Invalid">
                        <VisualState.Setters>
                            <Setter TargetName="entry"
                                    Property="Entry.BackgroundColor"
                                    Value="Pink" />
                            <Setter TargetName="submitButton"
                                    Property="Button.IsEnabled"
                                    Value="False" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
        <Label Text="Enter a U.S. phone number:"
               FontSize="18" />
        <Entry x:Name="entry"
               Placeholder="555-555-5555"
               FontSize="18"
               Margin="30, 0, 0, 0"
               TextChanged="OnTextChanged" />
        <Label x:Name="helpLabel"
               Text="Phone number must be of the form 555-555-5555, and not begin with a 0 or 1" />
        <Button x:Name="submitButton"
                Text="Submit"
                FontSize="18"
                Margin="0, 20"
                VerticalOptions="Center"
                HorizontalOptions="Center" />
    </StackLayout>
</ContentPage>

Dalam contoh ini, status visual dilampirkan ke StackLayout, dan ada dua status yang saling eksklusif bernama Valid dan Invalid. Entry Jika tidak berisi nomor telepon yang valid, maka status saat ini adalah Invalid, sehingga Entry memiliki latar belakang merah muda, yang kedua Label terlihat, dan dinonaktifkanButton. Ketika nomor telepon yang valid dimasukkan, maka status saat ini menjadi Valid. mendapatkan Entry latar belakang kapur, yang kedua Label menghilang, dan Button sekarang diaktifkan:

Cuplikan layar contoh validasi status visual.

File code-behind bertanggung jawab untuk menangani TextChanged peristiwa dari Entry. Handler menggunakan ekspresi reguler untuk menentukan apakah string input valid atau tidak. Metode GoToState dalam file code-behind memanggil metode statis VisualStateManager.GoToState pada StackLayout objek:

public partial class VsmValidationPage : ContentPage
{
    public VsmValidationPage()
    {
        InitializeComponent();

        GoToState(false);
    }

    void OnTextChanged(object sender, TextChangedEventArgs args)
    {
        bool isValid = Regex.IsMatch(args.NewTextValue, @"^[2-9]\d{2}-\d{3}-\d{4}$");
        GoToState(isValid);
    }

    void GoToState(bool isValid)
    {
        string visualState = isValid ? "Valid" : "Invalid";
        VisualStateManager.GoToState(stackLayout, visualState);
    }
}

Dalam contoh ini, metode dipanggil GoToState dari konstruktor untuk menginisialisasi status. Harus selalu ada status saat ini. File code-behind kemudian memanggil VisualStateManager.GoToState, dengan nama status, pada objek yang menentukan status visual.

Pemicu status visual

Status visual mendukung pemicu status, yang merupakan 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:

Pemicu apa pun yang berasal dari StateTriggerBase.
Diaktifkan AdaptiveTrigger karena kondisi terpenuhi MinWindowWidth .
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.

Untuk informasi selengkapnya tentang pemicu status, lihat Pemicu status.

Bagikan melalui