WinForms: Como adicionar vários temas ao seu aplicativo

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.

1. Crie um novo aplicativo Windows Forms no Visual Studio.

2. No novo projeto, use a caixa de ferramentas para procurar um controle de botão.

3. Selecione o controle de botão e arraste-o para a tela. Adicione um total de três controles de botão.

4. Usando a caixa de ferramentas, clique e arraste um controle de rótulo para a tela. Coloque a etiqueta por baixo dos botões.

5. 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".

1. Adicione outro controle de botão à tela para representar o botão de configurações (ou "Temas").

2. Altere as propriedades deste botão para o seguinte:

   Nome da propriedade	Novo valor
   Nome	btnThemeSettings
   FlatStyle	Apartamento
   Tamanho	200, 120
   Texto	Temas

3. 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

4. Clique duas vezes no botão Temas. 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.

5. Por padrão, os temas "Light", "Nature" e "Dark" não estarão visíveis. Dentro da função, adicione a funcionalidade para alternar a visibilidade dos botões para mostrar ou ocultar.

   private void btnThemeSettings_Click(object sender, EventArgs e){    btnNatureTheme.Visible = !btnNatureTheme.Visible;    btnLightTheme.Visible = !btnLightTheme.Visible;    btnDarkTheme.Visible = !btnDarkTheme.Visible;}

6. Execute o aplicativo clicando no botão de reprodução verde na parte superior da janela do Visual Studio.

7. Em tempo de execução, o aplicativo ocultará os botões de cada um dos três temas por padrão.

8. Clique no botão Temas para alternar os temas a serem exibidos. Você pode continuar pressionando o botão Temas 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.

1. Na parte superior do arquivo C# padrão Form1.cs e dentro da classe Form, crie uma enumeração global. Este enum armazenará os diferentes tipos de cores que você usará em um tema.

   enum ThemeColor{    Primary,    Secondary,    Tertiary,    Text}  

2. 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 como usar um dicionário em C#.

   Dictionary<ThemeColor, Color> Light = new Dictionary<ThemeColor, Color>();Dictionary<ThemeColor, Color> Nature = new Dictionary<ThemeColor, Color>();Dictionary<ThemeColor, Color> Dark = new Dictionary<ThemeColor, Color>();

3. Dentro do construtor, inicialize os dicionários. Adicione valores para as diferentes cores que cada tema usará.

   public Form1(){    InitializeComponent();        Light = new Dictionary<ThemeColor, Color>() {        { ThemeColor.Primary, Color.WhiteSmoke },        { ThemeColor.Secondary, Color.Silver },        { ThemeColor.Tertiary, Color.White },        { ThemeColor.Text, Color.Black }    };    Nature = new Dictionary<ThemeColor, Color>() {        { ThemeColor.Primary, Color.DarkSeaGreen },        { ThemeColor.Secondary, Color.AliceBlue },        { ThemeColor.Tertiary, Color.Honeydew },        { ThemeColor.Text, Color.Black }    };    Dark = new Dictionary<ThemeColor, Color>() {        { ThemeColor.Primary, Color.DimGray },        { ThemeColor.Secondary, Color.DimGray },        { ThemeColor.Tertiary, Color.Black },        { ThemeColor.Text, Color.White }    };}

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.

1. Crie uma nova função chamada ChangeTheme(). A função receberá as cores de um tema como argumentos.

2. 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.

   private void ChangeTheme(Color primaryColor, Color secondaryColor, Color tertiaryColor){        btnThemeSettings.BackColor = primaryColor;    button1.BackColor = primaryColor;    button2.BackColor = secondaryColor;    button3.BackColor = secondaryColor;    this.BackColor = tertiaryColor;}

3. Crie uma nova função chamada ChangeTextColor(). 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.

   private void ChangeTextColor(Color textColor){    // Change color of text    button1.ForeColor = textColor;    button2.ForeColor = textColor;    button3.ForeColor = textColor;    label1.ForeColor = textColor;    btnThemeSettings.ForeColor = textColor;}

4. 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.

5. Dentro do manipulador de eventos, use as funções ChangeTheme() e ChangeTextColor(). Insira as cores que o tema está usando. Você pode recuperar essas cores do dicionário de temas "Light".

   private void btnLightTheme_Click(object sender, EventArgs e){    ChangeTheme(Light[ThemeColor.Primary], Light[ThemeColor.Secondary], Light[ThemeColor.Tertiary]);    ChangeTextColor(Light[ThemeColor.Text]);}

6. Volte para o designer e clique nos botões "Nature" e "Dark". Use as funções ChangeTheme() e ChangeTextColor() em seus manipuladores de eventos também.

   private void btnNatureTheme_Click(object sender, EventArgs e){    ChangeTheme(Nature[ThemeColor.Primary], Nature[ThemeColor.Secondary], Nature[ThemeColor.Tertiary]);    ChangeTextColor(Nature[ThemeColor.Text]);}private void btnDarkTheme_Click(object sender, EventArgs e){    ChangeTheme(Dark[ThemeColor.Primary], Dark[ThemeColor.Secondary], Dark[ThemeColor.Tertiary]);    ChangeTextColor(Dark[ThemeColor.Text]);}

7. 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 as funções ChangeTheme() e ChangeTextColor().

   ChangeTheme(Light[ThemeColor.Primary], Light[ThemeColor.Secondary], Light[ThemeColor.Tertiary]);ChangeTextColor(Light[ThemeColor.Text]);

8. Execute o aplicativo clicando no botão de reprodução verde na parte superior da janela do Visual Studio.

9. 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.

10. Clique no tema Natureza.

11. 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.