Demonstra Passo a passo: Introdução ao Designer de Formulários do Windows

  • Artigo

O Windows Forms Designer fornece várias ferramentas para a criação de aplicativos de Formulários do Windows.Esta explicação passo a passo mostra como criar um aplicativo usando as várias ferramentas fornecidas pelo designer.Tarefas ilustradas nesta explicação passo a passo incluem:

  • Criando um projeto do Windows Forms.

  • Organizando controles usando snaplines.

  • Realizar tarefas de designer usando marcas inteligentes.

  • Definir margens e espaçamendo para os controles.

  • Organizando controles utilizando um controle TableLayoutPanel.

  • Particionando o layout do seu controle usando um controle SplitContainer.

  • Navegando em seu layout com a janela Estrutura de Tópicos do Documento.

  • Posicionando controles com a exibição de informações de tamanho e local.

  • Definido valores de propriedades usando as janelas Propriedades.

Quando você 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 (IU) para uma calculadora simples.A tomada de tela a seguir mostra o layout geral do controle Calculadora.

IU da Calculadora

Pré-requisitos

A fim de concluir este explicação passo a passo, será necessário:

  • Dê permissões suficientes para poder criar e executar projetos de aplicativos de Formulários do Windows no computador onde o Visual Studio está instalado.
Observação:

As caixas de diálogo e comandos de menu demonstradas podem ser diferentes daqueles descritas na Ajuda, dependendo das configurações ativas ou configurações de edição.Para alterar as configurações, escolher Importar e exportar configurações on the Ferramentas menu.Para obter mais informações, consulte Configurações do Visual Studio.

Criando o projeto de um controle personalizado

A primeira etapa é criar o projeto de controle DemoCalculator.

Criando o projeto de um controle personalizado

  1. No menu Arquivo, clique em Novo e, em seguida, clique em Projeto. para abrir a caixa de diálogo Novo Projeto.

  2. Selecione o modelo de projeto Biblioteca de Controles do Windows na lista dos projetos Visual C#, digite DemoCalculatorLib na caixa Nome e, em seguida, clique em OK.

  3. No Gerenciador de Soluções, clique com o botão direito do mouse em UserControl1.cs e em seguida, clique em Renomear.Alterar o nome de arquivo para DemoCalculator.cs.Clique no botão Sim quando for perguntado se você desejar renomear todas as referências para o elemento de código "UserControl1".

    O Windows Forms Designer mostra a superfície de projeto para o controle DemoCalculator.Neste modo de exibição, você pode projetar graficamente a aparência de seu controle, selecionando os controles e componentes da Caixa de Ferramentas e colocando-os na superfície do projeto.Para obter mais informações sobre controles personalizados, consulte Variedades de controles Personalizars.

Criando o layout do controle

O controle DemoCalculator contém vários controles de Formulários do Windows.Neste procedimento, você irá organizar os controles usando alguns dos recursos de desenvolvimento rápido de aplicativos (RAD) do Windows Forms Designer.

