Partilhar via

Tutorial: Introdução ao Windows Forms Designer

O Windows Forms Designer fornece muitas ferramentas para criar 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.
  • Cumprir tarefas de designer utilizando etiquetas inteligentes.
  • Defina margens e preenchimento para controles.
  • Organize os controles usando um controle TableLayoutPanel.
  • Particione o layout do seu controle usando um controle SplitContainer.
  • Navegue pelo layout utilizando a janela de Estrutura de Documentos.
  • Controles de posição 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 Windows Forms Designer. Este controle implementa a interface do usuário (UI) 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 da calculadora.

Dica

Se você for um desenvolvedor 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 em 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 Windows Forms Control Library usando o modelo .NET Framework para C# ou Visual Basic. Nomeie o projeto DemoCalculatorLib.

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

  2. Para renomear o arquivo, no 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 ao elemento de código "UserControl1".

O Windows Forms Designer mostra a superfície do designer para o controle DemoCalculator. Nessa 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 Windows Forms. Neste procedimento, você organizará os controles usando o Windows Forms Designer.

  1. No Windows Forms Designer, 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 local para controles. Defina o tamanho do controle para largura 1000 e altura 800 observando as informações de tamanho enquanto você redimensiona o controle. Você também pode deslocar-se até ao fundo da janela Propriedades, que geralmente está encaixada no canto inferior direito, e inserir manualmente os valores na propriedade Tamanho.

  2. No Toolbox, selecione o nó Containers para abri-lo. Selecione o controlo SplitContainer e arraste-o sobre a superfície do designer.

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

    Dica

    O controle SplitContainer se dimensiona para se ajustar ao tamanho do controle DemoCalculator. Observe a janela Propriedades para ver as configurações de propriedade para o controle SplitContainer. Encontre 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, altere o valor da propriedade Dock para None.

    O controle SplitContainer diminui 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 de SplitContainer. Selecione Dock no container pai para definir a propriedade Dock para Fill.

    O controlo SplitContainer encaixa-se nos limites do controlo DemoCalculator.

    Observação

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

  5. Selecione a borda vertical entre os painéis e arraste-a para a direita, de modo que o painel esquerdo ocupe 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 realizadas 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 glifo de marca 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 ColumnHeader Collection Editor é aberta.

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

  11. No painel de etiquetas inteligentes, selecione Dock no contêiner paie, em seguida, selecione o ícone de etiqueta inteligente para fechar o painel de etiquetas inteligentes.

  12. A partir do nó ContainersCaixa de Ferramentas, arraste um controlo TableLayoutPanel para o painel esquerdo do controlo SplitContainer.

    O controlo TableLayoutPanel aparece na superfície do designer com o painel de etiqueta inteligente aberto. O controlo TableLayoutPanel organiza os seus controlos filhos numa grelha. O controle TableLayoutPanel mantém a exibição e os botões do controle DemoCalculator. Para obter mais informações, consulte Passo a passo: Organizar controles usando um TableLayoutPanel.

  13. Selecione Editar linhas e colunas no painel de marcas inteligentes.

    A caixa de diálogo Estilos de Coluna e Linha é aberta.

  14. Selecione o botão Adicionar até que cinco colunas sejam exibidas. Selecione as cinco colunas e, em seguida, selecione Percentagem na caixa Tipo de Tamanho. Defina o valor Porcentagem como 20. Esta 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 a opção Percentagem na caixa Tipo de Tamanho. Defina o valor Porcentagem como 20. Esta ação define cada linha com a mesma altura.

  17. Selecione OK para aceitar as alterações e, em seguida, selecione o glifo de etiqueta inteligente para fechar o painel de etiquetas 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 controlo TextBox para 5.

    O controle TextBox se move para uma posição centralizada 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 TextAlign do controle TextBox para Right.

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

  6. Selecione o controle TableLayoutPanel.

  7. No Toolbox, selecione o ícone Button.

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

  8. No Caixa de Ferramentas, selecione o ícone Button mais quatro vezes para preencher a segunda fila do controlo TableLayoutPanel.

  9. Selecione todos os cinco controles Button selecionando-os enquanto mantém pressionada a tecla Shift. Pressione , Ctrl,,+,, C, para copiar os controlos 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 mantendo pressionada a tecla Shift enquanto os seleciona.

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

    Todos os controles Button encaixam para preencher suas células de contenção.

  13. Na janela Propriedades , expanda o nó da propriedadeMargin. Defina o valor de All para 5.

    Todos os controles Button são dimensionados para serem menores, criando uma margem maior entre eles.

  14. Selecione botão10 e botão20e, em seguida, pressione Delete para removê-los do layout.

  15. Selecione button5 e button15, em seguida, altere o valor da propriedade RowSpan para 2. Esses botões representam os botões Limpar e = para o controle DemoCalculator.

