Tutorial: Introdução ao Designer de Formulários do Windows

  • Artigo

O Designer de Formulários do Windows fornece muitas ferramentas para a criação de aplicativos do Windows Forms. Este artigo ilustra como criar um aplicativo usando as várias ferramentas fornecidas pelo designer, incluindo as seguintes tarefas:

  • Organize os controles usando snaplines.
  • Realize tarefas de designer usando marcas inteligentes.
  • Definir margens e preenchimento para controles.
  • Organize controles usando um controle TableLayoutPanel.
  • Particionar o layout do controle usando um controle SplitContainer.
  • Navegar até o layout com a janela Estrutura de Tópicos do Documento.
  • Posicionar os controles com a exibição de informações de tamanho e localização.
  • Defina valores de propriedade usando a janela Propriedades.

Quando terminar, você terá um controle personalizado que foi montado usando muitos dos recursos de layout disponíveis no Designer de Formulários do Windows. Esse controle implementa a interface do usuário para uma calculadora simples. A imagem a seguir mostra o layout geral do controle da calculadora:

Captura de tela da interface do usuário concluída para o controle de calculadora.

Dica

Se você for um desenvolvedor do C++ e estiver procurando um tutorial para ajudá-lo a criar um aplicativo do Windows que inclua formulários e controles, consulte Criando um aplicativo MFC baseado em formulários. Para obter informações mais generalizadas, consulte Visão geral da programação do Windows no C++.

Criar o projeto de controle personalizado

A primeira etapa é criar o projeto de controle DemoCalculator.

  1. Abra o Visual Studio e crie um novo projeto de biblioteca de controle Windows Forms usando o modelo do .NET Framework para C# ou Visual Basic. Nomeie o projeto DemoCalculatorLib.

    Captura de tela do modelo da Biblioteca de Controle do Windows Forms no Visual Studio.

  2. Para renomear o arquivo, em do Gerenciador de Soluções, clique com o botão direito do mouse em UserControl1.vb ou UserControl1.cs, selecione Renomeare altere o nome do arquivo para DemoCalculator.vb ou DemoCalculator.cs. Selecione Sim quando for perguntado se deseja renomear todas as referências para o elemento de código "UserControl1".

O Criador de Formulários do Windows exibe a interface do designer para o controle DemoCalculator. Nesse modo de exibição, você pode projetar graficamente a aparência do controle selecionando controles e componentes da Caixa de Ferramentas e colocando-os na superfície do designer. Para obter mais informações sobre controles personalizados, consulte Variedades de controles personalizados.

Projetar o layout de controle