Para criar o layout do controle

  1. No Windows Forms Designer, mude o controle DemoCalculator para um tamanho maior, clicando na alça de dimensionamento no canto inferior direito e arrastando-a para baixo e para a direita.No canto inferior direito do Visual Studio, encontre as informações de tamanho e local dos controles.Defina o tamanho do controle para uma largura de 500 e uma altura de 400 observando as informações de tamanho enquanto você redimensiona o controle.

  2. Na caixa de ferramentas, clique no nó Recipientes para abri-lo.Selecione o controle SplitContainer e arraste-o para a superfície do projeto.

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

    Observação:

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

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

    O controle SplitContainer se reduz ao tamanho padrão.Seu tamanho não segue mais o tamanho do DemoCalculator controle.

  4. Clique no glifo de marca inteligente () no canto superior direito do controle SplitContainer.Clique em Dock in parent container (Encaixar no recipiente pai) para definir a propriedade Dock como Fill.

    O controle SplitContainer se encaixa nos limites do controle DemoCalculator.

    Observação:

    Vários controles oferecem marcas inteligentes para facilitar o design.Para obter mais informações, consulte Demonstra Passo a passo: Executando tarefas ComComumComum usando Inteligente marcas em controles de Windows Forms.

  5. Clique na borda vertical entre os painéis e arraste-a para a direita, para que a maior parte do espaço seja tomada pelo painel esquerdo.

    O SplitContainer divide o controle DemoCalculator em dois painéis, com uma borda móvel separando-os.O painel no lado esquerdo conterá os botões e o display da calculadora, e o painel no lado direito mostrará 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, clique no nó Controles Comuns para abri-lo.Selecione o controle ListView e arraste-o para o painel à direita do controle SplitContainer.

  8. Clique no glifo de marca inteligente do controle ListView.Na painel de marcas inteligentes, altere a configuração View para Details.

  9. Na painel de marcas inteligentes, clique em Editar colunas.

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

  10. Na caixa de diálogo Editor de Coleção ColumnHeader, clique no botão Adicionar para adicionar uma coluna ao controle ListView.Alterar o valor Text propriedade ao histórico. Clique em OK para criar o projeto.

  11. Na painel de marcas inteligentes, clique em Encaixar no Recipiente Pai e em seguida, clique no glifo de marca inteligente para fechar a painel de marcas inteligentes.

  12. A partir do nó Recipientes na caixa de ferramentas, arraste um controle TableLayoutPanel no painel esquerdo do controle SplitContainer.

    O controle TableLayoutPanel aparece na superfície do projeto com seu painel de marcas inteligentes aberto.O controle TableLayoutPanel organiza seus controles filhos em uma grade.Para obter mais informações, consulte Demonstra Passo a passo: Organizando controles no Windows Forms usando um TableLayoutPanel. O controle TableLayoutPanel conterá os botões e o display do controle DemoCalculator.

  13. Clique em Editar Linhas e Colunas no painel de marcas inteligentes.

    Abra a caixa de diálogo Estilos das Linhas e Colunas.

  14. Clique o botão Adicionar até que cinco colunas sejam exibidas.Selecione todas as cinco colunas e, em seguida, clique no botão de opção Por Cento na caixa Tipo de Tamanho.Defina o valor Por Cento para 20.Isto define cada coluna para a mesma largura.

  15. Na caixa de rolagem Exibir, clique em Linhas.

  16. Clique no botão Adicionar até que cinco linhas sejam exibidas.Selecione todas as cinco linhas e, em seguida, clique no botão de opção Por Cento na caixa Tipo de Tamanho.Defina o valor Por Cento para 20.Isto define cada linha para a mesma altura.

  17. Clique em OK para aceitar suas alterações e em seguida, clique no glifo de marca inteligente para fechar o painel de marcas inteligentes.

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

Preenchendo o controle

Agora que o layout do controle está configurado, você pode preencher o controle DemoCalculator com botões e um display.

Para preencher o controle

  1. Na caixa de ferramentas, clique duas vezes no ícone do 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 move-se para uma posição que é centralizada na sua linha.

  3. Alterar 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 de Propriedades, expanda o nó Font.Defina Size para 14 e Bold para true para o controle TextBox.

  6. Selecione o controle TableLayoutPanel.

  7. Na caixa de ferramentas, clique duas vezes no ícone do controle Button.

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

  8. Na caixa de ferramentas, dê um duplo clique no ícone Button mais quatro vezes para preencher a segunda linha do controle TableLayoutPanel.

  9. Selecione todos os cinco controles Button clicando neles enquanto mantém pressionada a tecla SHIFT.Pressione CTRL+C para copiar os controles Button para a Área de Transferência.

  10. Pressione as teclas 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 clicando neles enquanto mantém pressionada a tecla SHIFT.

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

    Todos os controles Button encaixam-se para preencher suas células recipientes.

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

    Todos os controles Button serão dimensionados para menor para criar uma margem maior entre eles.

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

  15. Selecione button5 e button15 e em seguida, altere o valor de sua propriedade RowSpan para 2.Esses serão os botões Limpar e = do controle DemoCalculator.

Quando o controle ou formulário é preenchido com vários controles, talvez seja mais fácil navegar no layout com a janela Estrutura do Documento.

Para navegar usando a janela Estrutura do Documento

  1. No menu View, aponte para Other Windows e, em seguida, clique em Document Outline

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

  2. Na jaenla Estrutura de Tópicos do Documento, clique com o botão direito do mouse em Button1 e em seguida, clique em Renomear.Altere seu nome para sevenButton.

  3. Documento usando a janela Estrutura de Tópcios 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 texto do controle sevenButton para 7

    • Altere a propriedade texto do controle eightButton para 8

    • Altere a propriedade texto do controle nineButton para 9

    • Altere a propriedade texto do controle divisionButton para /

    • Altere a propriedade texto do controle clearButton para Limpar

    • Altere a propriedade texto do controle fourButton para 4

    • Altere a propriedade texto do controle fiveButton para 5

    • Altere a propriedade texto do controle sixButton para 6

    • Altere a propriedade texto do controle multiplicationButton para *

    • Altere a propriedade texto do controle oneButton para 1

    • Altere a propriedade texto do controle twoButton para 2

    • Altere a propriedade texto do controle threeButton para 3

    • Altere a propriedade texto do controle subtractionButton para -

    • Altere a propriedade texto do controle equalsButton para =

    • Altere a propriedade texto do controle zeroButton para 0

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

    • Altere a propriedade texto do controle decimalButton para .

    • Altere a propriedade texto do controle additionButton para +

  5. Na superfície do projeto, selecione todos os controles Button clicando neles enquanto mantém pressionada a tecla SHIFT.

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

    Isso conclui o design do controle DemoCalculator.Tudo o que falta é fornecer a lógica da calculadora.

