Partilhar via

Responder a alterações de tema do sistema em Xamarin.Forms aplicativos

Os dispositivos normalmente incluem temas claros e escuros, cada um deles se refere a um amplo conjunto de preferências de aparência que podem ser definidas no nível do sistema operacional. Os aplicativos devem respeitar esses temas do sistema e responder imediatamente quando o tema do sistema for alterado.

O tema do sistema pode mudar por vários motivos, dependendo da configuração do dispositivo. Isso inclui o tema do sistema sendo explicitamente alterado pelo usuário, ele mudando devido à hora do dia e ele mudando devido a fatores ambientais, como pouca luz.

Xamarin.Forms Os aplicativos podem responder a alterações de tema do sistema consumindo recursos com a extensão de AppThemeBinding marcação e os SetAppThemeColor métodos de extensão And SetOnAppTheme<T> .

Os seguintes requisitos devem ser atendidos para Xamarin.Forms responder a uma mudança de tema do sistema:

  • Xamarin.Forms 4.6.0.967 ou superior.
  • iOS 13 ou superior.
  • Android 10 (API 29) ou superior.
  • UWP build 14393 ou superior.
  • macOS 10.14 ou superior.

As capturas de tela a seguir mostram páginas temáticas para temas de sistema claros e escuros no iOS e Android:

Captura de tela da página principal de um aplicativo temático, no iOS e AndroidCaptura de tela da página de detalhes de um aplicativo temático, no iOS e Android

Definir e consumir recursos de tema

Recursos de temas claros e escuros podem ser consumidos com a extensão de marcação AppThemeBinding e os métodos de extensão SetAppThemeColor e SetOnAppTheme<T>. Com essas abordagens, os recursos são aplicados automaticamente com base no valor do tema do sistema atual. Além disso, os objetos que consomem esses recursos são atualizados automaticamente se o tema do sistema for alterado durante a execução de um aplicativo.

Extensão de marcação AppThemeBinding

A AppThemeBinding extensão de marcação permite que você consuma um recurso, como uma imagem ou cor, com base no tema atual do 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>

Neste exemplo, a cor do texto do primeiro Label é definida como verde quando o dispositivo está usando seu tema claro e é definida como vermelho quando o dispositivo está usando seu tema escuro. Da mesma forma, o Image exibe um arquivo de imagem diferente com base no tema do sistema atual.

Além disso, os recursos definidos em um ResourceDictionary podem ser consumidos com a extensão de StaticResource marcação:

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

Neste exemplo, a cor da tela de fundo do Grid e o estilo do Button mudam com base no fato de o dispositivo estar usando seu tema claro ou escuro.

Para obter mais informações sobre a extensão de AppThemeBinding marcação, consulte Extensão de marcação AppThemeBinding.

Métodos de extensão

Xamarin.Forms inclui SetAppThemeColor e SetOnAppTheme<T> métodos de extensão que permitem VisualElement que os objetos respondam a alterações de tema do sistema.

O método SetAppThemeColor permite especificar objetos Color que serão definidos em uma propriedade de destino com base no tema do sistema atual:

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

Neste exemplo, a cor do texto do primeiro Label é definida como verde quando o dispositivo está usando seu tema claro e é definida como vermelho quando o dispositivo está usando seu tema escuro.

O método SetOnAppTheme<T> permite especificar objetos do tipo T que serão definidos em uma propriedade de destino com base no tema do sistema atual:

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

Neste exemplo, o Image exibe lightlogo.png quando o dispositivo está usando seu tema claro e darklogo.png quando o dispositivo está usando seu tema escuro.

Detectar o tema atual do sistema

O tema atual do sistema pode ser detectado obtendo o valor da propriedade Application.RequestedTheme:

OSAppTheme currentTheme = Application.Current.RequestedTheme;

A propriedade RequestedTheme retorna um membro da enumeração OSAppTheme. A enumeração OSAppTheme define os seguintes membros:

  • Unspecified, que indica que o dispositivo está usando um tema não especificado.
  • Light, o que indica que o dispositivo está usando seu tema claro.
  • Dark, o que indica que o dispositivo está usando seu tema escuro.

Definir o tema de usuário atual

O tema usado pelo aplicativo pode ser definido com a Application.UserAppTheme propriedade, que é do tipo OSAppTheme, independentemente de qual tema do sistema está operacional no momento:

Application.Current.UserAppTheme = OSAppTheme.Dark;

Neste exemplo, o aplicativo é definido para usar o tema definido para o modo escuro do sistema, independentemente de qual tema do sistema está operacional no momento.

Observação

Defina a propriedade UserAppTheme como OSAppTheme.Unspecified como padrão para o tema do sistema operacional.

Reagir às alterações de tema

O tema do sistema em um dispositivo pode mudar por vários motivos, dependendo de como o dispositivo está configurado. Xamarin.Forms Os aplicativos podem ser notificados quando o tema do sistema for alterado manipulando o Application.RequestedThemeChanged evento:

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

O objeto AppThemeChangedEventArgs, que acompanha o evento RequestedThemeChanged, tem apenas uma propriedade chamada RequestedTheme, do tipo OSAppTheme. Essa propriedade pode ser analisada para detectar o tema do sistema solicitado.

Importante

Para responder às alterações de tema no Android, você deve incluir o ConfigChanges.UiMode sinalizador no Activity atributo da sua MainActivity classe.

  • Last updated on