Posição e layout dos controles (Windows Forms .NET)

O posicionamento do controle no Windows Forms é determinado não apenas pelo controle, mas também pelo pai do controle. Este artigo descreve as diferentes configurações fornecidas pelos controles e os diferentes tipos de contêineres pai que afetam o layout.

Posição e tamanho fixos

A posição em que um controle aparece em um pai é determinada pelo valor da propriedade Location em relação ao canto superior esquerdo da superfície pai. A coordenada de posição superior esquerda no pai é (x0,y0). O tamanho do controle é determinado pela propriedade Size e representa a largura e a altura do controle.

Quando um controle é adicionado a um pai que impõe o posicionamento automático, a posição e o tamanho do controle são alterados. Nesse caso, a posição e o tamanho do controle podem não ser ajustados manualmente, dependendo do tipo de pai.

As propriedades MaximumSize e MinimumSize ajudam a definir o espaço mínimo e máximo que um controle pode usar.

Margem e Preenchimento

Há duas propriedades de controle que ajudam com o posicionamento preciso dos controles: Margin e Padding.

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 figura a seguir mostra as propriedades Margin e Padding em um controle.

O Visual Studio Designer respeitará essas propriedades quando você estiver posicionando e redimensionando controles. Os snaplines aparecem como guias para ajudá-lo a permanecer fora da margem especificada de um controle. Por exemplo, o Visual Studio exibe a linha de ajuste quando você arrasta um controle ao lado de outro controle:

Posicionamento e tamanho automáticos

Os controles podem ser colocados automaticamente dentro de seus pais. Alguns contêineres pai forçam a colocação, enquanto outros respeitam as configurações de controle que orientam a colocação. Há duas propriedades em um controle que ajudam o posicionamento e o tamanho automáticos dentro de um elemento pai: Dock e Anchor.

A ordem de desenho pode afetar o posicionamento automático. A ordem em que um controle é desenhado é determinada pelo índice do controle na coleção Controls do elemento-pai. Este índice é conhecido como o Z-order. Cada controle é desenhado na ordem inversa em que aparecem na coleção. Ou seja, a coleção é uma coleção do primeiro no último e do último sorteio.

As propriedades MinimumSize e MaximumSize ajudam a definir o espaço mínimo e máximo que um controle pode usar.

Doca

A propriedade Dock define qual borda do controle está alinhada ao lado correspondente do pai e como o controle é redimensionado dentro do pai.

Quando um controle é encaixado, o contêiner determina o espaço que deve ocupar e redimensiona e coloca o controle. A largura e a altura do controlo ainda são respeitadas com base no estilo de acoplamento. Por exemplo, se o controle estiver encaixado na parte superior, a Height do controle será respeitada, mas o Width será ajustado automaticamente. Se um controlador estiver encaixado à esquerda, a Width do controlador será respeitada, mas o Height será ajustado automaticamente.

O Location do controle não pode ser definido manualmente, uma vez que encaixar um controle regula automaticamente a sua posição.

A Z-order do controle afeta o encaixe. À medida que os controles encaixados são definidos, eles usam o espaço disponível para eles. Por exemplo, se um controle for desenhado primeiro e encaixado na parte superior, ele ocupará toda a largura do contêiner. Se um próximo controle estiver encaixado à esquerda, ele terá menos espaço vertical disponível para ele.

Se a Z-order do controle for invertida, o controle que está encaixado à esquerda agora tem mais espaço inicial disponível. O controle usa toda a altura do contêiner. O controlador que está encaixado na parte superior tem menos espaço horizontal disponível.

À medida que o contêiner cresce e encolhe, os controles acoplados ao contêiner são reposicionados e redimensionados para manter suas posições e tamanhos aplicáveis.

Se vários controles estiverem encaixados no mesmo lado do contêiner, eles serão empilhados de acordo com suas Z-order.

Âncora

Ancorar um controle permite que você vincule o controle a um ou mais lados do contêiner pai. À medida que o recipiente muda de tamanho, qualquer controle infantil manterá sua distância para o lado ancorado.

