Use temas modernos em aplicativos de tela (versão preliminar)
[Este artigo faz parte da documentação de pré-lançamento e está sujeito a alterações.]
Temas modernos, que são conjuntos de estilos pré-estabelecidos, podem transformar a aparência do seu aplicativo. Esses temas, baseados na linguagem de design Fluent da Microsoft, modificam vários aspectos de estilo, como cor, tipografia, bordas e sombras, garantindo uma interface visualmente agradável e consistente. Os temas modernos simplificam o processo de personalização, permitindo que os criadores projetem sem esforço um aplicativo com um apelo visual unificado e consistente.
Importante
- Este é um recurso em versão preliminar.
- Os recursos de versão preliminar não foram criados para uso em ambientes de produção e podem ter funcionalidade restrita. Esses recursos são disponibilizados antes de um lançamento oficial para que os clientes possam ter acesso antecipado e forneçam comentários.
Pré-requisitos
Para usar temas modernos, você precisa ativá-lo. Mais informações, consulte Habilitar controles e temas modernos para seu aplicativo.
Observação
Quando os controles e temas modernos estiverem ativados, você não poderá selecionar temas clássicos na barra de comandos. Para usar temas clássicos desativados , você deverá habilitar a configuração desativada Manter temas clássicos do aplicativo.
Criar um tema
Há vários temas prontos para uso disponíveis para estilizar seu aplicativo. Você também pode criar seu próprio tema para uma estética visual mais personalizada.
- No menu de criação do aplicativo, selecione >
Temas. - No painel Temas, selecione Adicionar um tema.
- Na caixa de diálogo Criar um tema, insira as seguintes informações:
- Nome do tema: o nome do tema deve ser exclusivo.
- Fonte: escolha a fonte padrão que os controles no aplicativo usarão quando o tema for aplicado.
- Cor semente: selecione a cor na qual deseja basear seu tema ou insira manualmente a representação Hex ou RGB da cor. O sistema gera uma paleta de 16 slots otimizada para acessibilidade.
- Matiz/Vibração: ajuste a paleta de geração, especialmente as cores mais claras, com os controles deslizantes Matiz e Vibração . O Matiz afeta a tonalidade da cor e a vibração afeta a suavidade ou o brilho da paleta.
- Opcionalmente, observe a visualização estática do novo tema. Você pode interagir com os controles de exemplo para ver como seu tema é aplicado ao estado de repouso e a vários estados de interação.
- Selecione Criar.
O novo tema será criado e aplicado ao seu aplicativo.
Aplicar o tema moderno
- No menu de criação do aplicativo, selecione > Temas.
- No painel Temas , selecione um dos temas padrão.
Quando um tema moderno é selecionado, o estilo do tema é aplicado automaticamente aos controles do aplicativo. Esta ação define a propriedade App.Theme.
Observação
Os temas modernos agora afetam os controles clássicos definindo propriedades nos controles clássicos com fórmulas do Power Fx que fazem referência a variáveis do tema moderno.
Editar um tema
Você pode editar o tema e alterar um ou mais parâmetros do tema personalizado.
- No menu de criação do aplicativo, selecione > Temas.
- No painel Temas , encontre o bloco correspondente ao tema que você deseja editar e selecione Opções > Editar.
- No painel Editar tema, ajuste o tema conforme necessário.
Observação
Não é possível editar os temas prontos para uso.
Excluir um tema
Se decidir que não precisa mais de um tema personalizado no seu aplicativo, você poderá excluí-lo.
- No menu de criação do aplicativo, selecione > Temas.
- No painel Temas, encontre o tema que deseja editar e selecione (...) Opções > Excluir.
- Na caixa de diálogo de confirmação, selecione Excluir tema.
Se você tiver alguma fórmula do Power Fx que faça referência a esse tema no seu aplicativo, será necessário atualizar a fórmula manualmente.
Observação
Não é possível excluir os temas prontos para uso.
Usar temas com o Power Fx
Objetos de tema modernos estão disponíveis para os criadores usarem através do Power Fx. O objeto de tema atualmente ativo pode ser referenciado por App.Theme, e qualquer tema carregado no aplicativo pode ser referenciado pelo nome de instância, como RedTheme. É recomendável que você faça referência ao objeto de tema usando App.Theme para garantir que as seleções de cores se adaptem às alterações do tema.
Cada objeto do tema inclui as seguintes informações:
- Name: o nome do tema.
- Colors: uma coleção das 16 cores que compõem a rampa da marca para o tema. Cada cor nesta rampa é acessível individualmente pelo nome.
A imagem mostra as variáveis de slot dentro da coleção Cores e, como exemplo, as cores correspondentes para o tema Aço.
Usando a rampa de marca do tema, você pode estilizar manualmente um controle clássico com base no tema moderno atual, como Button.Fill = App.Theme.Colors.Primary.
Observação
Para fornecer comentários, consulte: Forneça seus comentários à Microsoft.