Recursos do AppTheme

Artigo
03/13/2024

Com AppThemeObject e AppThemeColor, você pode criar recursos com reconhecimento de tema para seu aplicativo que são atualizados automaticamente quando o tema do dispositivo é atualizado.

Os objetos AppThemeObject e AppThemeColor são recursos com reconhecimento de tema que facilitarão o trabalho com cores, imagens e outros recursos que precisam ser alterados dependendo do tema atual do aplicativo. Esses objetos se baseiam nos conceitos da AppThemeBinding que está disponível no .NET MAUI e facilitarão o trabalho com esses tipos de recursos em um ResourceDictionary.

Por isso, normalmente você deve usar essas APIs por meio da extensão de marcação ThemeResource no XAML.

Sintaxe

Incluir o namespace XAML

Para usar o kit de ferramentas no XAML, o xmlns a seguir precisa ser adicionado à sua página ou exibição:

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

Portanto, 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 conforme 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"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">

</ContentPage>

AppThemeResource

O AppThemeObject é um objeto genérico com reconhecimento de tema que permite definir qualquer object para as propriedades Light, Dark e Default. Como AppThemeObject não é fortemente tipado, os valores de cada propriedade serão avaliados e convertidos em runtime.

Aviso

Se a conversão for inválida, isso poderá resultar em uma exceção de runtime.

O seguinte exemplo mostra como usar AppThemeObject por meio 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

A AppThemeColor é uma Color especializada com reconhecimento de tema que permite definir uma Color para as propriedades Light, Dark e Default.

O seguinte exemplo mostra como usar AppThemeColor por meio 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>

Como consumir AppThemeColor e AppThemeResource por meio de estilos

Como podemos usar esses recursos com reconhecimento de tema em um ResourceDictionary, isso significa que também podemos consumi-los por meio de um Style.

O seguinte exemplo mostra como usar AppThemeColor por meio 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 quanto AppThemeColor herdam da classe abstrata AppThemeObject<T>. Se você precisar de um recurso mais fortemente tipado que não esteja disponível no Kit de Ferramentas da Comunidade do .NET MAUI, poderá criar uma herança própria.

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.

Propriedade	Type	Descrição
Escuro	`object`	O valor aplicado à propriedade à qual esse recurso é aplicado quando o aplicativo usa o tema escuro.
Padrão	`object`	O valor aplicado à propriedade à qual esse recurso é aplicado quando o aplicativo usa o tema claro ou escuro e não há nenhum valor fornecido para a propriedade correspondente desse tema.
Claro	`object`	O valor aplicado à propriedade à qual esse recurso é aplicado quando o aplicativo usa o tema claro.

Exemplos

Você pode encontrar um exemplo de AppThemeResource em ação no Aplicativo de exemplo do .NET MAUI Community Toolkit.

API

O código-fonte do AppThemeResource pode ser encontrado no repositório GitHub do .NET MAUI Community Toolkit.

Compartilhar via