Posição e layout de controles

O posicionamento do controle nos 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 Location propriedade relativa à parte superior esquerda da superfície pai. A coordenada de posição superior esquerda de um controle no pai é (x0,y0). O tamanho do controle é determinado pela Size propriedade 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 Designer do Visual Studio respeita essas propriedades quando você está 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 o snapline 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 o posicionamento, enquanto outros respeitam as configurações de controle que orientam o posicionamento. Há duas propriedades em um controle que ajudam no posicionamento e dimensionamento automático dentro de um elemento pai: Dock e Anchor.

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

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

Doca

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

Quando um controle é acoplado, o contêiner determina o espaço que o controle deve ocupar e redimensiona e posiciona o mesmo. A largura e a altura do controle continuam a ser respeitadas com base no estilo de encaixe. Por exemplo, se o controle estiver encaixado na parte superior, o Height do controle será respeitado, mas o Width será ajustado automaticamente. Se um controle estiver encaixado à esquerda, o Width do controle será respeitado, mas o Height do controle será ajustado automaticamente.

O Location do controle não pode ser definido manualmente, pois ao acoplar um controle, a posição é definida automaticamente.

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

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

À medida que o contêiner cresce e diminui, os controles encaixados no 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 seu Z-order.

Âncora

Ancorar um controle permite que você vincule o controle a um ou mais lados do contêiner pai. À medida que o contêiner muda de tamanho, os controles filho ancorados mantêm a distância em relação ao 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 AutoSize propriedade permite que um controle altere seu tamanho, se necessário, para ajustar o tamanho especificado pela PreferredSize propriedade. Você ajusta o comportamento de redimensionamento de controles específicos definindo a propriedade AutoSizeMode.

Apenas alguns controles dão suporte à AutoSize propriedade. Além disso, alguns controles que dão suporte à AutoSize propriedade também dão suporte à AutoSizeMode propriedade.

Comportamento sempre verdadeiro	Descrição
O dimensionamento automático é um recurso de tempo de execução.	Isso significa que ele nunca cresce ou reduz um controle e, em seguida, não causa mais nenhum efeito.
Se um controle alterar o tamanho, o valor de sua Location propriedade sempre permanecerá constante.	Quando o conteúdo de um controle faz com que ele cresça, o controle cresce para a direita e para baixo. Os controles não crescem para a esquerda.
As Dock propriedades e as Anchor propriedades são respeitadas quando AutoSize é true.	O valor da propriedade do Location controle é ajustado para o valor correto. O Label controle é a exceção a essa regra. Quando você define o valor da propriedade de Label um controle encaixado AutoSize comotrue, o Label controle não se alonga.
As propriedades MaximumSize e MinimumSize de um controle são sempre respeitadas, independentemente do valor de suas AutoSize propriedades.	As propriedades MaximumSize e MinimumSize não são afetadas pela propriedade AutoSize.
Não há nenhum tamanho mínimo definido por padrão.	Isso significa que, se um controle estiver configurado para reduzir sob AutoSize e não tiver conteúdo, o valor de sua propriedade Size vale (0x,0y). Nesse caso, o controle é reduzido a um ponto e não estará prontamente visível.
Se um controle não implementar o GetPreferredSize método, o método retornará o GetPreferredSize último valor atribuído à Size propriedade.	Isso significa que definir AutoSize para true não tem efeito.
Um controle em uma TableLayoutPanel célula sempre diminui para caber na célula, atingindo seu MinimumSize.	Esse tamanho é imposto como um tamanho máximo. Esse não é o caso quando a célula faz parte de uma AutoSize linha ou coluna.

Propriedade AutoSizeMode

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

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

• AutoSizeMode.GrowAndShrink

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

  Os valores MinimumSize e MaximumSize são levados em consideração, mas o valor atual da propriedade Size é ignorado.

  Esse é o mesmo comportamento de controles com a propriedade AutoSize e sem a propriedade AutoSizeMode.

• AutoSizeMode.GrowOnly

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

  Esse é o valor padrão para AutoSizeMode.

Controles que dão suporte à propriedade AutoSize

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

Controle	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	❌	❌

Dimensionamento automático no ambiente de design

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

Sobrescreva a SelectionRules propriedade a fim de determinar se um controle específico está em um estado que permite redimensionamento pelo usuário. Na tabela a seguir, "não é possível redimensionar" significa Moveable apenas " pode redimensionar" significa AllSizeable e Moveable.

configuração de AutoSize	configuração de AutoSizeMode	Comportamento
true	Propriedade não disponível.	O usuário não pode redimensionar o controle em tempo de design, exceto pelos seguintes controles: - TextBox - MaskedTextBox - RichTextBox - TrackBar
true	GrowAndShrink	O usuário não pode redimensionar o controle em tempo de projeto.
true	GrowOnly	O usuário pode redimensionar o controle no modo de projeto. Quando a Size propriedade é definida, o usuário só pode aumentar o tamanho do controle.
false ou AutoSize está oculto	Não aplicável.	O usuário pode redimensionar o controle em tempo de projeto.

Observação

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

Contêiner: Formulário

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

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

Contêiner: Painel

O Panel controle é semelhante a um formulário no qual ele simplesmente agrupa controles. Suporta os mesmos estilos de posicionamento manual e automático que um formulário. Para obter mais informações, consulte a seção Contêiner: Formulário .

Um painel se mistura perfeitamente com o elemento pai e recorta qualquer área de um controle que ultrapasse os 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 controle de caixa de grupo , um painel não tem uma legenda e uma borda.

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

Contêiner: Caixa de agrupamento

O GroupBox controle 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 que representa informações pessoais e os campos relacionados a um endereço seriam agrupados. No momento de design, é fácil mover a caixa de grupo junto com seus controles contidos.

A caixa de grupo dá suporte aos mesmos estilos de posicionamento manual e automático que um formulário. Para obter mais informações, consulte a seção Contêiner: Formulário . Uma caixa de grupo também corta qualquer parte de um controle que extrapola os limites do painel.

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

Contêiner: Layout de Fluxo

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

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

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

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

Contêiner: Layout de tabela

O TableLayoutPanel controle organiza seu conteúdo em uma grade. Como o layout é feito no tempo de design e no tempo de execução, ele pode mudar dinamicamente conforme o ambiente do aplicativo muda. Isso fornece 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 TableLayoutPanel controle, incluindo outras instâncias de TableLayoutPanel. Isso permite que você construa layouts sofisticados que se adaptem às alterações em tempo de execução.

Você também pode controlar a direção da expansão (horizontal ou vertical) depois que o TableLayoutPanel controle estiver cheio de controles filho. Por padrão, o TableLayoutPanel controle 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 TableLayoutPanel controle adiciona as seguintes propriedades aos controles filho: Cell, Column, Row, ColumnSpan, e RowSpan.

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

Contêiner: Contêiner dividido

O controle windows forms SplitContainer pode ser considerado 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 altera a forma para mostrar que a barra é móvel.

Com o SplitContainer controle, você pode criar interfaces de usuário complexas; geralmente, uma seleção em um painel determina quais objetos são mostrados no outro painel. Essa disposição é 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 pelos usuários.

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 BorderStyle propriedade é definida para demonstrar os limites de cada painel.

Contêiner: Controle de tabulação

Exibe TabControl várias guias, como divisores em um bloco de anotações ou rótulos em um conjunto de pastas em um gabinete de arquivamento. 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, pode TabControl 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 guias individuais. Cada guia individual é um TabPage objeto.