Partilhar via


Temas em C#

Todas as plataformas compatíveis com o .NET MAUI oferecem suporte para modos claros e escuros. É essencial levar isso em conta em designs de aplicativo para fornecer a melhor experiência para o usuário final. O pacote de marcação C# fornece a capacidade de definir valores de propriedade que serão alternados com base no tema atual dos sistemas (confira a documentação da Microsoft).

Há duas maneiras de definir valores de tema do aplicativo:

1. Em um determinado BindableObject

Ao criar a interface do usuário de um aplicativo com C#, é possível definir os valores para o modo claro e escuro com o método de extensão AppThemeBinding.

O exemplo a seguir mostra como criar um Label com o seguinte:

  1. Defina a propriedade Text para exibir "Modo claro" quando o sistema estiver no modo claro e "Modo Escuro" quando o aplicativo estiver no modo escuro.
  2. Defina a propriedade TextColor como Colors.Black quando o sistema estiver no modo claro, e Colors.White quando o aplicativo estiver no modo escuro.
new Label()
    .AppThemeBinding(Label.TextProperty, "Light Mode", "Dark Mode")
    .AppThemeColorBinding(Label.TextColorProperty, Colors.Black, Colors.White);

2. Em um Style

Normalmente, é recomendável criar um Style que possa se aplicar a várias instâncias de um controle e, portanto, simplificar o código necessário para criar a interface do usuário de um aplicativo. Para essa finalidade, há métodos AppThemeBinding disponíveis na classe Style<T>.

O exemplo a seguir mostra como criar um Style para um Label com o mesmo comportamento do exemplo anterior:

  1. Defina a propriedade Text para exibir "Modo claro" quando o sistema estiver no modo claro e "Modo escuro" quando o aplicativo estiver no modo escuro.
  2. Defina a propriedade TextColor como Colors.Black quando o sistema estiver no modo claro, e Colors.White quando o aplicativo estiver no modo escuro.
var labelStyle = new Style<Label>()
    .AddAppThemeBinding(Label.TextProperty, "Light Mode", "Dark Mode")
    .AddAppThemeBinding(Label.TextColorProperty, Colors.Black, Colors.White);

new Label
{
    Style = labelStyle
};