O controle DemoCalculator contém vários controles do Windows Forms. Neste procedimento, você organizará os controles usando o Designer de Formulários do Windows.

  1. No Designer de Formulários do Windows, altere o controle DemoCalculator para um tamanho maior selecionando a alça de dimensionamento no canto inferior direito e arrastando-a para redimensionar. No canto inferior direito do Visual Studio, localize as informações de tamanho e localização dos controles. Defina o tamanho do controle como largura 1000 e altura 800 observando as informações de tamanho enquanto redimensiona o controle. Você também pode rolar até a parte inferior da janela Propriedades, que geralmente está encaixada no canto inferior direito, e inserir manualmente os valores na propriedade Tamanho.

  2. Na Caixa de Ferramentas, selecione o nó Contêineres para abri-lo. Selecione o controle SplitContainer e arraste-o para a superfície do designer.

    SplitContainer é colocado na superfície do designer do controle DemoCalculator.

    Dica

    O controle SplitContainer se dimensiona para se ajustar ao tamanho do controle DemoCalculator. Examine a janela Propriedades para ver as configurações de propriedade do controle SplitContainer. Localize a propriedade Dock. Seu valor é DockStyle.Fill, o que significa que o controle SplitContainer sempre se dimensionará para os limites do controle DemoCalculator. Redimensione o controle DemoCalculator para verificar esse comportamento.

  3. Na janela Propriedades do, altere o valor da propriedade Dock para None.

    O controle SplitContainer reduz para seu tamanho padrão e não segue mais o tamanho do controle DemoCalculator.

  4. Selecione o glifo de marca inteligente (Glifo de Marca Inteligente) no canto superior direito do controle SplitContainer. Selecione Encaixar no Contêiner Pai para definir a propriedade Dock como Fill.

    O controle SplitContainer se encaixa nos limites do controle DemoCalculator.

    Nota

    Vários controles oferecem tags inteligentes para facilitar o design. Para obter mais informações, consulte Passo a passo: realizar tarefas comuns usando Smart Tags em controles do Windows Forms.

  5. Selecione a borda vertical entre os painéis e arraste-a para a direita, de modo que o painel esquerdo use a maior parte do espaço.

    O SplitContainer divide o controle DemoCalculator em dois painéis com uma borda móvel separando-os. O painel à esquerda contém os botões da calculadora e a exibição, e o painel à direita mostra um registro das operações aritméticas executadas pelo usuário.

  6. Na janela Propriedades, altere o valor da propriedade BorderStyle para Fixed3D.

  7. Na Caixa de Ferramentas, selecione o nó Controles Comuns para abri-lo. Selecione o controle ListView e arraste-o para o painel direito do controle SplitContainer.

  8. Selecione o símbolo de tag inteligente do controle ListView. No painel de marcas inteligentes, altere a configuração View para Details.

  9. No painel de marcas inteligentes, selecione Editar Colunas.

    A caixa de diálogo Editor de Coleção ColumnHeader abre.

  10. Na caixa de diálogo Editor de Coleção ColumnHeader, selecione Adicionar para adicionar uma coluna ao controle ListView. Altere o valor da propriedade Text da coluna para Histórico. Selecione OK para criar a coluna.

  11. No painel de marcas inteligentes, selecione Encaixar no Contêiner Pai e, em seguida, selecione o glifo de marca inteligente para fechar o painel de marcas inteligentes.

  12. Na Caixa de Ferramentas do nó Contêineres, arraste um controle TableLayoutPanel para o painel esquerdo do controle SplitContainer.

    O controle TableLayoutPanel aparece na superfície do designer com o painel de marcas inteligentes aberto. O controle TableLayoutPanel organiza seus controles filhos em uma grade. O controle TableLayoutPanel contém a exibição e os botões do controle DemoCalculator. Para obter mais informações, consulte Passo a passo: organizar controles usando umTableLayoutPanel.

  13. Selecione Editar Linhas e Colunas no painel de marcas inteligentes.

    A caixa de diálogo Estilos de Coluna e Linha abre.

  14. Selecione o botão Adicionar até que cinco colunas sejam exibidas. Selecione todas as cinco colunas e, em seguida, selecione Porcentagem na caixa Tipo de Tamanho. Defina o valor Porcentagem como 20. Essa ação define cada coluna com a mesma largura.

  15. Em Mostrar, selecione Linhas.

  16. Selecione Adicionar até que cinco linhas sejam exibidas. Selecione todas as cinco linhas e, em seguida, selecione Porcentagem na caixa Tipo de Tamanho. Defina o valor Porcentagem como 20. Essa ação define cada linha com a mesma altura.

  17. Selecione OK para aceitar suas alterações, e então selecione o ícone de marca inteligente para fechar o painel de marcas inteligentes.

  18. Na janela Propriedades, altere o valor da propriedade Dock para Fill.

Preencher o controle

Agora que o layout do controle está configurado, você pode preencher o controle DemoCalculator com botões e uma exibição.

  1. Na caixa de ferramentas , selecione o ícone de controle TextBox.

    Um controle TextBox é colocado na primeira célula do controle TableLayoutPanel.

  2. Na janela Propriedades, altere o valor da propriedade ColumnSpan do controle TextBox para 5.

    O controle TextBox fica centralizado em sua linha.

  3. Altere o valor da propriedade Anchor do controle TextBox para Left, Right.

    O controle TextBox se expande horizontalmente para abranger todas as cinco colunas.

  4. Altere o valor da propriedade TextBox do controle TextAlign para Right.

  5. Na janela Propriedades, expanda o nó de propriedade Font. Defina Size como 14e defina Bold como verdadeiro para o controle TextBox.

  6. Selecione o controle TableLayoutPanel.

  7. Na Caixa de Ferramentas, selecione o ícone Button.

    Um controle Button é colocado na próxima célula aberta do controle TableLayoutPanel.

  8. Em caixa de ferramentas, selecione o ícone Button mais quatro vezes para preencher a segunda linha do controle TableLayoutPanel.

  9. Selecione todos os cinco controles Button selecionando-os enquanto mantém pressionada a tecla shift. Pressione Ctrl+C para copiar os controles Button para a área de transferência.

  10. Pressione Ctrl+V três vezes para colar cópias dos controles Button nas linhas restantes do controle TableLayoutPanel.

  11. Selecione todos os 20 controles Button selecionando-os enquanto mantém pressionada a tecla shift.

  12. Na janela Propriedades , altere o valor da propriedade Dock para Fill.

    Todos os controles Button são encaixados para preencher suas células.

  13. Na janela Propriedades, expanda o nó de propriedade Margin. Defina o valor de All como 5.

    Todos os controles Button são menores para criar uma margem maior entre eles.

  14. Selecione button10 e button20, em seguida, pressione Excluir para removê-los do layout.

  15. Selecione botão5 e botão15e altere o valor de sua propriedade RowSpan para 2. Esses botões representam os botões Limpar e = para o controle DemoCalculator.

