Compartilhar via

Demonstra Passo a passo: Introdução ao Windows Forms Designer

  • 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. As tarefas ilustradas neste 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.

  • Definindo valores de propriedade usando a janela 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

Interface do usuário da calculadora do tour guiado

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çãoObservação

As caixas de diálogo e comandos de menu demonstradas podem ser diferentes daqueles descritos na Ajuda, dependendo das configurações ativas ou configurações de edição. Para alterar as configurações, escolha Import and Export Settings sobre o Ferramentas menu. Para obter mais informações, consulte Trabalhando com configurações.

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. Na lista de Visual Basic ou Visual C# projetos na Windows categoria, selecione o Windows Forms Control Library o modelo de projeto.

  3. No nome , digite DemoCalculatorLib e, em seguida, clique em OK.

  4. No Solution Explorer, clique com o botão direito UserControl1.vb ou UserControl1. cse em seguida, clique em Renomear.

  5. Altere o nome de arquivo para DemoCalculator.vb ou 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 personalizados.

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çãoObservação

    O controle SplitContainer dimensiona-se para caber no controle DemoCalculator. 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 (Glifo de marca inteligente) no canto superior direito do controle SplitContainer. Clique em Encaixar no contêiner pai para definir o Dock propriedade para Fill.

    O controle SplitContainer se encaixa nos limites do controle DemoCalculator.

    ObservaçãoObservação

    Vários controles oferecem marcas inteligentes para facilitar o design. Para obter mais informações, consulte Demonstra Passo a passo: Executar tarefas comuns usando Smart Tags em controles do 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 da coluna Text propriedade histórico. Clique em OK para criar o projeto.

  11. No painel de marca inteligente, clique em Encaixar no contêiner paie em seguida, clique no glifo de marca inteligente para fechar o 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 em formulários do Windows 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:

    • button1para sevenButton

    • button2paraeightButton

    • button3paranineButton

    • button4paradivisionButton

    • button5para clearButton

    • button6para fourButton

    • button7para fiveButton

    • button8para sixButton

    • button9para multiplicationButton

    • button11para oneButton

    • button12para twoButton

    • button13para threeButton

    • button14para subtractionButton

    • button15para equalsButton

    • button16para zeroButton

    • button17para changeSignButton

    • button18para decimalButton

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

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

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

  3. Quando você terminar o teste de controle, clique em Fechar.

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. Na lista de Visual Basic ou Visual C# projetos, selecionados o Windows Forms Application o modelo de projeto.

  3. No nome , digite DemoCalculatorTest e, em seguida, clique em OK.

  4. No Solution Explorer, clique com o botão direito do DemoCalculatorTest de projeto e, em seguida, clique em Add Reference para abrir o Add Reference caixa de diálogo.

  5. Clique o projetos guia e, em seguida, clique duas vezes em seu DemoCalculatorLib o projeto para adicionar a referência para o projeto de teste.

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

  7. 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. Mova o controle ao canto superior esquerdo do formulário. Quando o controle está próximo de bordas do formulário, você verá linhas de ajuste aparecer. Elas indicam a distância entre a propriedade Padding do formulário e a propriedade Margin do controle. Posicione o controle no local indicado pelas linhas de ajuste.

    Para obter mais informações, consulte Demonstra Passo a passo: Organizando controles em Windows Forms usando linhas de ajuste.

  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:

Consulte também

Tarefas

Demonstra Passo a passo: Organizando controles em formulários do Windows usando um TableLayoutPanel

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

Demonstra Passo a passo: Organizando controles em Windows Forms usando linhas de ajuste

Demonstra Passo a passo: Preenchendo automaticamente a caixa de ferramentas com componentes personalizados

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

Solução de problemas de controle e autoria de componentes

Desenvolvimento de tempo de Design de solução de problemas

Conceitos

Variedades de controles personalizados

Outros recursos

Criando um Novo Formulário do Windows

Histórico de alterações

Date

History

Motivo

Setembro de 2010

Incluído suporte para Visual Basic.

Comentários do cliente.