Explorando o Design de Formulários em C# com Tim Corey — Um Guia Passo a Passo

Tim Corey

1h 06m 41s

Nesta aula, Tim Corey nos leva através do processo de construção da interface do usuário para uma aplicação Windows Forms em C#. Ele explica que o objetivo não é escrever a lógica ainda, mas transformar os esboços de planejamento de lições anteriores em formulários reais e funcionais. Tim enfatiza que nós focaremos em design primeiro e, posteriormente, conectaremos tudo com o código. Esta é uma análise mais profunda do tema de construção de formulários em C#, e o vídeo de Tim ajuda a explicar como um aplicativo Windows Forms é construído passo a passo dentro do Visual Studio.

Introdução à Construção de Formulários

Tim começa nos dando boas-vindas à lição sete e declara claramente o objetivo: estamos construindo os formulários. Ele nos lembra que isso é semelhante ao trabalho com bibliotecas de classes, mas agora estamos implementando a interface do usuário real com base nos nossos esboços de planejamento anteriores. Tim observa que podemos ficar tentados a adicionar código durante esta etapa, mas ele nos exorta a nos concentrar apenas na construção dos formulários.

Ele também explica que nossos designs anteriores eram esboços brutos, e agora estamos fazendo os formulários parecerem bons. Tim afirma que o guia de design é importante e, embora ele não vá mostrar a experimentação pela qual passou, nos guiará pelos resultados finais. Ele também ressalta que os designs do passo de planejamento quatro são a base para esta lição e sugere referir-se a esses designs se necessário.

Adicionar Novo Projeto e Iniciar uma Aplicação Windows Forms

Tim nos mostra como adicionar um novo projeto à solução. No Solution Explorer, ele clica com o botão direito na solução, seleciona Add New Project e escolhe Windows Form Application. Isso cria um novo tipo de projeto especificamente para construir aplicações desktop Windows. Ele nomeia o projeto de Tournament Tracker UI.

Ele explica que o arquivo padrão Form1.cs é gerado automaticamente ao criar um aplicativo Windows Forms. Como o aplicativo precisa de um formulário inicial, Tim decide não excluí-lo. Em vez disso, ele renomeia o arquivo e a classe para TournamentViewerForm e aceita o aviso para renomear todas as referências. Isso garante que a janela principal do aplicativo funcione corretamente.

Renomeando a Classe do Formulário

Tim enfatiza que você deve ter um formulário que seja executado em uma aplicação Windows Forms. Ele explica que se você excluir o Form1.cs padrão, deve atualizar o ponto de entrada em Program.cs manualmente. Para evitar essa complexidade, Tim simplesmente renomeia o formulário. Este é um passo típico ao iniciar um aplicativo Windows Forms: renomear a classe e o arquivo para corresponder ao propósito do projeto.

Usando a Janela de Propriedades

Tim acessa a janela de propriedades e começa a modificar as propriedades do formulário. Ele altera a propriedade Text para "Visualizador de Torneios" para que a barra de título exiba o nome correto.

Em seguida, ele altera a BackColor do cinza padrão do Visual Studio para branco, explicando que o branco é mais moderno e não distrai do conteúdo do formulário. Isso faz parte do estabelecimento de um guia de design para a interface do usuário.

Ele então altera a fonte para uma fonte moderna de 16 pontos e explica por que isso deve ser feito cedo: os controles adicionados posteriormente herdarão a nova fonte automaticamente. Tim explica que esta é uma dica importante para construir formulários de forma eficiente.

Alterando o Ícone e os Recursos

Tim altera o ícone do formulário importando um arquivo de ícone personalizado. Ele explica que usou uma ferramenta gratuita chamada Metro Studio para criar o ícone. Isso o ajuda a evitar escrever ou desenhar ícones do zero. Ele também observa que usará o mesmo ícone em todos os formulários para criar uma aparência coesa para o aplicativo.

Adicionando Controles ao Formulário

Tim começa a construir a interface do usuário arrastando controles da Caixa de Ferramentas para o formulário. Ele adiciona um rótulo de cabeçalho e altera suas propriedades:

• CorFonte → RGB (51, 153, 255)

• Fonte → Light, 28

• Text → "Torneio:"

• Nome → "headerLabel"

Ele então copia e cola o rótulo de cabeçalho para criar o rótulo do nome do torneio, definindo seu texto para "Nenhum" temporariamente e nomeando-o tournamentNameLabel. Tim explica que copiar e colar controles é uma maneira rápida de manter a consistência de estilo e economizar tempo.

Adicionando Controles de Seleção de Rodada

Tim adiciona um rótulo de Rodada e um ComboBox drop-down. Ele altera a fonte do rótulo para 20 e define a cor para o mesmo azul de destaque. Ele usa guias de alinhamento do Visual Studio para garantir que os controles estejam devidamente alinhados.

Em seguida, ele adiciona uma CheckBox rotulada "Apenas Não Jogados". Ele altera seu estilo para plano e modifica a cor da marca de seleção para azul. Tim também explica sua convenção de nomenclatura: ele adiciona o tipo de controle no final (por exemplo, roundDropDown, unplayedOnlyCheckbox) para facilitar a busca e a navegação no código.

Adicionando Lista de Confrontos e Controles de Pontuação