Usar a janela Estrutura de Tópicos do Documento

Quando seu controle ou formulário é preenchido com vários controles, você pode achar mais fácil navegar pelo layout com a janela Estrutura de Tópicos do Documento.

  1. Na barra de menus, escolha Exibir>Outras Janelas>Estrutura de Tópicos do Documento. Ou, no teclado, pressione Ctrl+Alt+T.

    A janela Estrutura de Tópicos do Documento mostra um modo de exibição de árvore do controle DemoCalculator e seus controles. Controles de contêiner, como SplitContainer, mostram seus controles filhos como subnós na árvore. Você pode também renomear os controles diretamente usando a janela de Esquema do Documento.

  2. Na janela Estrutura de Tópicos do Documento, clique com o botão direito do mouse em button1 e, em seguida, selecione Renomear (teclado: F2). Altere seu nome para sevenButton.

  3. Usando a janela Estrutura de Tópicos do Documento, renomeie os controles Button do nome gerado pelo designer para o nome de produção, de acordo com a lista a seguir:

    • button1 para sevenButton

    • button2 para eightButton

    • button3 para nineButton

    • button4 para divisionButton

    • button5 para clearButton

    • button6 para fourButton

    • button7 para fiveButton

    • button8 para sixButton

    • button9 para multiplicationButton

    • button11 para oneButton

    • button12 para twoButton

    • button13 para threeButton

    • button14 para subtractionButton

    • button15 para equalsButton

    • button16 para zeroButton

    • button17 para changeSignButton

    • button18 para decimalButton

    • button19 para additionButton

  4. Usando as janelas Estrutura de Tópicos do Documento e Propriedades, altere o valor da propriedade Text para cada nome de controle Button de acordo com a lista a seguir:

    • Altere a propriedade de texto do controle sevenButton para 7

    • Altere a propriedade de texto do controle eightButton para 8

    • Altere a propriedade de texto do controle nineButton para 9

    • Altere a propriedade de texto do controle divisionButton para / (barra "/")

    • Alterar a propriedade de texto do controle clearButton para Clear

    • Altere a propriedade de texto do controle fourButton para 4

    • Altere a propriedade de texto do controle fiveButton para 5

    • Mude a propriedade de texto do controle sixButton para 6

    • Altere a propriedade de texto do controle multiplicationButton para * (asterisco)

    • Altere a propriedade de texto do controle oneButton para 1

    • Alterar a propriedade de texto do controle twoButton para 2

    • Altere a propriedade de texto do controle threeButton para 3

    • Altere a propriedade de texto do controle subtractionButton para - (hífen)

    • Altere a propriedade de texto do controle equalsButton para = (sinal de igual)

    • Altere a propriedade de texto do controle zeroButton para 0

    • Altere a propriedade de texto do controle changeSignButton para +/-

    • Altere a propriedade de texto do controle decimalButton para . (ponto final)

    • Altere a propriedade de texto do controle additionButton para + (sinal de adição)

  5. Na superfície do designer, mantenha pressionada a tecla Shift e clique para selecionar todos os controles Button.

  6. Na janela Propriedades, expanda o nó de propriedade Font. Defina Size como 14 e Bold como true para todos os controles Button.

