Os temas são uma ótima maneira de permitir que seus usuários personalizem seu aplicativo sem precisar se envolver muito em detalhes específicos.
É comum que aplicativos modernos tenham a opção de alternar entre diferentes temas. Por exemplo, alguns aplicativos permitem alternar entre um tema claro ou um tema escuro, enquanto outros podem ter mais opções de tema.
O Windows Forms é uma estrutura de interface do usuário que permite criar aplicativos de área de trabalho. Você pode implementar temas em um aplicativo de formulário do Windows criando botões selecionáveis para cada tema.
Quando o usuário seleciona um tema, você pode alterar a cor do plano de fundo ou as propriedades da cor do texto de cada elemento para corresponder ao tema selecionado.
Como configurar o projeto Windows Form
Primeiro, crie um novo aplicativo de formulário do Windows. Preencha o novo projeto com alguns controles básicos, como botões e rótulos.
- Crie um novo aplicativo Windows Forms no Visual Studio.
- No novo projeto, use a caixa de ferramentas para procurar um controle de botão.
- Selecione os botão de controle e arraste-o para a tela. Adicione um total de três controles de botão.
- Usando a caixa de ferramentas, clique e arraste um controle de rótulo na tela. Coloque a etiqueta por baixo dos botões.
- Estilize os botões e rótulos usando a janela de propriedades. Altere as propriedades para o seguinte:
Ao controle Nome da propriedade Novo valor botão1 Tamanho 580, 200 FlatStyle Apartamento Texto Usuários botão2 Tamanho 580, 100 FlatStyle Apartamento Texto Contas botão3 Tamanho 580, 100 FlatStyle Apartamento Texto Permissões rótulo1 Texto Direitos autorais 2022
Como criar o botão de configurações e a lista de temas
Para que um menu de temas simples funcione, crie vários botões para representar cada tema. O aplicativo incluirá três temas, um tema "Light", um tema "Nature" e um tema "Dark".
- Adicione outro controle de botão à tela para representar o botão de configurações (ou "Temas").
- Altere as propriedades deste botão para o seguinte:
Nome da propriedade Novo valor Nome btnThemeSettings FlatStyle Apartamento Tamanho 200, 120 Texto Temas - Arraste mais três botões para a tela. Esses botões representarão os três temas diferentes. Altere as propriedades de cada um dos botões para o seguinte:
Ao controle Nome da propriedade Novo valor 1º botão Nome btnLightTheme Cor de fundo Fumaça branca Tamanho 200, 80 FlatStyle Apartamento Texto Leve Visível Falso 2º botão Nome btnNatureTheme Cor de fundo DarkSeaGreen Tamanho 200, 80 FlatStyle Apartamento Texto Natureza Visível Falso 3º botão Nome btnDarkTheme Cor de fundo Cinza escuro ForeColor Branco Tamanho 200, 80 FlatStyle Apartamento Texto Escuro Visível Falso - Clique duas vezes no Temas botão. Isso criará um método para lidar com o evento “on click”. O método será executado quando o usuário clicar neste botão.
- Por padrão, os temas "Claro", "Natureza" e "Escuro" não estarão visíveis. Dentro da função, adicione a funcionalidade para alternar a visibilidade dos botões para mostrar ou ocultar.
privadovaziobtnThemeSettings_Click(remetente do objeto, EventArgs e)
{
btnNatureTheme. Visível = !btnNatureTheme. Visível;
btnLightTheme. Visível = !btnLightTheme. Visível;
btnDarkTheme. Visível = !btnDarkTheme. Visível;
} - Execute o aplicativo clicando no botão de reprodução verde na parte superior da janela do Visual Studio.
- Em tempo de execução, o aplicativo ocultará os botões de cada um dos três temas por padrão.
- Clique no Temas botão para alternar os temas a serem exibidos. Você pode continuar pressionando o botão Temas botão para alternar sua visibilidade.
Como gerenciar seus temas
Crie Dicionários para cada tema para armazenar as diferentes cores que ele usará. Isso é para que você armazene todas as cores do seu tema em um só lugar, caso precise usá-las várias vezes. Também facilita se você quiser atualizar um tema com novas cores no futuro.
- No topo do padrão Form1.cs arquivo C# e dentro do Forma class, crie um enum global. Este enum armazenará os diferentes tipos de cores que você usará em um tema.
enumerar TemaCor
{
Primário,
Secundário,
Terciário,
Texto
} - Abaixo, declare três Dicionários globais, um para cada um dos três temas. Você pode ler mais sobre Dicionários se não estiver familiarizado com o uso de um dicionário em c#.
Dicionário<TemaCor, Cor> Luz = novo Dicionário<TemaCor, Cor>();
Dicionário<TemaCor, Cor> Natureza = novo Dicionário<TemaCor, Cor>();
Dicionário<TemaCor, Cor> Escuro = novo dicionário<TemaCor, Cor>(); - Dentro do construtor, inicialize os dicionários. Adicione valores para as diferentes cores que cada tema usará.
público Formulário 1()
{
InitializeComponent();
// Adicione dicionários aqui
Luz = novo Dicionário<TemaCor, Cor>() {
{ TemaCor. Cor primária. Fumaça branca },
{ TemaCor. Secundário, Cor. Prata },
{ TemaCor. Terciário, Cor. Branco },
{ TemaCor. Cor do texto. Preto }
};
Natureza = novo Dicionário<TemaCor, Cor>() {
{ TemaCor. Cor primária. DarkSeaGreen },
{ TemaCor. Secundário, Cor. AliceBlue},
{ TemaCor. Terciário, Cor. Melada },
{ TemaCor. Cor do texto. Preto }
};
Escuro = novo dicionário<TemaCor, Cor>() {
{ TemaCor. Cor primária. DimGray },
{ TemaCor. Secundário, Cor. DimGray },
{ TemaCor. Terciário, Cor. Preto },
{ TemaCor. Cor do texto. Branco }
};
}
Como mudar o tema
Crie funções para gerenciar o tema do aplicativo. Essas funções alterarão a cor do plano de fundo ou a cor do texto dos elementos da interface do usuário na tela.
- Crie uma nova função chamada Mudar tema(). A função receberá as cores de um tema como argumentos.
- Dentro da função, altere as propriedades de cor de fundo dos elementos da interface do usuário. As novas cores de fundo usarão cores para o tema selecionado.
privadovazioMudar tema(Cor primáriaCor, Cor secundáriaCor, Cor terciáriaCor)
{
// Muda a cor de fundo dos botões
btnThemeSettings. BackColor = cor primária;
botão1.BackColor = cor primária;
botão2.BackColor = cor secundária;
botão3.BackColor = cor secundária;
isto.BackColor = terciáriaCor;
} - Crie uma nova função chamada AlterarTextColor(). Você pode usar isso para alterar a cor do texto entre escuro e claro. Isso é para garantir que o texto em um fundo escuro ainda seja legível.
privadovazioAlterarCor do Texto(Texto coloridoCor)
{
// Mudar cor dotexto
botão1.ForeColor = textColor;
botão2.ForeColor = textColor;
botão3.ForeColor = textColor;
label1.ForeColor = textColor;
btnThemeSettings. ForeColor = textColor;
} - Do designer, clique duas vezes no controle do botão "Light". Isso abrirá o arquivo code-behind e gerará um manipulador de eventos para quando o usuário clicar no botão.
- Dentro do manipulador de eventos, use o Mudar tema() e AlterarTextColor() funções. Insira as cores que o tema está usando. Você pode recuperar essas cores do dicionário de temas "Light".
privadovaziobtnLightTheme_Click(remetente do objeto, EventArgs e)
{
Mudar tema(Leve[TemaCor. Primário], Leve[TemaCor. Secundário], Leve[TemaCor. Terciário]);
AlterarCor do Texto(Leve[TemaCor. Texto]);
} - Volte para o designer e clique nos botões "Nature" e "Dark". Use o Mudar tema() e AlterarTextColor() funções em seus manipuladores de eventos também.
privadovaziobtnNatureTheme_Click(remetente do objeto, EventArgs e)
{
Mudar tema(Natureza[TemaCor. Primário], Natureza[TemaCor. Secundário], Natureza[TemaCor. Terciário]);
AlterarCor do Texto(Natureza[TemaCor. Texto]);
}
privadovaziobtnDarkTheme_Click(remetente do objeto, EventArgs e)
{
Mudar tema(Escuro[TemaCor. Primário], Escuro[TemaCor. Secundário], Escuro[TemaCor. Terciário]);
AlterarCor do Texto(Escuro[TemaCor. Texto]);
} - Por padrão, o tema deve ser definido para o tema "Light" quando o usuário abre o aplicativo pela primeira vez. No construtor, abaixo dos dicionários, use o Mudar tema() e AlterarTextColor() funções.
Mudar tema(Leve[TemaCor. Primário], Leve[TemaCor. Secundário], Leve[TemaCor. Terciário]);
AlterarCor do Texto(Leve[TemaCor. Texto]); - Execute o aplicativo clicando no botão de reprodução verde na parte superior da janela do Visual Studio.
- Por padrão, o aplicativo usa o tema "Light" e aplica o esquema de cores cinza aos controles da interface do usuário. Alterne o botão de temas para visualizar a lista de temas.
- Clique no tema Natureza.
- Clique no tema escuro.
Criando aplicativos usando Windows Forms
Muitos aplicativos permitem que o usuário alterne entre vários temas. Você pode adicionar temas a um aplicativo Windows Forms criando opções para o usuário selecionar.
Quando o usuário clica em um tema, você pode alterar a cor de fundo, o texto ou qualquer outra propriedade para corresponder às cores usadas no tema selecionado.
As cores de cada um dos temas usam as cores internas do Visual Studio. Você precisará usar um esquema de cores adequado para oferecer aos usuários uma experiência melhor. Você pode saber mais sobre as diferentes maneiras de escolher um esquema de cores para seu aplicativo.