Demonstra Passo a passo: Organizar controles no Windows Forms usando snaplines

  • Artigo

O posicionamento exato dos controles no formulário é uma prioridade alta para muitos aplicativos. O Designer de Formulários do Windows fornece várias ferramentas de layout para fazer isso. Um dos mais importantes é o SnapLine recurso.

As guias de alinhamento mostram exatamente onde alinhar os controles com outros controles. Eles também mostram as distâncias recomendadas para margens entre controles, conforme especificado pelas diretrizes da Interface do Usuário do Windows.

As guias de alinhamento facilitam o alinhamento dos controles para garantir uma aparência e um comportamento claros e profissionais.

Criar o projeto

  1. No Visual Studio, crie um projeto de aplicativo baseado no Windows chamado "SnaplineExample".

  2. Selecione o formulário no Designer de Formulários.

Espalhe e alinhe controles

As guias de alinhamento oferecem uma maneira intuitiva e precisa de alinhar os controles no formulário. Elas aparecem quando você está movendo um controle ou controles selecionados para perto de uma posição que se alinha a outro controle ou conjunto de controles. Sua seleção será "ajustada" para a posição sugerida ao ser movida passando pelos outros controles.

Para organizar os controles usando guias de alinhamento

  1. Arraste um Button controle da Caixa de Ferramentas para o formulário.

  2. Mova o controle para o Button canto inferior direito do formulário. Observe as linhas de ajuste que aparecem quando o Button controle se aproxima das bordas inferior e direita do formulário. Essas guias de alinhamento exibem a distância recomendada entre as bordas do controle e o formulário.

  3. Mova o Button controle pelas bordas do formulário e observe onde os snaplines aparecem. Quando terminar, mova o Button controle para perto do centro do formulário.

  4. Arraste outro Button controle da Caixa de Ferramentas para o formulário.

  5. Mova o segundo Button controle até que ele esteja quase nivelado com o primeiro. Observe a guia de alinhamento que aparece na linha de base de texto de ambos os botões e observe que o controle que você está movendo se ajusta para uma posição nivelada exatamente com o outro controle.

  6. Mova o segundo Button controle até que ele seja posicionado diretamente acima do primeiro. Observe as guias de alinhamento que aparecem ao longo das bordas esquerda e direita de ambos os botões e observe que o controle que você está movendo se ajusta para uma posição alinhada exatamente com o outro controle.

  7. Selecione um dos Button controles e aproxime-o do outro, até que eles estejam quase tocando. Observe a guia de alinhamento que aparece entre eles. Essa é a distância recomendada entre as bordas dos controles. Observe também que o controle que você está movendo se encaixa nessa posição.

  8. Arraste dois Panel controles da Caixa de Ferramentas para o formulário.

  9. Mova um dos Panel controles até que ele esteja quase nivelado com o primeiro. Observe as guias de alinhamento que aparecem ao longo das bordas superior e inferior de ambos os controles e observe que o controle que você está movendo se ajusta para uma posição alinhada exatamente com o outro controle.

Alinhar às margens do formulário e do contêiner

As guias de alinhamento ajudam a alinhar os controles às margens do formulário e do contêiner de uma maneira consistente.

  1. Selecione um dos Button controles e mova-o para perto da borda direita do formulário até que uma linha de ajuste seja exibida. A distância do snapline da borda direita é a soma da propriedade do controle Margin e dos valores de propriedade do Padding formulário.

    Observação

    Se a propriedade do Padding formulário for definida como 0,0,0,0, o Windows Forms Designer dará ao formulário um valor sombreado Padding de 9,9,9,9. Para substituir esse comportamento, atribua um valor diferente de 0,0,0,0.

  2. Altere o Button valor da propriedade do controle expandindo a Margin entrada na janela Propriedades e definindo a All propriedade como Margin 0. Para obter detalhes, consulte Instruções passo a passo: projetando controles dos Windows Forms com preenchimento, margens e a propriedade AutoSize.

  3. Mova o Button controle para perto da borda direita do formulário até que uma linha de ajuste seja exibida. Essa distância agora é dada pelo valor da propriedade do Padding formulário.

  4. Arraste um GroupBox controle da Caixa de Ferramentas para o formulário.

  5. Altere o GroupBox valor da propriedade do controle expandindo a Padding entrada na janela Propriedades e definindo a All propriedade como 10Padding.

  6. Arraste um Button controle da caixa de ferramentas para o GroupBox controle.

  7. Mova o Button controle para perto da borda direita do controle até que uma linha de GroupBox ajuste seja exibida. Mova o Button controle dentro do GroupBox controle e observe onde os snaplines aparecem.