Implementando manipuladores de eventos

Os botões do controle DemoCalculator tem manipuladores de eventos que podem ser usados para implementar grande parte da lógica da calculadora.O Windows Forms Designer permite que você implemente os modelos de todos os manipuladores de eventos do todos os botões com um clique duplo.

Para implementar manipuladores de eventos

  1. Na superfície do projeto, selecione todos os controles Button clicando neles enquanto mantém pressionada a tecla SHIFT.

  2. Dê um duplo clique em um dos controles Button.

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

Testando o controle

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

Para testar o controle

  • Pressione F5 para criar e executar o controle DemoCalculator na caixa Recipiente de Teste UserControl.

    Clique na borda entre os painéis SplitContainer e arraste-o para a esquerda e direita.O TableLayoutPanel e todos os seus controles filhos redimensiona-se para caber no espaço disponível.

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

Criando o projeto

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

Para criar o projeto

  1. No menu Arquivo, clique em Novo e, em seguida, clique em Novo Projeto para abrir a caixa de diálogo Novo Projeto.

  2. Selecione o modelo de projeto Aplicativo do Windows na lista dos projetos Visual C#, digite DemoCalculatorTest na caixa Nome e, em seguida, clique em OK.

  3. No Gerenciador de Soluções, clique com o botão direito do mouse na pasta Referências e em seguida, clique em Adicionar Referência para abrir a caixa de diálogoAdicionar Referência.

  4. Clique na guia Nome do Projeto e, em seguida, clique duas vezes em seu projeto DemoCalculatorLib para adicionar a referência ao projeto de teste.

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

  6. No Windows Forms Designer, aumente o tamanho do formulário para cerca de 700 x 500.

Usando seu controle no layout do formulário

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

Para usar o controle no layout do formulário

  1. Na caixa de ferramentas, expanda o nó Componentes DemoCalculatorLib.

  2. Arraste o controle DemoCalculator da caixa de ferramentas para o formulário.Segurando o botão do mouse, permitir que a caixa de ferramentas feche e em seguida, mova o glifo que representa o controle para o canto superior esquerdo do formulário.Quando o glifo está próximo a bordas do formulário, você verá snaplines aparecem.Elas indicam a distância entre a propriedade Padding do formulário e a propriedade Margin do controle.Solte o controle no local indicado pelo snaplines.

    Para obter mais informações, consulte Demonstra Passo a passo: Organizando controles no Windows Forms usando Snaplines.

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

  4. Mova o controle Button pelo controle DemoCalculator e observe onde as snaplines aparecem.Você pode alinhar os controles facilmente e com precisão usando este recurso.Exclua o controle Button quando tiver terminado.

  5. Clique com o botão direito do mouse no controle DemoCalculator e em seguida, clique em Propriedades.

  6. Altere o valor da propriedade Dock para Fill.

  7. Selecione o formulário e em seguida, expanda o nó de propriedade Padding.Altere o valor de Todos 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 caber.

Próximas etapas

Esta explicação passo a passo mostra como construir a interface do usuário de uma calculadora simples.Talvez você deseja extender a funcionalidade nos seguintes aspectos:

  • Implementar a lógica Calculadora.Isso pode parecer simples, mas há complexidades interessantes associadas com as transições de estado da calculadora.

  • Empacotar o aplicativo Calculadora para implantação.Para obter mais informações, consulte Como: publicar um aplicativo ClickOnce..

Consulte também

Tarefas

Demonstra Passo a passo: Organizando controles no Windows Forms usando um TableLayoutPanel

Demonstra Passo a passo: Adicionar marcas inteligentes a um componente do Windows Forms

Demonstra Passo a passo: Organizando controles no Windows Forms usando Snaplines

Demonstra Passo a passo: Populating automaticamente a caixa de ferramentas com componentes Personalizars

Como: Teste o comportamento de tempo de execução de um UserControl

Solucionando problemas de Controlarar e o componente Authoring

Solucionando problemas de desenvolvimento de design-time

Conceitos

Variedades de controles Personalizars

Outros recursos

Criando um Novo Formulário do Windows