Compartilhar via

Passo a passo: organize os controles com preenchimento de espaço, margens e a propriedade AutoSize

O posicionamento preciso de controles em seu formulário é uma prioridade alta para muitos aplicativos. O Designer de Formulários do Windows no Visual Studio oferece muitas ferramentas de layout para fazer isso. Três das mais importantes são as propriedades Margin, Paddinge AutoSize, que estão presentes em todos os controles do Windows Forms.

A propriedade Margin define o espaço ao redor do controle que mantém outros controles a uma distância especificada das bordas do controle.

A propriedade Padding define o espaço no interior de um controle que mantém o conteúdo do controle (por exemplo, o valor de sua propriedade Text) a uma distância especificada das bordas do controle.

A ilustração a seguir mostra as propriedades Padding e Margin em um controle.

Preenchimento de espaço e margem para controles do Windows Forms

A propriedade AutoSize instrui um controle a dimensionar-se automaticamente conforme o seu conteúdo. Ele não se redimensionará para ser menor que o valor de sua propriedade original Size e levará em conta o valor de sua propriedade Padding.

Pré-requisitos

Você precisará do Visual Studio para concluir este passo a passo.

Criar o projeto

  1. No Visual Studio, crie um projeto de Aplicativo do Windows chamado LayoutExample.

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

Definir margens para controles

Você pode definir a distância padrão entre seus controles usando a propriedade Margin. Quando você move um controle feche suficiente para um outro controle, você verá uma guia de alinhamento que mostra as margens para os dois controles. O controle que você está movendo também se ajustará à distância definida pelas margens.

Organize controles no seu formulário usando a propriedade Margin

  1. Arraste dois controles Button da caixa de ferramentas para o formulário.

  2. Selecione um dos controles Button e mova-o para perto do outro, até que eles estejam quase se tocando.

    Observe a guia de alinhamento que aparece entre eles. Essa distância é a soma dos valores Margin dos dois controles. O controle que você está movendo se ajusta a essa distância. Para mais detalhes, consulte Instruções passo a passo: organizando controles no Windows Forms usando linhas de alinhamento.

  3. Altere a propriedade de um dos controles expandindo a entrada na janela propriedades e definindo a propriedade como 20.

  4. Selecione um dos controles Button e mova-o para perto do outro.

    A guia de alinhamento definindo a soma dos valores de margem é maior e o controle se ajusta a uma distância maior de outro controle.

  5. Altere a propriedade do controle selecionado expandindo a entrada na janela Propriedades do e definindo a propriedade como 5.

  6. Mova o controle selecionado abaixo do outro controle e observe que o snapline é mais curto. Mova o controle selecionado para a esquerda do outro controle e observe que o snapline mantém o valor observado na etapa 4.

  7. Você pode definir cada um dos aspectos da propriedade Margin, Left, Top, Right, Bottom, para valores diferentes ou pode defini-los todos com o mesmo valor com a propriedade All.

Definir espaçamento para controles

Para alcançar o layout preciso necessário para seu aplicativo, os controles geralmente contém controles filho. Quando você deseja especificar a proximidade da borda do controle filho à borda do controle pai, use a propriedade Padding do controle pai em conjunto com a propriedade Margin do controle filho. A propriedade Padding também é usada para controlar a proximidade do conteúdo de um controle (por exemplo, a propriedade Button de um controle de Text) em relação às bordas dele.

Organize os controles em seu formulário usando preenchimento de espaço

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

  2. Altere o valor da propriedade Button do controle AutoSize para verdadeiro.

  3. Altere a propriedade expandindo a entrada na janela Propriedades do e definindo a propriedade como 5.

    O controle se expande para fornecer espaço para o novo preenchimento.

  4. Arraste um controle GroupBox da caixa de ferramentas para o formulário. Arraste um controle Button da caixa de ferramentas para o controle GroupBox. Posicione o controle Button de forma que ele fique alinhado com o canto inferior direito do controle GroupBox.

    Observe as guias de alinhamento que aparecem à medida que o controle Button se aproxima das bordas inferior e direita do controle GroupBox. Essas guias de alinhamento correspondem à propriedade Margin do Button.

  5. Altere a propriedade GroupBox do controle Padding expandindo a entrada Padding na janela Propriedades e definindo a propriedade All como 20.

  6. Selecione o controle Button dentro do controle GroupBox e mova-o em direção ao centro do GroupBox.

    As guias de alinhamento aparecem a uma distância maior das bordas do controle GroupBox. Essa distância é a soma da propriedade Button do controle Margin e da propriedade GroupBox do controle Padding.

