Respuesta a los cambios en el tema del sistema en Xamarin.Forms las aplicaciones

Descargar ejemplo. Descarga del ejemplo

Los dispositivos suelen incluir temas claros y oscuros, que hacen referencia a un amplio conjunto de preferencias de apariencia que se pueden establecer en el nivel de sistema operativo. Las aplicaciones deben respetar estos temas del sistema y responder inmediatamente cuando cambia el tema del sistema.

El tema del sistema puede cambiar por diversos motivos, dependiendo de la configuración del dispositivo. Esto incluye que el usuario cambie explícitamente el tema del sistema, que cambia debido a la hora del día y que cambia debido a factores ambientales como la poca luz.

Xamarin.Forms Las aplicaciones pueden responder a los cambios en el tema del sistema mediante el consumo de recursos con la extensión AppThemeBinding de marcado y los SetAppThemeColor métodos de extensión y SetOnAppTheme<T> .

Se deben cumplir los siguientes requisitos para Xamarin.Forms responder a un cambio de tema del sistema:

  • Xamarin.Forms 4.6.0.967 o superior.
  • iOS 13 o superior.
  • Android 10 (API 29) o superior.
  • Compilación 14393 de UWP o superior.
  • macOS 10.14 o superior.

En las capturas de pantalla siguientes se muestran páginas temateadas para temas del sistema claros y oscuros en iOS y Android:

[! [Captura de pantalla de la página principal de una aplicación tema, en iOS y Android] (system-theme-changes-images/main-page-both-themes.png "Página principal de la aplicación tema".](system-theme-changes-images/main-page-both-themes-large.png#lightbox "Página principal de la aplicación tema") ! [Captura de pantalla de la página de detalles de una aplicación themed, en iOS y Android] (system-theme-changes-images/detail-page-both-themes.png "Página de detalles de la aplicación tema".

Definición y consumo de recursos de tema

Los recursos para temas claros y oscuros se pueden consumir con la extensión AppThemeBinding de marcado y los SetAppThemeColor métodos de extensión y SetOnAppTheme<T> . Con estos enfoques, los recursos se aplican automáticamente en función del valor del tema actual del sistema. Además, los objetos que consumen estos recursos se actualizan automáticamente si el tema del sistema cambia mientras se ejecuta una aplicación.

AppThemeBinding (extensión de marcado)

La extensión de marcado permite consumir un recurso, como una AppThemeBinding imagen o un color, en función del tema actual del sistema:

<ContentPage ...>
    <StackLayout Margin="20">
        <Label Text="This text is green in light mode, and red in dark mode."
               TextColor="{AppThemeBinding Light=Green, Dark=Red}" />
        <Image Source="{AppThemeBinding Light=lightlogo.png, Dark=darklogo.png}" />
    </StackLayout>
</ContentPage>

En este ejemplo, el color de texto del primero se establece en verde cuando el dispositivo usa su tema claro y se establece en rojo cuando el dispositivo usa su Label tema oscuro. De forma similar, Image muestra un archivo de imagen diferente basado en el tema actual del sistema.

Además, los recursos definidos en se ResourceDictionary pueden consumir con la extensión de StaticResource marcado:

<ContentPage ...>
    <ContentPage.Resources>

        <!-- Light colors -->
        <Color x:Key="LightPrimaryColor">WhiteSmoke</Color>
        <Color x:Key="LightSecondaryColor">Black</Color>

        <!-- Dark colors -->
        <Color x:Key="DarkPrimaryColor">Teal</Color>
        <Color x:Key="DarkSecondaryColor">White</Color>

        <Style x:Key="ButtonStyle"
               TargetType="Button">
            <Setter Property="BackgroundColor"
                    Value="{AppThemeBinding Light={StaticResource LightPrimaryColor}, Dark={StaticResource DarkPrimaryColor}}" />
            <Setter Property="TextColor"
                    Value="{AppThemeBinding Light={StaticResource LightSecondaryColor}, Dark={StaticResource DarkSecondaryColor}}" />
        </Style>

    </ContentPage.Resources>

    <Grid BackgroundColor="{AppThemeBinding Light={StaticResource LightPrimaryColor}, Dark={StaticResource DarkPrimaryColor}}">
      <Button Text="MORE INFO"
              Style="{StaticResource ButtonStyle}" />
    </Grid>    
</ContentPage>    

En este ejemplo, el color de fondo de y el estilo cambian en función de si el dispositivo usa su tema claro Grid Button o el tema oscuro.

Para obtener más información sobre la AppThemeBinding extensión de marcado, vea Extensión de marcado AppThemeBinding.

Métodos de extensión

Xamarin.Forms incluye SetAppThemeColor y SetOnAppTheme<T> métodos de extensión que permiten a los VisualElement objetos responder a los cambios de tema del sistema.

El método permite especificar objetos que se establecerán en una SetAppThemeColor propiedad de destino basada en el tema actual del Color sistema:

Label label = new Label();
label.SetAppThemeColor(Label.TextColorProperty, Color.Green, Color.Red);

En este ejemplo, el color de texto de se establece en verde cuando el dispositivo usa su tema claro y se establece en rojo cuando el dispositivo usa su Label tema oscuro.

El método permite especificar objetos de tipo que se establecerán en una propiedad SetOnAppTheme<T> de destino basada en el tema actual del T sistema:

Image image = new Image();
image.SetOnAppTheme<FileImageSource>(Image.SourceProperty, "lightlogo.png", "darklogo.png");

En este ejemplo, se muestra cuando el dispositivo usa su tema claro y cuando el Image dispositivo usa su tema lightlogo.png darklogo.png oscuro.

Detección del tema actual del sistema

El tema actual del sistema se puede detectar obteniendo el valor de la Application.RequestedTheme propiedad :

OSAppTheme currentTheme = Application.Current.RequestedTheme;

La RequestedTheme propiedad devuelve un miembro de OSAppTheme enumeración. La enumeración OSAppTheme define los miembros siguientes:

  • Unspecified, que indica que el dispositivo usa un tema no especificado.
  • Light, que indica que el dispositivo usa su tema claro.
  • Dark, que indica que el dispositivo usa su tema oscuro.

Establecer el tema de usuario actual

El tema utilizado por la aplicación se puede establecer con la propiedad , que es de tipo , independientemente del tema del sistema Application.UserAppTheme OSAppTheme que esté operativo actualmente:

Application.Current.UserAppTheme = OSAppTheme.Dark;

En este ejemplo, la aplicación se establece para usar el tema definido para el modo oscuro del sistema, independientemente del tema del sistema que esté operativo actualmente.

Nota

Establezca la UserAppTheme propiedad en en el valor predeterminado en el tema del sistema OSAppTheme.Unspecified operativo.

React cambios de tema

El tema del sistema en un dispositivo puede cambiar por diversos motivos, dependiendo de cómo esté configurado el dispositivo. Xamarin.Forms Se puede notificar a las aplicaciones cuando cambia el tema del sistema controlando el Application.RequestedThemeChanged evento:

Application.Current.RequestedThemeChanged += (s, a) =>
{
    // Respond to the theme change
};

El AppThemeChangedEventArgs objeto , que acompaña al evento , tiene una sola propiedad denominada , de tipo RequestedThemeChanged RequestedTheme OSAppTheme . Esta propiedad se puede examinar para detectar el tema del sistema solicitado.

Importante

Para responder a los cambios de tema en Android, debe incluir la ConfigChanges.UiMode marca en el atributo de la Activity MainActivity clase.