Alinhar a controles agrupados

Você pode usar snaplines para alinhar controles agrupados, bem como controles dentro de um GroupBox controle.

  1. Selecione dois dos controles no formulário. Mova um pouco a seleção e observe as guias de alinhamento que aparecem entre a seleção e os outros controles.

  2. Arraste um GroupBox controle da Caixa de Ferramentas para o formulário.

  3. Arraste um Button controle da caixa de ferramentas para o GroupBox controle.

  4. Selecione um dos Button controles e mova-o ao redor do GroupBox controle. Observe as linhas de ajuste que aparecem nas bordas do GroupBox controle. Observe também as linhas de ajuste que aparecem nas bordas do Button controle contido pelo GroupBox controle. Os controles que são filhos de uma caixa de controles também dão suporte a guias de alinhamento.

Usar snaplines para colocar um controle delineando seu tamanho

  1. Na caixa de ferramentas, clique no Button ícone de controle. Não o arraste para o formulário.

  2. Mova o ponteiro do mouse sobre a superfície de design do formulário. Observe que o ponteiro muda para uma mira com o ícone de Button controle anexado. Observe também as linhas de ajuste que parecem sugerir posições alinhadas para o Button controle.

  3. Clique e mantenha o botão do mouse pressionado.

  4. Arraste o ponteiro do mouse sobre o formulário. Observe que uma estrutura de tópicos é desenhada, indicando a posição e o tamanho do controle.

  5. Arraste o ponteiro até que ele se alinhe com o outro controle no formulário. Observe que aparece uma guia de alinhamento para indicar o alinhamento.

  6. Solte o botão do mouse. O controle é criado com a posição e com o tamanho indicados pela estrutura de tópicos.

Usar snaplines ao arrastar um controle da Caixa de Ferramentas

  1. Arraste um Button controle da Caixa de Ferramentas para o formulário, mas não solte o botão do mouse.

  2. Mova o ponteiro do mouse sobre a superfície de design do formulário. Observe que o ponteiro muda para indicar a posição na qual o novo Button controle será criado.

  3. Arraste o ponteiro do mouse sobre o formulário. Observe as linhas de ajuste que parecem sugerir posições alinhadas para o Button controle. Localize uma posição que esteja alinhada com outros controles.

  4. Solte o botão do mouse. O controle é criado na posição indicada pela guia de alinhamento.

Redimensionar um controle usando snaplines

  1. Arraste um Button controle da Caixa de Ferramentas para o formulário.

  2. Redimensione o Button controle pegando uma das alças de dimensionamento de canto e arrastando. Para obter detalhes, consulte Instruções: redimensionar controles nos Windows Forms.

  3. Arraste a alça de dimensionamento até que uma das bordas do controle esteja alinhada Button com outro controle. Observe que uma guia de alinhamento aparece. Observe também que a alça de dimensionamento se encaixa na posição indicada pela guia de alinhamento.

  4. Redimensione o Button controle em direções diferentes e alinhe a alça de dimensionamento a controles diferentes. Observe como as guias de alinhamento aparecem em várias orientações para indicar o alinhamento.

