Bagikan melalui

Tema aplikasi

  • Artikel

Telusuri sampel. Telusuri sampel

Aplikasi .NET Multi-platform App UI (.NET MAUI) dapat merespons perubahan gaya secara dinamis saat runtime dengan menggunakan DynamicResource ekstensi markup. Ekstensi markup ini mirip StaticResource dengan ekstensi markup, karena keduanya menggunakan kunci kamus untuk mengambil nilai dari ResourceDictionary. Namun, saat StaticResource ekstensi markup melakukan pencarian kamus tunggal, DynamicResource ekstensi markup mempertahankan tautan ke kunci kamus. Oleh karena itu, jika nilai yang terkait dengan kunci diganti, perubahan diterapkan ke VisualElement. Hal ini memungkinkan penetapan runtime diimplementasikan di aplikasi .NET MAUI.

Proses untuk menerapkan tema runtime di aplikasi .NET MAUI adalah sebagai berikut:

  1. Tentukan sumber daya untuk setiap tema dalam ResourceDictionary. Untuk informasi selengkapnya, lihat Menentukan tema.
  2. Atur tema default dalam file App.xaml aplikasi. Untuk informasi selengkapnya, lihat Mengatur tema default.
  3. Gunakan sumber daya tema di aplikasi, menggunakan DynamicResource ekstensi markup. Untuk informasi selengkapnya, lihat Menggunakan sumber daya tema.
  4. Tambahkan kode untuk memuat tema saat runtime. Untuk informasi selengkapnya, lihat Memuat tema saat runtime.

Penting

StaticResource Gunakan ekstensi markup jika aplikasi Anda tidak perlu mengubah tema secara dinamis saat runtime. Jika Anda mengantisipasi pengalihan tema saat aplikasi berjalan, gunakan DynamicResource ekstensi markup, yang memungkinkan sumber daya diperbarui saat runtime.

Cuplikan layar berikut menunjukkan halaman bertema, dengan aplikasi iOS menggunakan tema terang dan aplikasi Android menggunakan tema gelap:

Cuplikan layar halaman utama aplikasi bermasalah.

Catatan

Mengubah tema saat runtime memerlukan penggunaan definisi gaya XAML atau C#, dan tidak dimungkinkan menggunakan CSS.

.NET MAUI juga memiliki kemampuan untuk merespons perubahan tema sistem. Tema sistem dapat berubah karena berbagai alasan, tergantung pada konfigurasi perangkat. Ini termasuk tema sistem yang diubah secara eksplisit oleh pengguna, berubah karena waktu hari itu, dan berubah karena faktor lingkungan seperti cahaya rendah. Untuk informasi selengkapnya, lihat Merespons perubahan tema sistem.

Tentukan tema

Tema didefinisikan sebagai kumpulan objek sumber daya yang disimpan dalam ResourceDictionary.

Contoh berikut menunjukkan ResourceDictionary untuk tema ringan bernama LightTheme:

<ResourceDictionary xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                    x:Class="ThemingDemo.LightTheme">
    <Color x:Key="PageBackgroundColor">White</Color>
    <Color x:Key="NavigationBarColor">WhiteSmoke</Color>
    <Color x:Key="PrimaryColor">WhiteSmoke</Color>
    <Color x:Key="SecondaryColor">Black</Color>
    <Color x:Key="PrimaryTextColor">Black</Color>
    <Color x:Key="SecondaryTextColor">White</Color>
    <Color x:Key="TertiaryTextColor">Gray</Color>
    <Color x:Key="TransparentColor">Transparent</Color>
</ResourceDictionary>

Contoh berikut menunjukkan ResourceDictionary untuk tema gelap bernama DarkTheme:

<ResourceDictionary xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                    x:Class="ThemingDemo.DarkTheme">
    <Color x:Key="PageBackgroundColor">Black</Color>
    <Color x:Key="NavigationBarColor">Teal</Color>
    <Color x:Key="PrimaryColor">Teal</Color>
    <Color x:Key="SecondaryColor">White</Color>
    <Color x:Key="PrimaryTextColor">White</Color>
    <Color x:Key="SecondaryTextColor">White</Color>
    <Color x:Key="TertiaryTextColor">WhiteSmoke</Color>
    <Color x:Key="TransparentColor">Transparent</Color>
</ResourceDictionary>

Masing-masing ResourceDictionary berisi Color sumber daya yang menentukan tema masing-masing, dengan masing-masing ResourceDictionary menggunakan nilai kunci yang identik. Untuk informasi selengkapnya tentang kamus sumber daya, lihat Kamus Sumber Daya.

Penting

Kode di belakang file diperlukan untuk setiap ResourceDictionary, yang memanggil InitializeComponent metode . Ini diperlukan agar objek CLR yang mewakili tema yang dipilih dapat dibuat saat runtime.

Mengatur tema default

Aplikasi memerlukan tema default, sehingga kontrol memiliki nilai untuk sumber daya yang mereka gunakan. Tema default dapat diatur dengan menggabungkan tema ResourceDictionary ke dalam tingkat ResourceDictionary aplikasi yang ditentukan dalam App.xaml:

<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ThemingDemo.App">
    <Application.Resources>
        <ResourceDictionary Source="Themes/LightTheme.xaml" />
    </Application.Resources>
</Application>

Untuk informasi selengkapnya tentang menggabungkan kamus sumber daya, lihat Kamus sumber daya gabungan.

Mengonsumsi sumber daya tema

Saat aplikasi ingin menggunakan sumber daya yang disimpan dalam ResourceDictionary tema yang mewakili tema, aplikasi harus melakukannya dengan DynamicResource ekstensi markup. Ini memastikan bahwa jika tema yang berbeda dipilih pada runtime, nilai dari tema baru akan diterapkan.

Contoh berikut menunjukkan tiga gaya dari yang dapat diterapkan ke semua Label objek di aplikasi:

<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ThemingDemo.App">
    <Application.Resources>

        <Style x:Key="LargeLabelStyle"
               TargetType="Label">
            <Setter Property="TextColor"
                    Value="{DynamicResource SecondaryTextColor}" />
            <Setter Property="FontSize"
                    Value="30" />
        </Style>

        <Style x:Key="MediumLabelStyle"
               TargetType="Label">
            <Setter Property="TextColor"
                    Value="{DynamicResource PrimaryTextColor}" />
            <Setter Property="FontSize"
                    Value="25" />
        </Style>

        <Style x:Key="SmallLabelStyle"
               TargetType="Label">
            <Setter Property="TextColor"
                    Value="{DynamicResource TertiaryTextColor}" />
            <Setter Property="FontSize"
                    Value="15" />
        </Style>

    </Application.Resources>
</Application>

Gaya ini didefinisikan dalam kamus sumber daya tingkat aplikasi, sehingga dapat dikonsumsi oleh beberapa halaman. Setiap gaya menggunakan sumber daya tema dengan DynamicResource ekstensi markup.

Gaya ini kemudian digunakan oleh halaman:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:ThemingDemo"
             x:Class="ThemingDemo.UserSummaryPage"
             Title="User Summary"
             BackgroundColor="{DynamicResource PageBackgroundColor}">
    ...
    <ScrollView>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="200" />
                <RowDefinition Height="120" />
                <RowDefinition Height="70" />
            </Grid.RowDefinitions>
            <Grid BackgroundColor="{DynamicResource PrimaryColor}">
                <Label Text="Face-Palm Monkey"
                       VerticalOptions="Center"
                       Margin="15"
                       Style="{StaticResource MediumLabelStyle}" />
                ...
            </Grid>
            <StackLayout Grid.Row="1"
                         Margin="10">
                <Label Text="This monkey reacts appropriately to ridiculous assertions and actions."
                       Style="{StaticResource SmallLabelStyle}" />
                <Label Text="  &#x2022; Cynical but not unfriendly."
                       Style="{StaticResource SmallLabelStyle}" />
                <Label Text="  &#x2022; Seven varieties of grimaces."
                       Style="{StaticResource SmallLabelStyle}" />
                <Label Text="  &#x2022; Doesn't laugh at your jokes."
                       Style="{StaticResource SmallLabelStyle}" />
            </StackLayout>
            ...
        </Grid>
    </ScrollView>
</ContentPage>

Ketika sumber daya tema dikonsumsi secara langsung, sumber daya tersebut harus dikonsumsi dengan DynamicResource ekstensi markup. Namun, ketika gaya yang menggunakan ekstensi markup dikonsumsi DynamicResource , gaya tersebut harus digunakan dengan StaticResource ekstensi markup.

Untuk informasi selengkapnya tentang gaya, lihat Aplikasi gaya menggunakan XAML. Untuk informasi selengkapnya tentang DynamicResource ekstensi markup, lihat Gaya dinamis.

Memuat tema saat runtime

Saat tema dipilih saat runtime, aplikasi harus:

  1. Hapus tema saat ini dari aplikasi. Ini dicapai dengan menghapus MergedDictionaries properti tingkat ResourceDictionaryaplikasi .
  2. Muat tema yang dipilih. Ini dicapai dengan menambahkan instans tema yang dipilih ke MergedDictionaries properti tingkat ResourceDictionaryaplikasi .

Objek apa pun VisualElement yang mengatur properti dengan DynamicResource ekstensi markup kemudian akan menerapkan nilai tema baru. Ini terjadi karena DynamicResource ekstensi markup mempertahankan tautan ke kunci kamus. Oleh karena itu, ketika nilai yang terkait dengan kunci diganti, perubahan diterapkan ke VisualElement objek.

Dalam aplikasi sampel, tema dipilih melalui halaman modal yang berisi Picker. Kode berikut menunjukkan OnPickerSelectionChanged metode , yang dijalankan ketika tema yang dipilih berubah:

Contoh berikut menunjukkan penghapusan tema saat ini dan memuat tema baru:

ICollection<ResourceDictionary> mergedDictionaries = Application.Current.Resources.MergedDictionaries;
if (mergedDictionaries != null)
{
    mergedDictionaries.Clear();
    mergedDictionaries.Add(new DarkTheme());
}