Tim adiciona um ListBox chamado matchupListBox e define seu estilo de borda para fixo único. Ele explica que ListBox se comporta de maneira semelhante a ComboBox, o que torna o código mais fácil posteriormente.

Em seguida, ele adiciona rótulos e caixas de texto para nomes de equipes e pontuações. Ele demonstra uma técnica poderosa: selecionar vários controles, copiá-los e colá-los juntos. Isso preserva o espaçamento e o layout, acelerando o processo de design.

Tim também explica que você deve renomear cada controle corretamente, evitando nomes padrão como label1 ou textBox2, que podem causar confusão mais tarde.

Adicionando o Rótulo VS e o Botão de Pontuação

Tim adiciona um rótulo "VS" entre as duas seções de equipe. Em seguida, ele adiciona um botão Score e personaliza seu estilo:

• EstiloPlano → Plano

• CorBorda → Prata

• CorDeFundoAoClique → (102, 102, 102)

• CorDeFundoAoPassarMouse → (242, 242, 242)

• Font → Seminegrito, 16

• CorFonte → (51, 153, 255)

• Texto → "Score"

Ele explica que essas configurações fazem o botão parecer moderno e responsivo, especialmente quando o usuário passa o mouse ou clica.

Executando o Formulário

Tim explica que o projeto atualmente está com o projeto de inicialização errado. A biblioteca de classes está em negrito no Solution Explorer, o que significa que está configurada como o projeto de inicialização, mas uma biblioteca de classes não pode ser executada por conta própria. Ele define Tracker UI como o projeto de inicialização.

Quando ele executa o aplicativo, o formulário aparece com o estilo do Windows 10. Tim aponta o comportamento de passar o mouse e clicar no botão, mostrando que a interface do usuário é responsiva e moderna.

Criar Formulário de Torneio

Tim adiciona um novo formulário chamado CreateTournamentForm e define suas propriedades (fonte, cor, ícone). Em seguida, ele copia controles do formulário Visualizador de Torneios para acelerar o desenvolvimento.

Ele adiciona:

• Entrada de nome de torneio

• Entrada de taxa de inscrição (valor padrão 0)

• Dropdown para adicionar equipe

• Rótulo de link para criar equipe

• Botão para adicionar equipe

• Botão para criar prêmio

• Caixa de lista de jogadores do torneio

• Botões de exclusão

• Botão para criar torneio

Tim explica sua escolha de design de manter o rótulo de link azul porque os usuários são treinados para reconhecer texto azul sublinhado como um link.

Criar Formulário de Equipe

Tim cria o CreateTeamForm e adiciona:

• Entrada de nome da equipe

• Dropdown para selecionar membro da equipe

• Botão para adicionar membro

• Caixa de grupo para adicionar novos membros

• Campos de nome, sobrenome, e-mail e celular

• Botão para criar membro

• Caixa de lista de membros da equipe

• Botão para excluir membro selecionado

• Botão para criar equipe

Ele explica que a caixa de grupo fornece um limite visual e facilita o gerenciamento de controles agrupados. Também ajuda ao mover o grupo como uma unidade.

Criar Formulário de Prêmio

Tim constrói o CreatePrizeForm com:

• Entrada de número de colocação

• Entrada de nome de colocação

• Entrada de valor do prêmio

• Entrada de porcentagem do prêmio

• Rótulo "Ou"

• Botão para criar prêmio

Ele usa ferramentas de alinhamento para garantir que o layout pareça limpo e profissional.

Formulário de Painel de Torneios

Tim constrói o formulário final: TournamentDashboardForm. Ele adiciona:

• Dropdown para carregar torneio existente

• Botão para carregar torneio

• Botão para criar torneio

Ele usa ferramentas de alinhamento e espaçamento para tornar o layout visualmente equilibrado.

Dicas de Nomeação e Organização

Tim ressalta a importância de uma nomenclatura adequada. Ele mostra como o dropdown de Propriedades pode ajudar a identificar controles sem nome como label1 ou textBox2 que foram deixados acidentalmente. Ele demonstra renomear uma caixa de grupo para addNewMemberGroupBox para clareza.

Configurando o Formulário de Inicialização

Tim explica como alterar o formulário de inicialização em Program.cs. Ele altera:

Application.Run(new TournamentViewerForm());

Application.Run(new TournamentViewerForm());

para:

Application.Run(new TournamentDashboardForm());

Application.Run(new TournamentDashboardForm());

Ele explica que esta linha cria a instância do formulário e pausa o aplicativo até que o formulário seja fechado.

Por Que o Main Importa

Tim compara Windows Forms a aplicativos de console: ambos têm um static void Main. Ele esclarece que, uma vez que o Main termina, o aplicativo fecha. É por isso que o formulário deve permanecer aberto para manter o aplicativo em execução.

Ele também observa que o Visual Studio inclui comentários XML, e ele encoraja a adição de documentação XML para métodos mais tarde.

O que vem a seguir

Tim conclui a lição afirmando que o próximo passo é conectar os formulários com lógica. Ele tranquiliza os espectadores de que a parte intimidadora está chegando, mas será administrável uma vez que os formulários sejam construídos. Ele diz que a lógica parecerá com a montagem de peças de LEGO, e a parte difícil desaparecerá gradualmente à medida que avançamos.