Compartilhar via

Passo a passo: organizar controles no Windows Forms usando snaplines

O posicionamento preciso de controles em seu formulário é uma prioridade alta para muitos aplicativos. O Designer de Formulários do Windows oferece muitas ferramentas de layout para fazer isso. Um dos mais importantes é o SnapLine recurso.

Os snaplines mostram exatamente onde alinhar controles com outros controles. Elas também mostram as distâncias recomendadas para margens entre controles, conforme especificado pelas diretrizes da Interface do Usuário do Windows.

Os snaplines facilitam o alinhamento dos seus controles, proporcionando uma aparência nítida e comportamento profissional (aparência e funcionamento).

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.

Espaçar e alinhar controles

Os snaplines oferecem uma maneira precisa e intuitiva de alinhar controles em seu formulário. Eles aparecem quando você está movendo um controle ou controles selecionados perto de uma posição que se alinharia com outro controle ou conjunto de controles. Sua seleção "ajustará" à posição sugerida à medida que você a mover para além dos outros controles.

Para organizar controles usando snaplines

  1. Arraste um controle Button da caixa de ferramentas para o formulário.

  2. Mova o Button controle para o canto inferior direito do formulário. Observe as linhas-guia ("snaplines") que aparecem à medida que o controle Button se aproxima das bordas inferior e direita do formulário. Esses snaplines exibem a distância recomendada entre as bordas do controle e o formulário.

  3. Mova o Button controle ao redor das bordas do formulário e observe onde as linhas de ajuste aparecem. Quando terminar, mova o Button controle para perto do centro do formulário.

  4. Arraste outro controle Button 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 linha de encaixe que aparece na linha de base do texto de ambos os botões e note que o controle que você está movendo alinha em uma posição que está exatamente alinhado com o outro controle.

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

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

  8. Arraste dois controles Panel 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 linhas de encaixe que aparecem ao longo das bordas superior e inferior de ambos os controles e observe que o controle que você está movendo encaixa em uma posição exatamente nivelada com o outro controle.

Alinhar com as margens de formulário e contêiner

Os snaplines ajudam você a alinhar seus controles às margens de formulário e contêiner de maneira consistente.

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

    Observação

    Se a propriedade do Padding formulário estiver definida como 0,0,0,0, o Designer de Formulários do Windows fornecerá ao formulário um valor sombreado Padding de 9,9,9,9.9. Para substituir esse comportamento, atribua um valor diferente de 0,0,0,0.

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

  3. Mova o Button controle para perto da borda direita do formulário até que um snapline seja exibido. Essa distância agora é fornecida pelo valor da propriedade do Padding formulário.

  4. Arraste um controle GroupBox da caixa de ferramentas para o formulário.

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

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

  7. Mova o Button controle para perto da borda direita do GroupBox controle até que um snapline seja exibido. Mova o Button controle dentro do GroupBox controle e observe onde as linhas de ajuste aparecem.

Alinhar aos controles agrupados

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

  1. Selecione dois dos controles em seu formulário. Mova a seleção ao redor e anote as linhas de alinhamento que aparecem entre sua seleção e os outros controles.

  2. Arraste um controle GroupBox da caixa de ferramentas para o formulário.

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

  4. Selecione um dos Button controles e mova-o ao redor do GroupBox controle. Observe as linhas de alinhamento que aparecem nas bordas do controle GroupBox. Observe também os snaplines que aparecem nas bordas do Button controle contido pelo GroupBox controle. Os controles filhos de um controle de contêiner também dão suporte a snaplines.

Usar snaplines para colocar um controle delineando seu tamanho

  1. Na Caixa de Ferramentas, clique no ícone de Button controle. Não arraste-o 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 um retículo com o ícone de controle Button anexado. Observe também as linhas-guia que parecem sugerir posições alinhadas para o controle Button.

  3. Clique e segure o botão do mouse.

  4. Arraste o ponteiro do mouse ao redor do formulário. Observe que um contorno é desenhado, indicando a posição e o tamanho do controle.

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

  6. Solte o botão do mouse. O controle é criado na posição e no tamanho indicados pelo contorno.

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 libere o botão do mouse.

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

  3. Arraste o ponteiro do mouse ao redor do formulário. Observe os "snaplines" que parecem sugerir posições alinhadas para o controle Button. Localize uma posição alinhada com outros controles.

  4. Solte o botão do mouse. O controle é criado na posição indicada pelos snaplines.

Redimensionar um controle usando snaplines

  1. Arraste um controle Button da caixa de ferramentas para o formulário.

  2. Redimensione o controle Button segurando uma das alças nos cantos e arrastando. Para obter detalhes, consulte Como redimensionar controles nos Windows Forms.

  3. Arraste a alça de dimensionamento até que uma das bordas do controle Button esteja alinhada com outro controle. Observe que um snapline é exibido. Observe também que a alça de dimensionamento se ajusta à posição indicada pela linha de encaixe.

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

Alinhar um rótulo ao texto de um controle

  1. Arraste um controle TextBox 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 Passo a passo: executar tarefas comuns usando ações de designer.

  2. Arraste um controle Label 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 ajustarem ao texto de exibição.

  4. Mova o Label controle para a esquerda do TextBox controle, para que ele seja alinhado com a borda inferior do TextBox controle. Observe o snapline que aparece nas bordas inferiores dos dois controles.

  5. Mova o Label controle ligeiramente para cima até que o Label texto e o TextBox texto sejam alinhados. Observe o snapline com estilo diferente que aparece, indicando quando os campos de texto de ambos os controles são alinhados.

Usar snaplines com navegação por teclado

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

  2. Pressione aseta para baixo+. Observe que o controle move para baixo o formulário para a primeira posição de alinhamento horizontal disponível.

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

  4. Pressione aseta para a direita+. Observe que o controle se move pelo formulário para a primeira posição de alinhamento vertical disponível.

  5. Pressione aseta para a direita+ até que o controle atinja o lado do formulário. Observe as posições que ocupa à medida que se move pelo formulário.

  6. Mova o controle ao redor do formulário com uma combinação de teclas de direção. Observe as posições que o controle ocupa e os snaplines que os acompanham.

  7. Pressione Shift+ + setas para redimensionar o Button controle por incrementos de um pixel.

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

Desabilitar seletivamente os snaplines

  1. Arraste um controle TableLayoutPanel 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 duas vezes mais. 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 nenhuma linha de ajuste é exibida.

  5. Arraste o controle Button para fora do controle TableLayoutPanel e mova-o ao redor do controle TableLayoutPanel. Observe que os snaplines aparecem novamente.

Desativar linhas de alinhamento

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

Nenhuma snapline é exibida e o controle não se ajusta a nenhuma das possíveis posições de alinhamento.

Para desabilitar snaplines no ambiente de design

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

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

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

  4. Selecione um controle em seu formulário e mova-o em torno dos outros controles. Observe que os snaplines não aparecem.

Próximas etapas

Os snaplines oferecem um meio intuitivo de alinhar controles em seu formulário. Sugestões para exploração adicional incluem:

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

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

Consulte também

  • Last updated on