Utilizar temas modernos em aplicações condicionadas por modelo

Os utilizadores de aplicações condicionadas por modelo com o visual moderno e redesenhado para aplicações condicionadas por modelo ativaram a experiência de estilo atualizado alinhado com o sistema de design do Microsoft Fluent 2. Como este visual moderno e atualizado vem com um novo sistema de temas, os temas clássicos não são honrados; no entanto, os criadores podem modificar as cores usadas pela aplicação para ajudar a alinhar com a sua marca organizacional para os utilizadores que ativaram o visual moderno e atualizado. Neste artigo, ficará a saber sobre as substituições de estilo disponíveis com o visual moderno e redesenhado e como as implementar na sua organização.

Modificar o tema da aplicação

[Este tópico é documentação de pré-lançamento e está sujeito a alterações.]

Com o visual moderno e atualizado ativado na aplicação, os criadores podem criar um tema personalizado que ajuda a alinhar-se com a marca corporativa organizacional. Com um tema personalizado, pode alterar o cabeçalho da aplicação, as ligações, as procuras, os botões primários, os indicadores ativos de separador, a seleção de linhas e os efeitos de pairar. O tema personalizado também permite alterar o tipo de letra usado na aplicação. Para isso, encapsula as informações de tema desejadas num recurso XML, usa uma definição de aplicação para apontar para este recurso Web e, em seguida, verifica se o novo tema moderno corresponde às suas expetativas.

Descrição geral do recurso XML do tema personalizado

O primeiro passo para criar um tema moderno personalizado é criar um ficheiro XML com os parâmetros de tema desejados, com um ou mais dos seguintes atributos definidos dentro de uma etiqueta CustomTheme.

• BasePaletteColor — A cor inicial (código HEX) usada como base para gerar uma paleta de cores de 16 ranhuras para o tema.
• LockPrimary — Um booleano que determina como a cor inicial selecionada é usada para gerar a paleta de cores de 16 ranhuras.
  • False (Predefinição): a paleta é otimizada para acessibilidade, mas não garante que a cor inicial aparecerá em qualquer ranhura da paleta gerada. Esta é a predefinição. Use o Gerador de temas Fluent para pré-visualizar a paleta gerada com base nas suas seleções para basePaletteColor, vibrancy e hueTorsion.
  • True: a cor inicial é colocada na ranhura primária (meio) da paleta. As cores restantes são geradas ao tornar as cores incrementalmente mais claras de um lado e mais escuras do outro lado. A paleta gerada poderá não cumprir os requisitos de acessibilidade da relação de contraste.
• Font — o tipo de letra para o seu tema personalizado. O tipo de letra que está a ser composto pelo tema personalizado depende da capacidade do browser e do computador de destino de mostrar esse tipo de letra.
• Vibrancy — Um parâmetro opcional que afeta o silêncio ou a luminosidade da paleta, especialmente as cores mais claras. Os valores permitidos estão entre -100 e 100, com um valor predefinido de 0. Esta opção só é aplicável quando lockPrimary="true".
• HueTorsion — Um parâmetro opcional que afeta a tonalidade, o sombreado ou o tom da paleta, especialmente as cores mais claras. Os valores permitidos estão entre -100 e 100, com um valor predefinido de 0. Esta opção só é aplicável quando lockPrimary="true".

Substituir a paleta

A substituição de ranhuras individuais na paleta de temas fornece ao criador o controlo total sobre as cores das ranhuras, o que é particularmente útil quando modificações adicionais são necessárias além dos parâmetros de tema padrão mencionados acima. Para substituir uma ranhura específica, atribua um valor à ranhura desejada pelo respetivo nome. Por exemplo, pode especificar o código HEX para darker70, primary ou lighter10 para adaptar a aparência precisamente à sua preferência. A definição de valores para todos as 16 ranhuras substitui completamente todas as opções de paleta descritas na secção anterior, o que permite um esquema de cores altamente personalizado e exclusivo.

Os nomes das ranhuras para a paleta do mais escuro para o mais claro são: darker70, darker60, …<>, darker10, primary, lighter10, lighter20, …, lighter80. Consulte o estruturador de temas Fluent para descobrir como estas ranhuras são geralmente usadas em controlos Fluent.