Um controle pode ser ancorado em um ou mais lados, sem restrições. A âncora é definida com a propriedade Anchor.

Dimensionamento automático

A propriedade AutoSize permite que um controle altere seu tamanho, se necessário, para se ajustar ao tamanho especificado pela propriedade PreferredSize. Você ajusta o comportamento de dimensionamento para controles específicos definindo a propriedade AutoSizeMode.

Apenas alguns controles suportam a propriedade AutoSize. Além disso, alguns controles que suportam a propriedade AutoSize também suportam a propriedade AutoSizeMode.

Comportamento sempre verdadeiro	Descrição
O dimensionamento automático é uma funcionalidade de tempo de execução.	Isso significa que nunca se expande ou contrai um controle e, depois disso, não tem mais efeito.
Se um controle muda de tamanho, o valor de sua propriedade Location sempre permanece constante.	Quando o conteúdo de um controle faz com que ele cresça, o controle cresce para a direita e para baixo. Os controlos não crescem para a esquerda.
As propriedades Dock e Anchor são respeitadas quando AutoSize é true.	O valor da propriedade Location do controle é ajustado para o valor correto. O controlo Label é a exceção a esta regra. Quando você define o valor da propriedade AutoSize de um controle de Label encaixado como true, o controle Label não será estendido.
As propriedades MaximumSize e MinimumSize de um controle são sempre respeitadas, independentemente do valor da sua propriedade AutoSize.	As propriedades MaximumSize e MinimumSize não são afetadas pela propriedade AutoSize.
Não há um tamanho mínimo definido por padrão.	Isso significa que, se um controle estiver definido para diminuir sob AutoSize e não tiver conteúdo, o valor de sua propriedade Size será (0x,0y). Nesse caso, o seu controlo encolherá até um ponto e não será facilmente visível.
Se um controle não implementar o método GetPreferredSize, o método GetPreferredSize retornará o último valor atribuído à propriedade Size.	Isso significa que definir AutoSize para true não terá efeito.
Um controle em uma célula TableLayoutPanel sempre encolhe para caber na célula até que seu MinimumSize seja alcançado.	Este tamanho é imposto como um tamanho máximo. Este não é o caso quando a célula faz parte de uma linha ou coluna AutoSize.

AutoSizeMode propriedade

A propriedade AutoSizeMode fornece um controle mais refinado sobre o comportamento AutoSize padrão. A propriedade AutoSizeMode especifica como um controle se dimensiona para seu conteúdo. O conteúdo, por exemplo, pode ser o texto para um controle Button ou os controles filho para um contêiner.

A lista a seguir mostra os valores AutoSizeMode e seu comportamento.

• AutoSizeMode.GrowAndShrink

  O controle cresce ou encolhe para abranger seu conteúdo.

  Os valores de MinimumSize e MaximumSize são respeitados, mas o valor atual da propriedade Size é ignorado.

  Esse é o mesmo comportamento que os controles com a propriedade AutoSize e nenhuma propriedade AutoSizeMode.

• AutoSizeMode.GrowOnly

  O controle cresce tanto quanto necessário para abranger seu conteúdo, mas ele não encolherá menor do que o valor especificado por sua propriedade Size.

  Este é o valor padrão para AutoSizeMode.

Controles que suportam a propriedade AutoSize

A tabela a seguir descreve o nível de suporte de dimensionamento automático por controle:

Controlo	AutoSize suportado	AutoSizeMode suportado
Button	✔️	✔️
CheckedListBox	✔️	✔️
FlowLayoutPanel	✔️	✔️
Form	✔️	✔️
GroupBox	✔️	✔️
Panel	✔️	✔️
TableLayoutPanel	✔️	✔️
CheckBox	✔️	❌
DomainUpDown	✔️	❌
Label	✔️	❌
LinkLabel	✔️	❌
MaskedTextBox	✔️	❌
NumericUpDown	✔️	❌
RadioButton	✔️	❌
TextBox	✔️	❌
TrackBar	✔️	❌
CheckedListBox	❌	❌
ComboBox	❌	❌
DataGridView	❌	❌
DateTimePicker	❌	❌
ListBox	❌	❌
ListView	❌	❌
MaskedTextBox	❌	❌
MonthCalendar	❌	❌
ProgressBar	❌	❌
PropertyGrid	❌	❌
RichTextBox	❌	❌
SplitContainer	❌	❌
TabControl	❌	❌
TabPage	❌	❌
TreeView	❌	❌
WebBrowser	❌	❌
ScrollBar	❌	❌

