Recursos de AppTheme

Con AppThemeObject y AppThemeColor puede crear recursos compatibles con temas para la aplicación que se actualizan automáticamente cuando se actualiza el tema del dispositivo.

Los AppThemeObject objetos y AppThemeColor son recursos compatibles con temas que facilitan el trabajo con colores, imágenes y otros recursos que necesitan cambiar en función del tema actual de la aplicación. Estos objetos se basan en los conceptos de que AppThemeBinding está disponible en .NET MAUI y facilitan el trabajo con estos tipos de recursos en . ResourceDictionary

Por este motivo, normalmente debes usar estas API a través de la ThemeResource extensión de marcado en XAML.

Sintaxis

Incluir el espacio de nombres XAML

Para usar el kit de herramientas en XAML, es necesario agregar el siguiente xmlns a la página o vista:

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

Por lo tanto, el siguiente:

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

Se modificaría para incluir el xmlns de la siguiente manera:

<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 es un objeto genérico compatible con temas que permite establecer cualquiera object para las propiedades Light, Dark y Default. Dado que AppThemeObject no está fuertemente tipado, en tiempo de ejecución, los valores de cada propiedad se evaluarán y convertirán.

Advertencia

Si la conversión no es válida, esto podría dar lugar a una excepción en tiempo de ejecución.

El siguiente ejemplo muestra cómo utilizar AppThemeObject a través de un 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 es un tema Color especializado que permite establecer un Color para las propiedades Light, Dark y Default.

El siguiente ejemplo muestra cómo utilizar AppThemeColor a través de un 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>

Consumo de AppThemeColor y AppThemeResource a través de estilos

Dado que podemos usar estos recursos compatibles con temas en, ResourceDictionaryesto significa que también podemos consumirlos a través de Style.

El siguiente ejemplo muestra cómo utilizar AppThemeColor a través de un 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>

Extensibilidad

Tanto AppThemeObject como AppThemeColor heredan de la clase AppThemeObject<T>abstracta. Si necesita un recurso más fuertemente tipado que no esté disponible en .NET MAUI Community Toolkit, puede crear su propia herencia.

Propiedades

En la tabla siguiente se describen las propiedades de AppThemeObject y AppThemeColor. Para AppThemeColor, los tipos de cada propiedad serán Color en lugar de object.

Propiedad	Tipo	Descripción
Oscuro	object	Valor que se aplica a la propiedad a la que se aplica este recurso cuando la aplicación usa el tema oscuro.
Valor predeterminado	object	Valor que se aplica a la propiedad a la que se aplica este recurso cuando la aplicación usa el tema claro o oscuro y no hay ningún valor proporcionado para la propiedad correspondiente de ese tema.
Claro	object	Valor que se aplica a la propiedad a la que se aplica este recurso cuando la aplicación usa el tema claro.

Ejemplos

Puede encontrar un ejemplo de AppThemeResource en acción en la aplicación de ejemplo del Kit de herramienta de la comunidad de .NET MAUI.

API

Puede encontrar el código fuente de AppThemeResource en el repositorio de GitHub del Kit de herramientas de la comunidad de .NET MAUI.