XML de exemplo para um tema personalizado

Como exemplo, este XML especifica um tema personalizado que é verde com um tipo de letra diferente.

<CustomTheme 
    basePaletteColor="#00FF00"
    vibrancy="0"
    hueTorsion="-50"
    font="'GreatVibes', cursive"
/>

Este XML especifica um tema personalizado usando o algoritmo de geração de paleta alternativa com uma substituição para uma única ranhura.

<CustomTheme 
    basePaletteColor="#00FF00"
    lockPrimary="false"
    font="'GreatVibes', cursive"

    lighter70="#FFFFFF"
/>

Modificar as cores do cabeçalho da aplicação

Os criadores podem personalizar o estilo do cabeçalho da aplicação para se desviar do tema da aplicação. Isto pode ser feito ao expandir o XML criado para o tema moderno personalizado com um ou mais dos seguintes atributos definidos dentro de uma etiqueta AppHeaderColors.

• Background – A cor de fundo do cabeçalho da aplicação. Este elemento tem de ser definido para que as alterações entrem em vigor.
• Foreground – A cor do texto do cabeçalho da aplicação. Se não for especificado, o sistema tenta calcular uma cor apropriada que tenha contraste suficiente com a cor de fundo fornecida.
• BackgroundHover – A cor de fundo dos botões no cabeçalho da aplicação quando paira sobre eles. Se não for especificado nenhum valor, o sistema calcula uma cor baseada na cor de fundo.
• ForegroundHover – A cor do texto dos botões no cabeçalho da aplicação quando paira sobre eles. Se nenhum valor for especificado, o sistema tentará calcular uma cor apropriada que tenha contraste suficiente com a cor backgroundHover.
• BackgroundPressed – A cor de fundo dos botões no cabeçalho da aplicação quando são pressionados. A lógica de predefinição é a mesma que backgroundHover.
• ForegroundPressed – A cor do texto dos botões no cabeçalho da aplicação quando são pressionados. A lógica de predefinição é a mesma que foregroundHover.
• BackgroundSelected – A cor de fundo dos botões no cabeçalho da aplicação quando são selecionados. A lógica de predefinição é a mesma que backgroundHover.
• ForegroundSelected – A cor do texto dos botões no cabeçalho da aplicação quando são selecionados. A lógica de predefinição é a mesma que backgroundHover.

Exemplo de XML para um tema moderno

Como exemplo, este XML expande o tema personalizado verde com um cabeçalho de aplicação preto. Para uma usabilidade ideal, recomendamos que especifique valores de cor diferentes para cada estado de interação.

<CustomTheme
    basePaletteColor="#00FF00"
    vibrancy="0"
    hueTorsion="-50"
    font="'GreatVibes', cursive"
>  
  <AppHeaderColors
    background="#000000" 
    foreground="#FFFFFF" 
    backgroundHover="#313131" 
    foregroundHover="#FFFFFF"
    backgroundPressed="#494949"
    foregroundPressed="#FFFFFF"
    backgroundSelected="#717171" 
    foregroundSelected="#FFFFFF"  
  />
</CustomTheme>

Criar um recurso web

1. Utilizando um texto ou editor XML, guarde o XML utilizado para criar o recurso web. Exemplo de XML para um tema moderno

2. Iniciar sessão no Power Apps.

3. Selecione Soluções no painel de navegação esquerdo e, em seguida, crie Nova solução.

4. Selecione Novo>Mais>Recurso Web.

5. Selecione Escolher ficheiro, procure e selecione o ficheiro de texto XML que criou anteriormente.

6. No painel de propriedade Novo recurso Web, introduza os seguintes valores:

   • Nome a apresentar: introduza um nome a apresentar, tal como Tema personalizado verde.
   • Name. Aceite o nome gerado automaticamente ou insira um nome exclusivo para o recurso Web.
   • Tipo: Dados (XML)

7. Selecione Guardar. Publica essa personalização com as etapas na próxima secção.

Aplicar o tema personalizado a aplicações no seu ambiente