AutoSize no ambiente de design

A tabela a seguir descreve o comportamento de dimensionamento de um controle em tempo de design, com base no valor de suas propriedades AutoSize e AutoSizeMode.

Substitua a propriedade SelectionRules para determinar se um determinado controle está em um estado redimensionável pelo usuário. Na tabela a seguir, "não é possível redimensionar" significa apenas Moveable, "pode redimensionar" significa AllSizeable e Moveable.

Configuração AutoSize	Configuração AutoSizeMode	Comportamento
true	Imóvel indisponível.	O usuário não pode redimensionar o controle em tempo de design, exceto para os seguintes controles: - TextBox - MaskedTextBox - RichTextBox - TrackBar
true	GrowAndShrink	O utilizador não pode redimensionar o controlo em tempo de conceção.
true	GrowOnly	O utilizador pode redimensionar o controlo em tempo de desenvolvimento. Quando a propriedade Size é definida, o usuário só pode aumentar o tamanho do controle.
false ou AutoSize está oculto	Não aplicável.	O utilizador pode redimensionar o controlo no momento de design.

Observação

Para maximizar a produtividade, o Windows Forms Designer no Visual Studio sombreia a propriedade AutoSize para a classe Form. Em tempo de design, o formulário se comporta como se a propriedade AutoSize estivesse definida como false, independentemente de sua configuração real. No momento da execução, nenhuma acomodação especial é feita e a propriedade AutoSize é aplicada conforme especificado pela definição da propriedade.

Contêiner: Formulário

O Form é o objeto principal do Windows Forms. Um aplicativo do Windows Forms geralmente terá um formulário exibido em todos os momentos. Os formulários contêm controles e respeitam as propriedades Location e Size do controle para posicionamento manual. Os formulários também respondem à propriedade Dock para posicionamento automático.

Na maioria das vezes, um formulário terá alças nas bordas que permitem ao usuário redimensioná-lo. A propriedade Anchor de um controle permitirá que o controle cresça e diminua à medida que o formulário é redimensionado.

Contêiner: Painel

O controlo Panel é semelhante a um formulário, na medida em que simplesmente agrupa controlos. Ele suporta os mesmos estilos de posicionamento manual e automático que um formulário. Para obter mais informações, consulte a seção Container: Form.

Um painel se mistura perfeitamente com o pai e corta qualquer área de um controle que saia dos limites do painel. Se um controle estiver fora dos limites do painel e AutoScroll estiver definido como true, as barras de rolagem aparecerão e o usuário poderá rolar o painel.

Ao contrário do controlo de caixa de grupo , um painel não tem título nem moldura.

A imagem acima tem um painel com a propriedade BorderStyle definida para demonstrar os limites do painel.

Recipiente: Caixa de grupo

O controle GroupBox fornece um agrupamento identificável para outros controles. Normalmente, você usa uma caixa de grupo para subdividir um formulário por função. Por exemplo, você pode ter um formulário representando informações pessoais e os campos relacionados a um endereço seriam agrupados. Durante o estágio de design, é fácil mover a caixa de grupo juntamente com os controles contidos.

A caixa agrupada suporta os mesmos estilos de posicionamento manual e automático que um formulário. Para obter mais informações, consulte a seção Container: Form. Uma caixa de grupo também corta qualquer parte de um controle que saia dos limites do painel.

Ao contrário do painel de controlo , uma caixa de grupo não tem a capacidade de rolar o conteúdo e exibir barras de rolagem.

