Risorse AppTheme

Articolo
11/11/2023

Con AppThemeObject e AppThemeColor è possibile creare risorse con riconoscimento del tema per l'applicazione che vengono aggiornate automaticamente quando il tema del dispositivo viene aggiornato.

Gli AppThemeObject oggetti e AppThemeColor sono risorse con riconoscimento del tema che semplificano l'uso di colori, immagini e altre risorse che devono cambiare a seconda del tema corrente dell'app. Questi oggetti si basano sui concetti di AppThemeBinding disponibili in .NET MAUI e semplificano l'uso di questi tipi di risorse in un oggetto ResourceDictionary.

Per questo motivo, devi in genere usare queste API tramite l'estensione ThemeResource di markup in XAML.

Sintassi

Inclusione dello spazio dei nomi XAML

Per usare il toolkit in XAML, è necessario aggiungere le informazioni seguenti xmlns nella pagina o nella visualizzazione:

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

Di conseguenza:

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

Verrà modificato in modo da includere l'oggetto xmlns come indicato di seguito:

<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 è un oggetto generico compatibile con il tema che consente di impostare qualsiasi object oggetto per le Lightproprietà e Dark Default . Poiché AppThemeObject non è fortemente tipizzato, in fase di esecuzione i valori per ogni proprietà verranno valutati e sottoposto a cast.

Avviso

Se il cast non è valido, potrebbe verificarsi un'eccezione di runtime.

L'esempio seguente illustra come usare AppThemeObject tramite un oggetto 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 è un tema Color specializzato che consente di impostare un Color oggetto per le Lightproprietà , Dark e Default .

L'esempio seguente illustra come usare AppThemeColor tramite un oggetto 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>

Utilizzo di AppThemeColor e AppThemeResource tramite stili

Poiché è possibile usare queste risorse con riconoscimento del tema in un ResourceDictionaryoggetto , ciò significa che è anche possibile utilizzarle tramite un oggetto Style.

L'esempio seguente illustra come usare AppThemeColor tramite un oggetto 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>

Estendibilità

Sia AppThemeObject che AppThemeColor ereditano dalla classe AppThemeObject<T>astratta . Se è necessaria una risorsa più fortemente tipizzata che non è disponibile in .NET MAUI Community Toolkit, è possibile creare un'ereditarietà personalizzata.

Proprietà

Nella tabella seguente vengono descritte le proprietà per AppThemeObject e AppThemeColor. Per AppThemeColor, i tipi di ogni proprietà saranno Color invece di object.

Proprietà	Type	Descrizione
Scuro	`object`	Valore applicato alla proprietà a cui viene applicata questa risorsa quando l'app usa il tema scuro.
Predefiniti	`object`	Valore applicato alla proprietà a cui viene applicata questa risorsa quando l'app usa il tema chiaro o scuro e non è disponibile alcun valore per la proprietà corrispondente del tema.
Leggero	`object`	Valore applicato alla proprietà a cui viene applicata questa risorsa quando l'app usa il tema chiaro.

Esempi

È possibile trovare un esempio di AppThemeResource in azione nell'applicazione di esempio .NET MAUI Community Toolkit.

API

È possibile trovare il codice sorgente per AppThemeResource over nel repository GitHub di .NET MAUI Community Toolkit.

Condividi tramite