Esse conjunto de instruções conclui o design do controle DemoCalculator. Tudo o que resta é fornecer a lógica da calculadora.

Implementar manipuladores de eventos

Os botões no controle DemoCalculator têm manipuladores de eventos que podem ser usados para implementar grande parte da lógica da calculadora. O Designer de Formulários do Windows permite implementar os esboços de todos os manipuladores de eventos para todos os botões com uma única seleção.

  1. Na superfície do designer, mantenha pressionada a tecla Shift e clique para selecionar todos os controles Button.

  2. Selecione um dos controles Button.

    O Editor de Código é aberto para os manipuladores de eventos gerados pelo designer.

Como este tutorial se concentra no designer, omitimos os detalhes de implementação da funcionalidade da calculadora.

Testar o controle

Como o controle DemoCalculator herda da classe UserControl, você pode testar seu comportamento com o contêiner de teste UserControl . Para obter mais informações, consulte Como testar o comportamento em tempo de execução de um controle de usuário.

  1. Pressione F5 para criar e executar o controle DemoCalculator no Contêiner de Teste de UserControl .

  2. Selecione a borda entre os painéis de SplitContainer e arraste-a para a esquerda e para a direita. TableLayoutPanel e todos os seus controles filhos se redimensionam para caber no espaço disponível.

  3. Quando terminar de testar o controle, selecione Fechar.

Usar o controle em um formulário

O controle DemoCalculator pode ser usado em outros controles compostos ou em um formulário. O procedimento a seguir descreve como usá-lo.

Criar o projeto

A primeira etapa é criar o projeto de aplicativo. Você usará esse projeto para criar o aplicativo que mostra seu controle personalizado.

  1. Adicione um novo projeto aplicativo Windows Forms (.NET Framework) à solução existente e nomeie-o DemoCalculatorTest.

  2. No Gerenciador de Soluções, clique com o botão direito do mouse no projeto DemoCalculatorTest e selecione Adicionar>Referência para abrir a caixa de diálogo Gerenciador de Referências.

  3. Vá para a guia Projetos e selecione o projeto DemoCalculatorLib para adicionar a referência ao projeto de teste.

  4. No Gerenciador de Soluções, clique com o botão direito do mouse em DemoCalculatorTest e, em seguida, selecione Definir como Projeto de StartUp.

  5. No Designer de Formulários do Windows, aumente o tamanho do formulário para cerca de 1400 x 1000.

Use o controle no layout do formulário

Para usar o controle DemoCalculator em um aplicativo, você precisa colocá-lo em um formulário.

  1. Na Caixa de Ferramentas, expanda o nó Componentes do DemoCalculatorLib.

  2. Arraste o controle DemoCalculator da Caixa de Ferramentas para seu formulário. Mova o controle para o canto superior esquerdo do formulário. Quando o controle está próximo das bordas do formulário, as guias de alinhamento aparece. As snaplines indicam a distância entre a propriedade Padding do formulário e a propriedade Margin do controle. Posicione o controle no local indicado pelas guias de alinhamento.

    Para obter mais informações, consulte Passo a passo: organizar controles usando snaplines.

  3. Arraste um controle Button da caixa de ferramentas e solte-o no formulário.

  4. Mova o controle Button ao redor do controle DemoCalculator e observe onde os snaplines aparecem. Você pode alinhar seus controles com precisão e facilidade usando esse recurso. Exclua o controle Button quando terminar.

  5. Clique com o botão direito do mouse no controle DemoCalculator e selecione Propriedades.

  6. Altere o valor da propriedade Dock para Fill.

  7. Selecione o formulário e, em seguida, expanda o nó da propriedade Padding. Altere o valor de Todos os para 20.

    O tamanho do controle DemoCalculator é reduzido para acomodar o novo valor Padding do formulário.

  8. Redimensione o formulário arrastando as várias alças de dimensionamento para diferentes posições. Observe como o controle DemoCalculator é redimensionado para ajustar.

Próximas etapas

Este artigo demonstrou como construir a interface do usuário para uma calculadora simples. Para continuar, você pode estender sua funcionalidade pela implementação da lógica da calculadora e, em seguida, publicar o aplicativo usando o ClickOnce. Ou siga para um tutorial diferente em que você cria um visualizador de imagens usando o Windows Forms.

Consulte também