{"id":272147,"date":"2023-02-14T12:09:00","date_gmt":"2023-02-14T09:09:00","guid":{"rendered":"https:\/\/howto.mediadoma.com\/?p=272147"},"modified":"2025-03-14T10:30:47","modified_gmt":"2025-03-14T07:30:47","slug":"winforms-como-adicionar-varios-temas-ao-seu-aplicativo","status":"publish","type":"post","link":"https:\/\/howto.mediadoma.com\/pt-pt\/winforms-como-adicionar-varios-temas-ao-seu-aplicativo\/","title":{"rendered":"WinForms: Como adicionar v\u00e1rios temas ao seu aplicativo"},"content":{"rendered":"

Os temas s\u00e3o uma \u00f3tima maneira de permitir que seus usu\u00e1rios personalizem seu aplicativo sem precisar se envolver muito em detalhes espec\u00edficos.<\/p>\n

\u00c9 comum que aplicativos modernos tenham a op\u00e7\u00e3o 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\u00e7\u00f5es de tema.<\/p>\n

O Windows Forms \u00e9 uma estrutura de interface do usu\u00e1rio que permite criar aplicativos de \u00e1rea de trabalho. Voc\u00ea pode implementar temas em um aplicativo de formul\u00e1rio do Windows criando bot\u00f5es selecion\u00e1veis \u200b\u200bpara cada tema.<\/p>\n

Quando o usu\u00e1rio seleciona um tema, voc\u00ea pode alterar a cor do plano de fundo ou as propriedades da cor do texto de cada elemento para corresponder ao tema selecionado.<\/p>\n

Como configurar o projeto Windows Form<\/h2>\n

Primeiro, crie um novo aplicativo de formul\u00e1rio do Windows. Preencha o novo projeto com alguns controles b\u00e1sicos, como bot\u00f5es e r\u00f3tulos.<\/p>\n

    \n
  1. \n

    Crie um novo aplicativo Windows Forms<\/a> no Visual Studio.<\/p>\n<\/li>\n

  2. \n

    No novo projeto, use a caixa de ferramentas para procurar um controle de bot\u00e3o.<\/p>\n

    \"WinForms:<\/a>\n<\/li>\n

  3. \n

    Selecione o controle de bot\u00e3o<\/strong> e arraste-o para a tela. Adicione um total de tr\u00eas controles de bot\u00e3o.<\/p>\n

    \"WinForms:<\/a>\n<\/li>\n

  4. \n

    Usando a caixa de ferramentas, clique e arraste um controle de r\u00f3tulo<\/strong> para a tela. Coloque a etiqueta por baixo dos bot\u00f5es.<\/p>\n

    \"WinForms:<\/a>\n<\/li>\n

  5. \n

    Estilize os bot\u00f5es e r\u00f3tulos usando a janela de propriedades. Altere as propriedades para o seguinte:<\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Ao controle<\/th>\nNome da propriedade<\/th>\nNovo valor<\/th>\n<\/tr>\n<\/thead>\n
    bot\u00e3o1<\/strong><\/td>\nTamanho<\/td>\n580, 200<\/td>\n<\/tr>\n
    FlatStyle<\/td>\nApartamento<\/td>\n<\/tr>\n
    Texto<\/td>\nUsu\u00e1rios<\/td>\n<\/tr>\n
    bot\u00e3o2<\/strong><\/td>\nTamanho<\/td>\n580, 100<\/td>\n<\/tr>\n
    FlatStyle<\/td>\nApartamento<\/td>\n<\/tr>\n
    Texto<\/td>\nContas<\/td>\n<\/tr>\n
    bot\u00e3o3<\/strong><\/td>\nTamanho<\/td>\n580, 100<\/td>\n<\/tr>\n
    FlatStyle<\/td>\nApartamento<\/td>\n<\/tr>\n
    Texto<\/td>\nPermiss\u00f5es<\/td>\n<\/tr>\n
    r\u00f3tulo1<\/strong><\/td>\nTexto<\/td>\nDireitos autorais 2022<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

    \"WinForms:<\/a>\n<\/li>\n<\/ol>\n

    Como criar o bot\u00e3o de configura\u00e7\u00f5es e a lista de temas<\/h2>\n

    Para que um menu de temas simples funcione, crie v\u00e1rios bot\u00f5es para representar cada tema. O aplicativo incluir\u00e1 tr\u00eas temas, um tema "Light", um tema "Nature" e um tema "Dark".<\/p>\n

      \n
    1. \n

      Adicione outro controle de bot\u00e3o \u00e0 tela para representar o bot\u00e3o de configura\u00e7\u00f5es (ou "Temas").<\/p>\n<\/li>\n

    2. \n

      Altere as propriedades deste bot\u00e3o para o seguinte:<\/p>\n\n\n\n\n\n\n\n\n
      Nome da propriedade<\/th>\nNovo valor<\/th>\n<\/tr>\n<\/thead>\n
      Nome<\/td>\nbtnThemeSettings<\/td>\n<\/tr>\n
      FlatStyle<\/td>\nApartamento<\/td>\n<\/tr>\n
      Tamanho<\/td>\n200, 120<\/td>\n<\/tr>\n
      Texto<\/td>\nTemas<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

      \"WinForms:<\/a>\n<\/li>\n

    3. \n

      Arraste mais tr\u00eas bot\u00f5es para a tela. Esses bot\u00f5es representar\u00e3o os tr\u00eas temas diferentes. Altere as propriedades de cada um dos bot\u00f5es para o seguinte:<\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      Ao controle<\/th>\nNome da propriedade<\/th>\nNovo valor<\/th>\n<\/tr>\n<\/thead>\n
      1\u00ba bot\u00e3o<\/strong><\/td>\nNome<\/td>\nbtnLightTheme<\/td>\n<\/tr>\n
      Cor de fundo<\/td>\nFuma\u00e7a branca<\/td>\n<\/tr>\n
      Tamanho<\/td>\n200, 80<\/td>\n<\/tr>\n
      FlatStyle<\/td>\nApartamento<\/td>\n<\/tr>\n
      Texto<\/td>\nLeve<\/td>\n<\/tr>\n
      Vis\u00edvel<\/td>\nFalso<\/td>\n<\/tr>\n
      2\u00ba bot\u00e3o<\/strong><\/td>\nNome<\/td>\nbtnNatureTheme<\/td>\n<\/tr>\n
      Cor de fundo<\/td>\nDarkSeaGreen<\/td>\n<\/tr>\n
      Tamanho<\/td>\n200, 80<\/td>\n<\/tr>\n
      FlatStyle<\/td>\nApartamento<\/td>\n<\/tr>\n
      Texto<\/td>\nNatureza<\/td>\n<\/tr>\n
      Vis\u00edvel<\/td>\nFalso<\/td>\n<\/tr>\n
      3\u00ba bot\u00e3o<\/strong><\/td>\nNome<\/td>\nbtnDarkTheme<\/td>\n<\/tr>\n
      Cor de fundo<\/td>\nCinza escuro<\/td>\n<\/tr>\n
      ForeColor<\/td>\nBranco<\/td>\n<\/tr>\n
      Tamanho<\/td>\n200, 80<\/td>\n<\/tr>\n
      FlatStyle<\/td>\nApartamento<\/td>\n<\/tr>\n
      Texto<\/td>\nEscuro<\/td>\n<\/tr>\n
      Vis\u00edvel<\/td>\nFalso<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

      \"WinForms:<\/a>\n<\/li>\n

    4. \n

      Clique duas vezes no bot\u00e3o Temas<\/strong>. Isso criar\u00e1 um m\u00e9todo para lidar com o evento "on click". O m\u00e9todo ser\u00e1 executado quando o usu\u00e1rio clicar neste bot\u00e3o.<\/p>\n<\/li>\n

    5. \n

      Por padr\u00e3o, os temas "Light", "Nature" e "Dark" n\u00e3o estar\u00e3o vis\u00edveis. Dentro da fun\u00e7\u00e3o, adicione a funcionalidade para alternar a visibilidade dos bot\u00f5es para mostrar ou ocultar.<\/p>\n

      private void btnThemeSettings_Click(object sender, EventArgs e){    btnNatureTheme.Visible = !btnNatureTheme.Visible;    btnLightTheme.Visible = !btnLightTheme.Visible;    btnDarkTheme.Visible = !btnDarkTheme.Visible;}<\/code><\/pre>\n<\/li>\n
    6. \n
      Execute o aplicativo clicando no bot\u00e3o de reprodu\u00e7\u00e3o verde na parte superior da janela do Visual Studio.<\/p>\n
      \"WinForms:<\/a>\n<\/li>\n
    7. \n
      Em tempo de execu\u00e7\u00e3o, o aplicativo ocultar\u00e1 os bot\u00f5es de cada um dos tr\u00eas temas por padr\u00e3o.<\/p>\n
      \"WinForms:<\/a>\n<\/li>\n
    8. \n
      Clique no bot\u00e3o Temas<\/strong> para alternar os temas a serem exibidos. Voc\u00ea pode continuar pressionando o bot\u00e3o Temas<\/strong> para alternar sua visibilidade.<\/p>\n
      \"WinForms:<\/a>\n<\/li>\n<\/ol>\n
      Como gerenciar seus temas<\/h2>\n
      Crie Dicion\u00e1rios para cada tema para armazenar as diferentes cores que ele usar\u00e1. Isso \u00e9 para que voc\u00ea armazene todas as cores do seu tema em um s\u00f3 lugar, caso precise us\u00e1-las v\u00e1rias vezes. Tamb\u00e9m facilita se voc\u00ea quiser atualizar um tema com novas cores no futuro.<\/p>\n
        \n
      1. \n
        Na parte superior do arquivo C# padr\u00e3o Form1.cs<\/strong> e dentro da classe Form<\/strong>, crie uma enumera\u00e7\u00e3o global. Este enum armazenar\u00e1 os diferentes tipos de cores que voc\u00ea usar\u00e1 em um tema.<\/p>\n
        enum ThemeColor{    Primary,    Secondary,    Tertiary,    Text}  <\/code><\/pre>\n<\/li>\n
      2. \n
        Abaixo, declare tr\u00eas Dicion\u00e1rios globais, um para cada um dos tr\u00eas temas. Voc\u00ea pode ler mais sobre Dicion\u00e1rios se n\u00e3o estiver familiarizado com como usar um dicion\u00e1rio em C#<\/a>.<\/p>\n
        Dictionary<ThemeColor, Color> Light = new Dictionary<ThemeColor, Color>();Dictionary<ThemeColor, Color> Nature = new Dictionary<ThemeColor, Color>();Dictionary<ThemeColor, Color> Dark = new Dictionary<ThemeColor, Color>();<\/code><\/pre>\n<\/li>\n
      3. \n
        Dentro do construtor, inicialize os dicion\u00e1rios. Adicione valores para as diferentes cores que cada tema usar\u00e1.<\/p>\n
        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 }    };}<\/code><\/pre>\n<\/li>\n<\/ol>\n
        Como mudar o tema<\/h2>\n
        Crie fun\u00e7\u00f5es para gerenciar o tema do aplicativo. Essas fun\u00e7\u00f5es alterar\u00e3o a cor do plano de fundo ou a cor do texto dos elementos da interface do usu\u00e1rio na tela.<\/p>\n
          \n
        1. \n
          Crie uma nova fun\u00e7\u00e3o chamada ChangeTheme()<\/strong>. A fun\u00e7\u00e3o receber\u00e1 as cores de um tema como argumentos.<\/p>\n<\/li>\n
        2. \n
          Dentro da fun\u00e7\u00e3o, altere as propriedades de cor de fundo dos elementos da interface do usu\u00e1rio. As novas cores de fundo usar\u00e3o cores para o tema selecionado.<\/p>\n
          private void ChangeTheme(Color primaryColor, Color secondaryColor, Color tertiaryColor){        btnThemeSettings.BackColor = primaryColor;    button1.BackColor = primaryColor;    button2.BackColor = secondaryColor;    button3.BackColor = secondaryColor;    this.BackColor = tertiaryColor;}<\/code><\/pre>\n<\/li>\n
        3. \n
          Crie uma nova fun\u00e7\u00e3o chamada ChangeTextColor()<\/strong>. Voc\u00ea pode usar isso para alterar a cor do texto entre escuro e claro. Isso \u00e9 para garantir que o texto em um fundo escuro ainda seja leg\u00edvel.<\/p>\n
          private void ChangeTextColor(Color textColor){    \/\/ Change color of text    button1.ForeColor = textColor;    button2.ForeColor = textColor;    button3.ForeColor = textColor;    label1.ForeColor = textColor;    btnThemeSettings.ForeColor = textColor;}<\/code><\/pre>\n<\/li>\n
        4. \n
          Do designer, clique duas vezes no controle do bot\u00e3o "Light". Isso abrir\u00e1 o arquivo code-behind e gerar\u00e1 um manipulador de eventos para quando o usu\u00e1rio clicar no bot\u00e3o.<\/p>\n<\/li>\n
        5. \n
          Dentro do manipulador de eventos, use as fun\u00e7\u00f5es ChangeTheme()<\/strong> e ChangeTextColor()<\/strong>. Insira as cores que o tema est\u00e1 usando. Voc\u00ea pode recuperar essas cores do dicion\u00e1rio de temas "Light".<\/p>\n
          private void btnLightTheme_Click(object sender, EventArgs e){    ChangeTheme(Light[ThemeColor.Primary], Light[ThemeColor.Secondary], Light[ThemeColor.Tertiary]);    ChangeTextColor(Light[ThemeColor.Text]);}<\/code><\/pre>\n<\/li>\n
        6. \n
          Volte para o designer e clique nos bot\u00f5es "Nature" e "Dark". Use as fun\u00e7\u00f5es ChangeTheme()<\/strong> e ChangeTextColor()<\/strong> em seus manipuladores de eventos tamb\u00e9m.<\/p>\n
          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]);}<\/code><\/pre>\n<\/li>\n
        7. \n
          Por padr\u00e3o, o tema deve ser definido para o tema "Light" quando o usu\u00e1rio abre o aplicativo pela primeira vez. No construtor, abaixo dos dicion\u00e1rios, use as fun\u00e7\u00f5es ChangeTheme()<\/strong> e ChangeTextColor()<\/strong>.<\/p>\n
          ChangeTheme(Light[ThemeColor.Primary], Light[ThemeColor.Secondary], Light[ThemeColor.Tertiary]);ChangeTextColor(Light[ThemeColor.Text]);<\/code><\/pre>\n<\/li>\n
        8. \n
          Execute o aplicativo clicando no bot\u00e3o de reprodu\u00e7\u00e3o verde na parte superior da janela do Visual Studio.<\/p>\n<\/li>\n
        9. \n
          Por padr\u00e3o, o aplicativo usa o tema "Light" e aplica o esquema de cores cinza aos controles da interface do usu\u00e1rio. Alterne o bot\u00e3o de temas para visualizar a lista de temas.<\/p>\n
          \"WinForms:<\/a>\n<\/li>\n
        10. \n
          Clique no tema Natureza.<\/p>\n
          \"WinForms:<\/a>\n<\/li>\n
        11. \n
          Clique no tema escuro.<\/p>\n
          \"WinForms:<\/a>\n<\/li>\n<\/ol>\n
          Criando aplicativos usando Windows Forms<\/h2>\n
          Muitos aplicativos permitem que o usu\u00e1rio alterne entre v\u00e1rios temas. Voc\u00ea pode adicionar temas a um aplicativo Windows Forms criando op\u00e7\u00f5es para o usu\u00e1rio selecionar.<\/p>\n
          Quando o usu\u00e1rio clica em um tema, voc\u00ea pode alterar a cor de fundo, o texto ou qualquer outra propriedade para corresponder \u00e0s cores usadas no tema selecionado.<\/p>\n
          As cores de cada um dos temas usam as cores internas do Visual Studio. Voc\u00ea precisar\u00e1 usar um esquema de cores adequado para oferecer aos usu\u00e1rios uma experi\u00eancia melhor. Voc\u00ea pode saber mais sobre as diferentes maneiras de escolher um esquema de cores para seu aplicativo.<\/p>\n
          Fonte de grava\u00e7\u00e3o:  www.makeuseof.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
          Os temas s\u00e3o uma \u00f3tima maneira de permitir que seus usu\u00e1rios personalizem seu aplicativo sem precisar se envolver muito em detalhes espec\u00edficos.<\/p>\n","protected":false},"author":1,"featured_media":232341,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[2932],"tags":[3061],"class_list":["post-272147","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programacao","tag-affiai-pt-pt"],"_links":{"self":[{"href":"https:\/\/howto.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/272147","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/howto.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/howto.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/howto.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/howto.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/comments?post=272147"}],"version-history":[{"count":1,"href":"https:\/\/howto.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/272147\/revisions"}],"predecessor-version":[{"id":306957,"href":"https:\/\/howto.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/272147\/revisions\/306957"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/howto.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media\/232341"}],"wp:attachment":[{"href":"https:\/\/howto.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media?parent=272147"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/howto.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/categories?post=272147"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/howto.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/tags?post=272147"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}