Usar a janela de Estrutura de Tópicos do Documento

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

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

    A janela Estrutura de Documento mostra uma visualização em árvore do controlo DemoCalculator e dos seus controlos constituintes. Controles de contêiner como o SplitContainer mostram seus controles filho como subnós na árvore. Você também pode renomear os controles no local usando a janela Esquema do Documento.

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

  3. Usando a janela de 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:

    • botão1 para seteBotão

    • button2 para eightButton

    • button3 para nineButton

    • button4 para divisionButton

    • botão5 para botãoLimpar

    • button6 to fourButton

    • button7 para fiveButton

    • button8 para sixButton

    • botão9 para botãoMultiplicação

    • button11 para oneButton

    • button12 para twoButton

    • button13 para threeButton

    • botão14 para subtraçãoBotão

    • botão15 para botãoIgual

    • button16 para zeroButton

    • botão17 para botãoTrocarSinal

    • button18 para decimalButton

    • button19 to additionButton

  4. Usando o Estrutura de Tópicos do Documento e Propriedades janelas, 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 para frente)

    • Altere a propriedade de texto do controle clearButton para Limpar

    • Altere a propriedade de texto do controle fourButton para 4

    • Altere a propriedade de texto do controle fiveButton para 5

    • Altere 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

    • Altere 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)

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

  5. Na superfície do designer, selecione todos os controles Button ao selecioná-los enquanto mantém pressionada a tecla Shift.

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

Este conjunto de instruções completa 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 Windows Forms Designer permite implementar os esboços de todos os manipuladores de eventos para todos os botões com uma opção única.

  1. Na superfície do designer, selecione todos os controles Button selecionando-os enquanto mantém pressionada a tecla Shift.

  2. Selecione um dos controlos Button.

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

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

Testar o controlo

Como o controle DemoCalculator herda da classe UserControl, você pode testar seu comportamento com o UserControl Test Container. Para obter mais informações, consulte Como testar o comportamento em tempo de execução de um UserControl.

  1. Pressione F5 para criar e executar o controle DemoCalculator no UserControl Test Container.

  2. Selecione a borda entre os painéis SplitContainer e arraste-a para a esquerda e para a direita. O 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

O primeiro passo é criar o projeto de aplicação. Você usará este projeto para criar o aplicativo que mostra seu controle personalizado.

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

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

  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 DemoCalculatorTeste selecione Definir como Projeto de Inicialização.

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

Usar o controle no layout do formulário

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

  1. No Toolbox, expanda o nó Componentes DemoCalculatorLib.

  2. Arraste o controle de DemoCalculator de Caixa de Ferramentas para o formulário. Mova o controle para o canto superior esquerdo do formulário. Quando o controle está perto das bordas do formulário, snaplines aparece. As linhas de ajuste indicam a distância da propriedade Padding do formulário e a propriedade Margin do controle. Posicione o controle no local indicado pelas linhas de encaixe.

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

  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 as linhas de ajuste 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 expanda o nó da propriedade Padding. Altere o valor de All 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 posições diferentes. Observe como o controle DemoCalculator é redimensionado para se ajustar.

Próximos passos

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

Ver também