Sumber Daya AppTheme

Dengan AppThemeObject dan AppThemeColor Anda dapat membuat sumber daya sadar tema untuk aplikasi Anda yang secara otomatis diperbarui saat tema perangkat diperbarui.

Objek AppThemeObject dan AppThemeColor adalah sumber daya sadar tema yang akan membuatnya lebih mudah untuk bekerja dengan warna, gambar, dan sumber daya lain yang perlu berubah tergantung pada tema aplikasi saat ini. Objek-objek ini dibangun berdasarkan konsep AppThemeBinding yang tersedia di .NET MAUI, dan akan membuatnya lebih mudah untuk bekerja dengan jenis sumber daya ini dalam ResourceDictionary.

Karena itu, Anda biasanya harus menggunakan API ini melalui ThemeResource ekstensi markup di XAML.

Sintaks

Menyertakan namespace XAML

Untuk menggunakan toolkit di XAML, hal berikut xmlns perlu ditambahkan ke halaman atau tampilan Anda:

xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"

Oleh karena itu hal-hal berikut:

<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

</ContentPage>

Akan dimodifikasi untuk menyertakan xmlns sebagai berikut:

<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">

</ContentPage>

AppThemeResource

AppThemeObject adalah objek generik yang mendukung tema dan memungkinkan Anda menetapkan object apa pun untuk properti Light, Dark, dan Default. Karena AppThemeObject tidak diketik dengan kuat, pada runtime nilai untuk setiap properti akan dievaluasi dan ditransmisikan.

Peringatan

Jika cast tidak valid, ini mungkin mengakibatkan pengecualian runtime.

Contoh berikut menunjukkan cara menggunakan AppThemeObject melalui ResourceDictionary:

<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">
    <ContentPage.Resources>
        <toolkit:AppThemeObject Light="dark.png" Dark="light.png" x:Key="MyImageSource" />
    </ContentPage.Resources>

    <VerticalStackLayout>
        <Image Source="{toolkit:AppThemeResource MyImageSource}" />
    </VerticalStackLayout>
</ContentPage>

AppThemeColor

AppThemeColor adalah Color khusus yang mendukung tema dan memungkinkan Anda menetapkan Color untuk properti Light, Dark, dan Default.

Contoh berikut menunjukkan cara menggunakan AppThemeColor melalui ResourceDictionary:

<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">
    <ContentPage.Resources>
        <toolkit:AppThemeColor Light="Red" Dark="Green" x:Key="LabelTextColor" />
    </ContentPage.Resources>

    <VerticalStackLayout>
        <Label TextColor="{toolkit:AppThemeResource LabelTextColor}" />
    </VerticalStackLayout>
</ContentPage>

Mengkonsumsi AppThemeColor dan AppThemeResource Melalui Gaya

Karena kita dapat menggunakan sumber daya yang peka terhadap tema ini dalam ResourceDictionary, artinya kita juga dapat mengaksesnya melalui Style.

Contoh berikut menunjukkan cara menggunakan AppThemeColor melalui Style:

<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">
    <ContentPage.Resources>
        <toolkit:AppThemeColor Light="Red" Dark="Green" x:Key="LabelTextColor" />

        <Style x:Key="Headline" TargetType="Label">
            <Setter Property="FontFamily" Value="Segoe UI" />
            <Setter Property="FontSize" Value="10" />
            <Setter Property="TextColor" Value="{toolkit:AppThemeResource LabelTextColor}" />
        </Style>
    </ContentPage.Resources>

    <VerticalStackLayout>
        <Label Style="{StaticResource Headline}" />
    </VerticalStackLayout>
</ContentPage>

Ekstensibilitas

Baik AppThemeObject maupun AppThemeColor merupakan turunan dari kelas abstrak AppThemeObject<T>. Jika Anda memiliki kebutuhan akan sumber daya yang lebih kuat yang diketik yang tidak tersedia di Toolkit Komunitas .NET MAUI, Anda dapat membuat warisan Anda sendiri.

Properti

Tabel di bawah ini menjelaskan properti untuk AppThemeObject dan AppThemeColor. Untuk AppThemeColor, jenis setiap properti akan menjadi Color alih-alih object.

Properti	Tipe	Deskripsi
Gelap	object	Nilai yang diterapkan ke properti tempat sumber daya ini diterapkan saat aplikasi menggunakan tema gelap.
Bawaan	object	Nilai yang diterapkan pada properti yang menggunakan sumber daya ini saat aplikasi menggunakan tema terang atau gelap dan tidak ada nilai yang disediakan untuk properti terkait pada tema tersebut.
Terang	object	Nilai yang diterapkan ke properti tempat sumber daya ini diterapkan saat aplikasi menggunakan tema cahaya.

Contoh

Anda dapat menemukan contoh penggunaan AppThemeResource di Aplikasi Sampel .NET MAUI Community Toolkit.

API

Anda dapat menemukan kode sumber untuk AppThemeResource di repositori GitHub .NET MAUI Community Toolkit.