Recursos do AppTheme

Com AppThemeObject e AppThemeColor podes criar recursos conscientes do tema para a tua aplicação que se atualizam automaticamente quando o tema do dispositivo é atualizado.

Os objetos AppThemeObject e AppThemeColor são recursos adaptados ao tema que tornam mais fácil trabalhar com cores, imagens e outros recursos que precisam de mudar consoante o tema atual da aplicação. Estes objetos baseiam-se nos conceitos do AppThemeBinding disponível em .NET MAUI, e facilitarão o trabalho com este tipo de recursos num ResourceDictionary.

Por isso, normalmente deves usar estas APIs através da ThemeResource extensão de marcação em XAML.

Syntax

Incluindo o namespace XAML

Para usar o kit de ferramentas em XAML, a seguinte xmlns precisa ser adicionada à sua página ou vista.

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

Por conseguinte, o seguinte:

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

Seria modificado para incluir o xmlns da seguinte forma:

<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

O AppThemeObject é um objeto genérico sensível ao tema que lhe permite definir qualquer object para as propriedades Light, Dark e Default. Como AppThemeObject não é fortemente tipada, em tempo de execução os valores de cada propriedade serão avaliados e lançados.

O exemplo seguinte mostra como usar AppThemeObject através de um 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

O AppThemeColor é um Color especializado e sensível ao tema que lhe permite definir um Color para as propriedades Light, Dark e Default.

O exemplo seguinte mostra como usar AppThemeColor através de um 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>

Consumir AppThemeColor e AppThemeResource através de estilos

Como podemos usar estes recursos sensíveis ao tema num ResourceDictionary, isso significa que também podemos utilizá-los através de um Style.

O exemplo seguinte mostra como usar AppThemeColor através de um 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>

Extensibilidade

Tanto AppThemeObject como AppThemeColor herdam da classe AppThemeObject<T>abstrata . Se precisar de um recurso com tipagem mais forte que não esteja disponível no .NET MAUI Community Toolkit, pode criar a sua própria derivação.

Propriedades

A tabela abaixo descreve as propriedades para AppThemeObject e AppThemeColor. Para AppThemeColor, os tipos de cada propriedade serão Color em vez de object.

Exemplos

Pode encontrar um exemplo de AppThemeResource em ação na Amostra de Aplicação do .NET MAUI Community Toolkit.

API

Você pode encontrar o código-fonte para AppThemeResource no repositório GitHub do .NET MAUI Community Toolkit.