Depois de selecionar as cores e criar o recurso Web, siga estes passos para ativar o estilo deste cabeçalho da aplicação para todas as aplicações do seu ambiente que tenham o Novo visual ativado.

1. Na solução que utilizou para criar o recurso web, selecione Adicionar existente>Mais>Definição.
2. Digite tema personalizado na caixa de Pesquisa, selecione Definição de tema personalizado, Seguinte e, em seguida, Adicionar.
3. Na solução, selecione Definição de tema personalizado e, em seguida, selecione Editar na barra de comando.
4. No painel de propriedades Editar Definição de tema personalizado à direita, selecione Novo valor de ambiente em Definir valor do ambiente e introduza o nome exclusivo do seu recurso Web criado anteriormente (observe a coluna Nome na solução para o nome exclusivo). Remova as aspas duplas e certifique-se de que adiciona o prefixo do editor para o recurso Web. Por exemplo, o nome pode aparecer como contoso_tema-personalizado-verde como neste exemplo.
5. Selecione Guardar.
6. Selecione Definições no painel Objetos à esquerda e, em seguida, selecione Publicar todas as personalizações na barra de comando. (Este comando aparece quando não há componentes da solução selecionados).

Aplicação condicionada por modelo personalizada a usar a amostra de tema verde expandida.

Verificar novas cores do cabeçalho da aplicação

Depois de publicar o seu tema personalizado, vai querer validar a aplicação do tema na aplicação para garantir que tudo aparece como espera.

Modificar apenas as cores do cabeçalho da aplicação

Os criadores podem escolher só personalizar o estilo do cabeçalho da aplicação para se desviar do tema da aplicação predefinido. Isto pode ser feito seguindo estes passos:

1. Crie um ficheiro XML com as suas várias seleções de cor, com um ou mais dos atributos da secção de substituições de cores do cabeçalho da aplicação definidos dentro de uma etiqueta AppHeaderColors.
2. Crie um recurso Web usando o mesmo processo descrito para temas personalizados, mas certifique-se de que dá ao recurso XML um nome a apresentar descritivo apropriado, como XML do cabeçalho Verde da aplicação.
3. Aplique cores de cabeçalho de aplicação personalizadas a aplicações no seu ambiente ao atribuir este recurso Web ao ambiente ou à aplicação na definição de Substituir a cor do cabeçalho da aplicação. Siga o passos de Aplicar temas personalizados ao seu ambiente, mas, em vez disso, use a definição Substituir a cor do cabeçalho da aplicação.

   Nota

   Qualquer configuração definida na definição Substituir a cor do cabeçalho da aplicação será ignorada se tiver sido definida a Definição personalizada do tema.

4. Verifique os elementos visuais personalizados do cabeçalho da aplicação, incluindo todos os estados dos botões, para garantir que tudo aparece como esperado e que há taxas de contraste suficientes para acessibilidade. Deverá verificar as seguintes opções de cores:
   • As cores pretendidas são mostradas para o cabeçalho da aplicação em repouso e para cada estado da interações com botões.
   • Existe um mínimo de um contraste de 4.5:1 entre as cores de foreground e de fundo para o estado em repouso e cada estado de interações com botões.

XML de exemplo para substituição da cor do cabeçalho da aplicação

Como exemplo, este XML especifica uma cor de fundo verde para o cabeçalho da aplicação com texto branco, com cores de fundo mais escuras para os vários estados de interações com botões. Para uma melhor usabilidade, recomendamos a especificação de valores de cor diferentes para cada estado.

<AppHeaderColors 
  background="#12783F"
  foreground="#FFFFFF" 
  backgroundHover="#165A31" 
  foregroundHover="#FFFFFF"
  backgroundPressed="#0F1C12"
  foregroundPressed="#FFFFFF"
  backgroundSelected="#153D23" 
  foregroundSelected="#FFFFFF"
/>

Com esta configuração, o cabeçalho da aplicação deve ter a seguinte aparência quando reproduzir a aplicação. Pode ser necessário atualizar o separador do browser para apresentar o tema.

Veja também

Temas clássicos

Visual moderno e redesenhado