Alinhar um rótulo ao texto de um controle

  1. Arraste um TextBox controle da Caixa de Ferramentas para o formulário. Quando você soltar o TextBox controle no formulário, clique no glifo de marca inteligente e selecione a opção Definir texto para textBox1 . Para obter detalhes, consulte Demonstra Passo a passo: executar tarefas comuns usando ações de designer.

  2. Arraste um Label controle da Caixa de Ferramentas para o formulário.

  3. Altere o valor da propriedade Label do controle AutoSize para true. Observe que as bordas do controle são ajustadas para se ajustar ao texto de exibição.

  4. Mova o Label controle para a esquerda do controle, para que ele esteja alinhado com a borda inferior do TextBoxTextBox controle. Observe a guia de alinhamento que aparece ao longo das bordas inferiores dos dois controles.

  5. Mova o controle ligeiramente para cima, até que o texto e o LabelLabelTextBox texto estejam alinhados. Observe a guia de alinhamento com um estilo diferente que aparece, indicando quando os campos de texto de ambos os controles estão alinhados.

Usar snaplines com navegação pelo teclado

  1. Arraste um Button controle da Caixa de Ferramentas para o formulário. Coloque-o no canto superior esquerdo do formulário.

  2. Pressione Ctrl+seta para baixo. Observe que o controle se move para baixo no formulário até a primeira posição de alinhamento horizontal disponível.

  3. Pressione Ctrl+seta para baixo até que o controle atinja a parte inferior do formulário. Observe as posições que ele ocupa conforme se move para baixo no formulário.

  4. Pressione Ctrl+seta para a direita. Observe que o controle percorre o formulário até a primeira posição de alinhamento vertical disponível.

  5. Pressione Ctrl+seta para a direita até que o controle atinja o lado do formulário. Observe as posições que ele ocupa conforme se move no formulário.

  6. Mova o controle no formulário com uma combinação de teclas de direção. Observe as posições ocupadas pelo controle e as guias de alinhamento que o acompanham.

  7. Pressione as teclas de seta Shift para redimensionar o Button controle por incrementos de+um pixel.

  8. Pressione Ctrl+Shift+teclas de seta para redimensionar o controle em incrementos de Button snapline.

Desativar seletivamente snaplines

  1. Arraste um TableLayoutPanel controle da Caixa de Ferramentas para o formulário.

  2. Clique duas vezes no Button ícone de controle na caixa de ferramentas. Observe que um novo controle de botão aparece na TableLayoutPanel primeira célula do controle.

  3. Clique duas vezes no Button ícone de controle na caixa de ferramentas mais duas vezes. Isso deixa uma célula vazia no TableLayoutPanel controle.

  4. Arraste um Button controle da caixa de ferramentas para a célula vazia do TableLayoutPanel controle. Observe que não aparece nenhuma guia de alinhamento.

  5. Arraste o controle para fora do TableLayoutPanel controle e mova-o Button ao redor do TableLayoutPanel controle. Observe que as guias de alinhamento aparecem novamente.

Desativar snaplines

Pressione a tecla Alt e enquanto move um controle ao redor do formulário.

Nenhuma linha de ajuste é exibida e o controle não se ajusta a nenhuma posição de alinhamento potencial.

Para desabilitar as guias de alinhamento no ambiente de design

  1. No menu Ferramentas, abra a caixa de diálogo Opções. Selecione Windows Forms Designer.

  2. Selecione o nó Geral. Na seção Modo de Layout, altere a seleção de SnapLines para SnapToGrid.

  3. Clique em OK para aplicar a configuração.

  4. Selecione um controle no formulário e mova-o em torno dos outros controles. Observe que as guias de alinhamento não aparecem.

Próximas etapas

As guias de alinhamento oferecem uma forma intuitiva de alinhar controles no formulário. Sugestões para exploração adicional incluem:

  • Tente aninhar um GroupBox controle dentro de outro GroupBox controle. Coloque um Button controle dentro do controle filho GroupBox e outro dentro do controle pai GroupBox . Mova os controles para ver como os Button snaplines cruzam os limites do contêiner.

  • Crie uma coluna de controles e uma coluna correspondente de TextBoxLabel controles. Defina o valor da propriedade dos LabelAutoSize controles como true. Use snaplines para mover os Label controles para que o texto exibido seja alinhado com o texto nos TextBox controles.

Confira também