Partilhar via

Passo a passo: Dispor controlos com espaçamento interno, margens e a propriedade AutoSize

  • Artigo

O posicionamento preciso dos controles em seu formulário é uma alta prioridade para muitos aplicativos. O Windows Forms Designer 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 e margem para controlos do Windows Forms

A propriedade AutoSize informa a um controle para dimensionar-se automaticamente de acordo com seu conteúdo. Ele não se redimensionará para ser menor do que o valor de sua propriedade Size original e contabilizará 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 Windows Application chamado LayoutExample.

  2. Selecione o formulário no Windows Forms Designer.

Definir margens para controles

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

Organizar controles em seu formulário usando a propriedade Margin

  1. Arraste dois controles Button do Caixa de Ferramentas para o seu formulário.

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

    Observe o snapline que aparece entre eles. Essa distância é a soma dos valores de Margin dos dois controles. O controlador que estás a mover encaixa-se nesta distância. Para obter detalhes, consulte Passo a passo: Organizando controles no Windows Forms usando Snaplines.

  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 linha de encaixe que define a soma das margens é mais longa e o controle ajusta-se a uma distância maior em relação ao outro controle.

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

  6. Mova o controlo selecionado para baixo do outro e observe que a linha de ajuste é mais curta. 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 aspetos da propriedade Margin, Left, Top, Right, Bottom, para valores diferentes, ou pode defini-los todos para o mesmo valor com a propriedade All.

Definir preenchimento para controles

Para obter o layout preciso necessário para seu aplicativo, seus controles geralmente conterão controles filho. Quando você quiser especificar a proximidade da borda do controle filho com a 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 Text de um controle Button) com suas bordas.

Organizar controles em seu formulário usando preenchimento

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

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

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

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

  4. Arraste um controle do Caixa de Ferramentas do para o formulário. Arraste um controle do Caixa de Ferramentas do para o controle . Posicione o controlo Button para que esteja alinhado com o canto inferior direito do controlo GroupBox.

    Observe as linhas de ajuste que aparecem quando o controle Button se aproxima das bordas inferior e direita do controle GroupBox. Essas linhas de ajuste correspondem à propriedade Margin do Button.

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

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

    Os snaplines aparecem a uma distância maior das bordas do controle GroupBox. Essa distância é a soma da propriedade Margin do controle Button e da propriedade Padding do controle GroupBox.

Controla o tamanho automaticamente

Em alguns aplicativos, o tamanho de um controle não será o mesmo em tempo de execução como 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 antecipadamente.

Quando a propriedade AutoSize é 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 o controlo Button da Caixa de Ferramentas para o formulário.

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

  3. Altere a propriedade Text do controle Button 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 para se ajustar ao novo texto.

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

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

    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 e definindo a propriedade como 5.

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

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

    O controle Button se redimensiona para abranger toda a cadeia de caracteres. Além disso, o preenchimento 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 seu formulário. Posicione-o perto do canto inferior direito do formulário.

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

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

  11. Altere a propriedade Text do controle Button 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 para a esquerda. Em geral, o dimensionamento automático aumentará o tamanho de um controle na direção oposta à sua configuração de propriedade Anchor.

Propriedades AutoSize e AutoSizeMode

Alguns controles suportam a propriedade AutoSizeMode, o que lhe dá um controle mais refinado sobre o comportamento de dimensionamento automático de um controle.

Use a propriedade AutoSizeMode

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

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

  3. Arraste um controlo Button do Caixa de Ferramentas para o controlo Panel.

  4. Coloque o controle de Button perto do canto inferior direito do controle Panel.

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

    Observação

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

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

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

  7. Arraste o controle Button para o canto superior esquerdo do controle Panel.

    O controle Panel é redimensionado para a nova posição do controle Button.

Próximos passos

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:

Ver também