Controles de tamanho automáticos

Em alguns aplicativos, o tamanho de um controle não será o mesmo em tempo de execução que era em tempo de design. O texto de um controle de Button, por exemplo, pode ser retirado de um banco de dados e seu comprimento não é conhecido com antecedência.

Quando a propriedade AutoSize for definida como true, o controle será dimensionado para seu conteúdo. Para obter mais informações, consulte Visão Geral da Propriedade AutoSize.

Organizar controles em seu formulário usando a propriedade AutoSize

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

  2. Altere o valor da propriedade Button do controle AutoSize para verdadeiro.

  3. Altere a propriedade Button do controle Text para Este botão possui uma cadeia de caracteres longa para sua propriedade Text.

    Quando você confirma a alteração, o controle Button se redimensiona para se ajustar ao novo texto.

  4. Arraste outro controle Button da caixa de ferramentas para o formulário.

  5. Altere a propriedade Button do controle Text para "Este botão tem uma cadeia de caracteres longa para sua propriedade Text."

    Quando você confirma a alteração, o controle Button não se redimensiona e o texto é cortado pela borda direita do controle.

  6. Altere a propriedade expandindo a entrada na janela Propriedades do e definindo a propriedade como 5.

    O texto no interior do controle é cortado nos quatro lados.

  7. Altere a propriedade Button do controle AutoSize para true.

    O controle Button se redimensiona para abranger toda a cadeia de caracteres. Além disso, o preenchimento de espaço foi adicionado ao redor do texto, fazendo com que o controle Button se expanda em todas as quatro direções.

  8. Arraste um controle Button da caixa de ferramentas para o formulário. Posicione-o perto do canto inferior direito do formulário.

  9. Altere o valor da propriedade Button do controle AutoSize para verdadeiro.

  10. Defina a propriedade Button do controle Anchor como Right, Bottom.

  11. Altere a propriedade Button do controle Text para "Este botão tem uma cadeia de caracteres longa para sua propriedade Text."

Quando você confirma a alteração, o controle Button se redimensiona em direção à esquerda. Em geral, o dimensionamento automático aumentará o tamanho de um controle na direção oposta à configuração da propriedade Anchor.

Propriedades AutoSize e AutoSizeMode

Alguns controles dão suporte à propriedade AutoSizeMode, o que oferece um controle mais refinado sobre o comportamento de dimensionamento automático de um controle.

Usar a propriedade AutoSizeMode

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

  2. Defina o valor da propriedade Panel do controle AutoSize como true.

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

  4. Coloque o controle Button próximo ao canto inferior direito do controle Panel.

  5. Selecione o controle Panel e arraste a alça de dimensionamento inferior direita. Redimensione o controle Panel para aumentar e diminuir de tamanho.

    Observação

    Você pode redimensionar livremente o controle Panel, mas não pode dimensioná-lo menor do que a posição do canto inferior direito do controle Button. Esse comportamento é especificado pelo valor padrão da propriedade AutoSizeMode, que é GrowOnly.

  6. Defina o valor da propriedade Panel do controle AutoSizeMode como GrowAndShrink.

    O controle Panel se dimensiona automaticamente para cercar o controle Button. Não é possível redimensionar o controle Panel.

  7. Arraste o controle Button em direção ao canto superior esquerdo do controle Panel.

    O controle Panel é redimensionado para se ajustar à nova posição do controle Button.

Próximas etapas

Há muitos outros recursos de layout para organizar controles em seus aplicativos do Windows Forms. Aqui estão algumas combinações que você pode tentar:

Consulte também

  • Last updated on