Temas em aplicativos de exemplo

Artigo
03/09/2022
2 minutos para o fim da leitura

O recurso mais atraente dos aplicativos de tela é a capacidade de personalizar a interface do usuário de acordo com a marca e preferência do usuário ou da organização. A estratégia de temas nos proporciona a capacidade de criar aplicativos que combinam com a marca organizacional. Um tema contém uma coleção de estilos que definem várias propriedades de design para controles e componentes, como cores, fontes e bordas.

Neste artigo, aprenderemos a usar variáveis globais para definir temas e como as cores e propriedades podem ser facilmente alteradas em todo o aplicativo, apenas atualizando as variáveis globais.

Assista a este vídeo para aprender os temas em aplicativos de exemplo:

Pré-requisitos

Para concluir esta lição, precisaremos da capacidade de criar aplicativos no Microsoft Teams que estarão disponíveis como parte da seleção de assinaturas do Microsoft 365. Você também precisará ter o aplicativo de exemplo Etapas para o Microsoft Teams instalado em sua Equipe. Você pode instalá-lo em sua equipe em https://aka.ms/TeamsMilestones.

Como definir a estratégia de temas

Neste exemplo, veremos como as variáveis globais foram usadas para definir cores e estilos para os temas no aplicativo Etapas. As seguintes variáveis globais foram definidas na propriedade OnVisible de Tela de carregamento.

gblAppColors para definir cores de forma que elas possam ser referenciadas com facilidade
gblAppSizes para definir diferentes tamanhos de fontes para aplicativos móveis e Web
gblAppStyles propriedades de cada controle usando gblAppColors
gblThemeDark definido como verdadeiro quando o tema do Teams estiver escuro para que todos os controles se adaptem ao tema escuro
gblThemeHiCo definido como verdadeiro quando o tema do Teams for de alto contraste para que todos os controles se adaptem ao alto contraste

Como testar a estratégia de temas

Duas telas ocultas foram definidas para testar a estratégia de temas:

Tela de Administração Oculta – essa tela tem dois botões de alternância definidos, tglAdmin_DarkMode e tglAdmin_ContrastMode. Essa tela ajuda com o teste rápido dos modos escuro e contraste sem ter que mudar o tema das equipes para testes
Tela de Controles Ocultos – essa tela tem todos os controles com propriedades definidas usando gblAppStyles.
- Ajuda no teste de alterações de tema.
- Ajuda a copiar um controle específico e colá-lo na tela necessária para que a fórmula do controle não precise ser digitada repetidamente.

Como usar as variáveis de tema para um aplicativo de exemplo

Para entender o uso de temas no aplicativo Etapas, selecione Tela Projetos no modo de exibição em árvore para abrir a tela e, em seguida, selecione +Novo Projeto.
Selecione a propriedade Cor de +Novo Projeto.

Observe que as referências da fórmula gblAppStyles > ButtonTransparent > Cor da propriedade OnVisible da tela de carregamento.

Agora, se o tema do aplicativo for Alto Contraste, a cor definida na fórmula gblAppColors > HighContrastHyperlinks será usada.
Outro exemplo seria examinar os botões Principal e Secundário.
- Selecione a Tela do Projeto no editor.
- Mantenha pressionada a tecla Alt e selecione o ícone Filtro na Tela Projetos.
  
  O pop-up Filtrar itens de trabalho é aberto. Observe os dois botões: Limpar e Aplicar.
  
  Aplicar é um exemplo de botão principal e Limpar é um exemplo de botão secundário.
Selecione o botão Aplicar e selecione qualquer propriedade relacionada à Borda/Espessura/Cor e observe a fórmula definida.
O botão Aplicar é definido como o botão Principal e usa todas as propriedades definidas na fórmula Tela de Carregamento > OnVisible > ButtonPrimary.

Dependendo do tema e das variáveis de cor selecionadas na fórmula ButtonPrimary, as propriedades de estilo do botão serão atualizadas.

De forma similar, Limpar é definido como um botão secundário e usa todas as propriedades definidas em gblAppStyles > ButtonSecondary.

Observação

Outra extensão possível para o aplicativo seria adicionar Fonte como uma Propriedade, como uma variável a ser usada em todos os controles ou uma vez por controle (como a forma como as outras propriedades de estilo são definidas separadamente para botões principais ou secundários). A fonte em todo o aplicativo Etapas é Segoe UI e não houve necessidade de identificação de temas da fonte.

Atualização do tema no aplicativo de exemplo

Nesta seção, veremos como podemos alterar uma propriedade de um controle específico e como o controle é atualizado em várias telas. Em nosso exemplo, nós atualizaremos a propriedade Fill do botão Principal e veremos como a cor do botão muda no modo Escuro e no modo Padrão.

Acesse a Tela de Carregamento e selecione a propriedade OnVisible no menu suspenso.
Expanda a barra de fórmulas e role para baixo até a função ButtonPrimary > Fill.
Atualize os dois últimos parâmetros para Red e DarkRed.
Vá para outra tela e, em seguida, volte para a Tela de Carregamento para que a função OnVisible seja executada.
Acesse a tela Projetos, selecione o botão Filtro para abrir o pop-up Filtro e observe que a cor do botão Aplicar agora é DarkRed.
Acesse a Tela de Administrador Oculta, mantenha pressionada a tecla Alt no teclado e selecione a alternância Modo Escuro Ativado.
Vá para a Tela de Carregamento novamente para que a função seja carregada e depois volte para a tela Projetos. Observe que a tela está agora no modo escuro (com o fundo escuro), e a cor do botão Aplicar mudou para Red.
Da mesma forma, alterar as propriedades do SecondaryButton teria mudado as cores do botão secundário, como o botão Limpar.

Observação

A atualização da função fill diretamente é uma maneira rápida de testar os temas, conforme mostrado anteriormente. Se a cor precisar ser alterada não apenas para o controle do Botão Principal, mas para todos os outros controles onde ela também está sendo usada, a paleta de cores sob a variável gblAppColors deverá ser atualizada com a fórmula das cores e nomes desejados que façam mais sentido para a sua organização. Por exemplo,companynameDefaultHeader: ColorValue("#30D5C8") seria a fórmula para o azul turquesa.

Consulte também

Observação

Você pode nos falar mais sobre suas preferências de idioma para documentação? Faça uma pesquisa rápida. (Observe que esta pesquisa está em inglês)

A pesquisa levará cerca de sete minutos. Nenhum dado pessoal é coletado (política de privacidade).