Contêiner: Layout de fluxo

O controle FlowLayoutPanel organiza seu conteúdo em uma direção de fluxo horizontal ou vertical. Você pode encapsular o conteúdo do controle de uma linha para a próxima ou de uma coluna para a próxima. Como alternativa, você pode recortar em vez de encapsular seu conteúdo.

Você pode especificar a direção do fluxo definindo o valor da propriedade FlowDirection. O controlo FlowLayoutPanel inverte corretamente a sua direção de fluxo em esquemas da direita para a esquerda (RTL). Você também pode especificar se o conteúdo do controle FlowLayoutPanel é encapsulado ou cortado definindo o valor da propriedade WrapContents.

O controle FlowLayoutPanel dimensiona automaticamente seu conteúdo quando você define a propriedade AutoSize como true. Ele também fornece uma propriedade FlowBreak para os seus controlos-filho. Definir o valor da propriedade FlowBreak como true faz com que o controlo FlowLayoutPanel pare de dispôr de controlos na direção de fluxo atual e passe para a próxima linha ou coluna.

A imagem acima tem dois controles FlowLayoutPanel com a propriedade BorderStyle definida para demonstrar os limites do controle.

Contêiner: layout da tabela

O controle TableLayoutPanel organiza seu conteúdo em uma grade. Como o layout é feito em tempo de design e tempo de execução, ele pode mudar dinamicamente à medida que o ambiente do aplicativo muda. Isso dá aos controles no painel a capacidade de redimensionar proporcionalmente, para que eles possam responder a alterações, como o redimensionamento do controle pai ou a alteração do comprimento do texto devido à localização.

Qualquer controle do Windows Forms pode ser filho do controle TableLayoutPanel, incluindo outras instâncias do TableLayoutPanel. Isso permite que você construa layouts sofisticados que se adaptam às alterações em tempo de execução.

Você também pode controlar a direção de expansão (horizontal ou vertical) depois que o controle TableLayoutPanel estiver cheio de controles filho. Por padrão, o controle TableLayoutPanel se expande para baixo adicionando linhas.

Você pode controlar o tamanho e o estilo das linhas e colunas usando as propriedades RowStyles e ColumnStyles. Você pode definir as propriedades de linhas ou colunas individualmente.

O controle TableLayoutPanel adiciona as seguintes propriedades aos seus controles filho: Cell, Column, Row, ColumnSpane RowSpan.

A imagem acima tem uma tabela com a propriedade CellBorderStyle definida para demonstrar os limites de cada célula.

Contentor: Contentor dividido

O controle SplitContainer Windows Forms pode ser pensado como um controle composto; São dois painéis separados por uma barra móvel. Quando o ponteiro do mouse está sobre a barra, o ponteiro muda de forma para mostrar que a barra é móvel.

Com o controle SplitContainer, você pode criar interfaces de usuário complexas; Muitas vezes, uma seleção em um painel determina quais objetos são mostrados no outro painel. Este arranjo é eficaz para exibir e navegar informações. Ter dois painéis permite agregar informações em áreas, e a barra, ou "divisor", facilita o redimensionamento dos painéis.

A imagem acima tem um contêiner dividido para criar um painel esquerdo e direito. O painel direito contém um segundo contêiner dividido com o Orientation definido como Vertical. A propriedade BorderStyle é definida para demonstrar os limites de cada painel.

Container: Controle de tabulação

O TabControl exibe várias guias, como divisórias em um bloco de anotações ou etiquetas em um conjunto de pastas em um arquivo. As guias podem conter imagens e outros controles. Use o controle tab para produzir o tipo de caixa de diálogo de várias páginas que aparece em muitos locais no sistema operacional Windows, como o Painel de Controle e as Propriedades de Exibição. Além disso, o TabControl pode ser usado para criar páginas de propriedades, que são usadas para definir um grupo de propriedades relacionadas.

A propriedade mais importante do TabControl é TabPages, que contém as abas individuais. Cada uma das guias individuais é um objeto TabPage.