Partilhar via

Passo a passo: Organizar controles no Windows Forms usando snaplines

  • Artigo

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

Os snaplines 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 Interface do Usuário do Windows.

Os snaplines facilitam o alinhamento dos seus controlos, garantindo uma aparência e comportamento claros e profissionais (aspeto e comportamento).

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 os controles

Os snaplines oferecem uma maneira precisa e intuitiva de alinhar os controles em seu formulário. Eles aparecem quando você está movendo um controle selecionado ou controles perto de uma posição que se alinharia com outro controle ou conjunto de controles. A sua seleção irá "encaixar" na posição sugerida à medida que a move para além dos outros controlos.

Para organizar controles usando linhas de ajuste

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

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

  3. Mova o controlador Button em torno das bordas do formulário e observe onde as linhas de encaixe aparecem. Quando terminar, mova o controle Button perto do centro do formulário.

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

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

  6. Mova o segundo Button controle até que ele esteja posicionado diretamente acima do primeiro. Repare nas linhas de alinhamento que aparecem ao longo das bordas esquerda e direita de ambos os botões e repare que o controlo que está a mover se encaixa numa posição que está exatamente alinhada com o outro controlo.

  7. Selecione um dos controlos Button e mova-o para perto do outro, até que quase se toquem. Observe o snapline que aparece entre eles. Esta distância é a distância recomendada entre as fronteiras dos controlos. Observe também que o controle que você está movendo se encaixa nessa posição.

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

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

Alinhar às margens do formulário e do contentor

Os snaplines ajudam o utilizador a alinhar os seus controles às margens do formulário e do contêiner de forma consistente.

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

    Observação

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

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

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

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

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

  6. Arraste um controle do Caixa de Ferramentas do para o controle .

  7. Mova o controlo Button para perto da borda direita do controlo GroupBox até que uma linha guia apareça. Mova o controle Button dentro do controle GroupBox e observe onde as linhas de ajuste aparecem.

Alinhar a controles agrupados

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

  1. Selecione dois dos controles no formulário. Mova a seleção e anote as linhas de ajuste que aparecem entre sua seleção e os outros controles.

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

  3. Arraste um controle do Caixa de Ferramentas do para o controle .

  4. Selecione um dos controles Button e mova-o ao redor do controle GroupBox. Observe as linhas de ajuste que aparecem nas bordas do controle GroupBox. Observe também as linhas-guia que aparecem nas bordas do controlo Button contido pelo controlo GroupBox. Os controles que são filhos de um controle de contêiner também suportam snaplines.

Use linhas de ajuste para colocar um controle descrevendo seu tamanho

  1. Na Caixa de Ferramentas, clique no ícone de controlo Button. 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 um cursor em forma de cruz com o ícone de controlo Button anexado. Observe também as linhas de ajuste que parecem sugerir posições alinhadas para o controle Button.

  3. Clique e mantenha pressionado 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 parece indicar alinhamento.

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

Usar linhas de ajuste ao arrastar um elemento de controle da Caixa de Ferramentas

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

  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 controle Button será criado.

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

  4. Solte o botão do mouse. O controle é criado na posição indicada pelas linhas de encaixe.

Redimensionar um controle usando linhas de ajuste

  1. Arraste um controlo da Caixa de Ferramentas do para o seu formulário.

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

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

  4. Redimensione o controle de Button em direções diferentes e alinhe a alça de dimensionamento a controles diferentes. 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 do Caixa de Ferramentas para o seu formulário. Quando você soltar o controle no formulário, clique no glifo de marca inteligente e selecione a opção Definir texto como textBox1. Para mais detalhes, consulte Passo a passo: executar tarefas comuns usando ações de designer.

  2. Arraste um controlo Label do Caixa de Ferramentas para o seu formulário.

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

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

  5. Mova o Label controle ligeiramente para cima, até que o texto Label e o texto TextBox estejam alinhados. Repare na linha guia com estilo diferente que aparece, indicando quando os campos de texto de ambos os controlos estão alinhados.

Usar snaplines com navegação pelo teclado

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

  2. Pressione Ctrl+seta para baixo. Observe que o controle move o formulário para baixo 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 à medida que se move para baixo no formulário.

  4. Pressione Ctrl+seta para a direita. Observe que o controle se move através do formulário para 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 à medida que se move pelo formulário.

  6. Mova o controle ao redor do formulário com uma combinação de teclas de seta. Observe as posições que os controles ocupam e as linhas de encaixe que os acompanham.

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

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

Desativar seletivamente snaplines

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

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

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

  4. Arraste um controlo Button da Caixa de Ferramentas para a célula vazia do controlo TableLayoutPanel. Observe que não aparecem linhas de referência.

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

Desativar snaplines

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

Nenhuma linha de encaixe aparece e o controle não se encaixa em nenhuma posição de alinhamento potencial.

Para desativar snaplines 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 secção Modo de layout, altere a seleção de SnapLines para SnapToGrid.

  3. Selecione OK para aplicar a configuração.

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

Próximos passos

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

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

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

Ver também