Passo a passo: Organizando controles em Windows Forms usando um FlowLayoutPanel

Alguns aplicativos exigem um formulário com um layout que se organiza adequadamente à medida que o formulário é redimensionado ou que o conteúdo muda de tamanho. Quando você precisar de um layout dinâmico e não quiser manipular eventos Layout explicitamente em seu código, considere usar um painel de layout.

O controle FlowLayoutPanel e o controle TableLayoutPanel fornecem maneiras intuitivas de organizar controles em seu formulário. Ambos fornecem uma habilidade automática e configurável para controlar as posições relativas dos controlos filho contidos neles, e ambos oferecem funcionalidades de layout dinâmico durante a execução, para que possam redimensionar e reposicionar controlos filho à medida que as dimensões do formulário principal mudam. Os painéis de layout podem ser aninhados dentro de outros painéis de layout, permitindo a criação de interfaces sofisticadas.

O TableLayoutPanel organiza os conteúdos numa grelha, fornecendo funcionalidade semelhante ao elemento de tabela HTML <>. Suas células são organizadas em linhas e colunas, e estas podem ter tamanhos diferentes. Para obter mais informações, consulte Passo a passo: Organizando controles no Windows Forms usando um TableLayoutPanel.

O FlowLayoutPanel organiza seu conteúdo em uma direção de fluxo específica: horizontal ou vertical. O seu conteúdo pode ser continuado de uma linha para a outra ou de uma coluna para a próxima. Alternativamente, seu conteúdo pode ser cortado em vez de embrulhado. As tarefas ilustradas neste passo a passo incluem:

  • Criando um projeto do Windows Forms

  • Organizando controles horizontal e verticalmente

  • Alterando a direção do fluxo

  • Inserindo quebras de fluxo

  • Organizando controles usando preenchimento e margens

  • Inserindo controles clicando duas vezes neles na caixa de ferramentas

  • Inserindo um controle desenhando seu contorno

  • Inserindo controles usando o Caret

  • Reatribuindo controles existentes a um pai diferente

Quando terminar, você terá uma compreensão do papel desempenhado por esses importantes recursos de layout.

Criar o projeto

  1. No Visual Studio, crie um projeto de aplicativo baseado no Windows chamado "FlowLayoutPanelExample" (File>New>Project>Visual C# ou Visual Basic>Classic Desktop>Windows Forms Application).

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

Organizando controles horizontal e verticalmente

O FlowLayoutPanel controle permite que você coloque controles ao longo de linhas ou colunas sem exigir que você especifique com precisão a posição de cada controle individual.

O FlowLayoutPanel controle pode redimensionar ou reorganizar os seus próprios controlos filho à medida que as dimensões do formulário pai mudam.

Para organizar controles horizontal e verticalmente usando um FlowLayoutPanel

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

  2. Arraste um Button controle da Caixa de Ferramentas para o FlowLayoutPanel. Observe que ele é movido automaticamente para o canto superior esquerdo do FlowLayoutPanel controle.

  3. Arraste outro Button controle da Caixa de Ferramentas para o FlowLayoutPanel. Observe que o controlo Button é automaticamente movido para uma posição ao lado do primeiro controlo Button. Se o seu FlowLayoutPanel for demasiado estreito para caber os dois controlos na mesma linha, o novo Button controlo é automaticamente movido para a linha seguinte.

  4. Arraste vários outros Button controles da Caixa de Ferramentas para o FlowLayoutPanel. Continue a colocar controlo Button até que um passe para a linha seguinte.

  5. Altere o valor da propriedade FlowLayoutPanel do controlo WrapContents para false. Observe que os controles filho não fluem mais para a próxima linha. Em vez disso, eles são movidos para a primeira linha e cortados.

  6. Altere o valor da propriedade FlowLayoutPanel do controlo WrapContents para true. Observe que os controlos filho passam novamente para a linha seguinte.

  7. Diminua a largura do controlo FlowLayoutPanel até que todos os controlos Button sejam movidos para a primeira coluna.

  8. Aumente a FlowLayoutPanel largura do controle até que todos os Button controles sejam movidos para a primeira linha. Talvez seja necessário redimensionar o formulário para acomodar a maior largura.

Alterando a direção do fluxo

A FlowDirection propriedade permite que você altere a direção na qual os controles são organizados. Você pode organizar os controles filho da esquerda para a direita, da direita para a esquerda, de cima para baixo ou de baixo para cima.

Para alterar a direção do fluxo em um FlowLayoutPanel

  1. Altere o valor da propriedade FlowLayoutPanel do controlo FlowDirection para TopDown. Observe que os controles filho são reorganizados em uma ou mais colunas, dependendo da altura do controle.

  2. Redimensione o FlowLayoutPanel para que sua altura seja menor do que a coluna de Button controles. Observe que o FlowLayoutPanel reorganiza os controlos filho para fluir na próxima coluna. Continue diminuindo a altura e observe que os controles filho fluem em colunas consecutivas. Altere o valor da propriedade FlowLayoutPanel do controlo FlowDirection para RightToLeft. Observe que as posições dos controles filho são invertidas. Observe o layout quando alterar o valor da propriedade FlowDirection para BottomUp.

Inserindo quebras de fluxo

O FlowLayoutPanel controle fornece uma propriedade FlowBreak para seus controles filho. Definir o valor da propriedade FlowBreak como true faz com que o controle FlowLayoutPanel pare de organizar os controles na direção do fluxo atual e passe para a próxima linha ou coluna.

Para inserir quebras no fluxo

  1. Altere o valor da propriedade FlowLayoutPanel do controlo FlowDirection para TopDown.

  2. Selecione um dos Button controles no meio da coluna mais à esquerda.

  3. Defina o valor da propriedade FlowBreak do controlo Button como true. Observe que a coluna está quebrada e os controles seguintes ao controle selecionado Button fluem para a próxima coluna. Defina o valor da propriedade FlowBreak do controlo para Button para retornar ao comportamento inicial.

Controles de Posicionamento Usando Docking e Ancoragem

Os comportamentos de encaixe e ancoragem dos controles filho diferem dos comportamentos em outros controles de contêiner. Tanto a atracação quanto a ancoragem são relativas ao maior controlo na direção do fluxo.

Para posicionar controles usando encaixe e ancoragem

  1. Aumente o tamanho do FlowLayoutPanel até que os Button controles estejam todos organizados em uma coluna.

  2. Selecione o controlo principal Button. Aumente sua largura para que ele seja cerca de duas vezes mais largo do que os outros Button controles.

  3. Selecione o segundo Button controle. Altere o valor de sua propriedade Anchor para Right. Observe que ele é movido para que sua borda direita esteja alinhada com a borda direita do primeiro Button controle.

  4. Altere o valor de sua Anchor propriedade para Right e Left. Observe que ele é dimensionado para a mesma largura que o primeiro Button controle.

  5. Selecione o terceiro Button controle. Altere o valor de sua propriedade Dock para Fill. Observe que ele é dimensionado para a mesma largura que o primeiro Button controle.

Organizando controles usando preenchimento e margens

Você também pode organizar os controlos no seu controlo FlowLayoutPanel alterando as propriedades Padding e Margin.

A Padding propriedade permite que você controle o posicionamento de controles dentro da célula de um FlowLayoutPanel controle. Ele especifica o espaçamento entre os controles filho e a FlowLayoutPanel borda do controle.

A Margin propriedade permite controlar o espaçamento entre controles.

Para organizar controles usando as propriedades Padding e Margin

  1. Altere o valor da propriedade FlowLayoutPanel do controlo Dock para Fill. Se o formulário for grande o suficiente, os Button controles serão movidos para a primeira coluna do FlowLayoutPanel controle.

  2. Altere o valor da propriedade do controlo FlowLayoutPanel expandindo a entrada Padding na janela Padding e definindo a propriedade como All. Para obter mais informações, consulte Passo a passo: Definindo o layout de controles do Windows Forms com preenchimento, margens e a propriedade AutoSize. Observe que os controles filho são movidos em direção ao centro do FlowLayoutPanel controle. O valor aumentado para a Padding propriedade empurra os controles da criança para longe das fronteiras do FlowLayoutPanel controle.

  3. Selecione todos os Button controles no FlowLayoutPanel e defina o Margin valor da propriedade como 20. Observe que o espaçamento entre os Button controles aumenta, então eles são movidos mais longe. Talvez seja necessário redimensionar o FlowLayoutPanel controle para ser maior para ver todos os controles filho.

Inserindo controles clicando duas vezes neles na caixa de ferramentas

Você pode preencher seu controle de FlowLayoutPanel clicando duas vezes em controles no Toolbox.

Para inserir controles clicando duas vezes na Caixa de Ferramentas

  1. Clique duas vezes no ícone de controle Button na Caixa de Ferramentas . Note que um novo Button controlador aparece no FlowLayoutPanel controlador.

  2. Clique duas vezes em mais alguns controles na Toolbox. Observe que os novos controles aparecem sucessivamente no FlowLayoutPanel controle.

Inserindo um controle desenhando seu contorno

Você pode inserir um controle em um controle FlowLayoutPanel e especificar seu tamanho desenhando seu contorno em uma célula.

Para inserir um controle desenhando seu contorno

  1. Na Caixa de Ferramentas, clique no ícone de controle Button. Não o arraste para o formulário.

  2. Mova o ponteiro do mouse sobre o controle FlowLayoutPanel. Observe que o ponteiro muda para um cursor em forma de cruz com o ícone de controlo Button anexado.

  3. Clique e mantenha pressionado o botão do mouse.

  4. Arraste o ponteiro do mouse para desenhar o contorno do controle Button. Quando estiver satisfeito com o tamanho, solte o botão do mouse. Observe que o Button controle é criado no próximo local aberto do FlowLayoutPanel controle.

Inserindo controles usando a barra de inserção

Você pode inserir controlos numa posição específica num controlo FlowLayoutPanel. Quando arrastas um controlo para a zona do cliente do controlo FlowLayoutPanel, surge uma barra de inserção para indicar onde o controlo será inserido.

Para inserir um controle usando o cursor

  1. Arraste um Button controle da Caixa de Ferramentas para o FlowLayoutPanel controle e aponte para o espaço entre dois Button controles. Observe que uma barra de inserção é desenhada, indicando onde a Button será posicionada ao ser solta no controlador FlowLayoutPanel. Antes de soltar o novo Button controle no FlowLayoutPanel controle, mova o ponteiro do mouse para observar como a barra de inserção se move.

  2. Solte o novo Button controle no FlowLayoutPanel controle. Observe que o novo Button controle não está alinhado com os outros, porque sua Margin propriedade tem um valor diferente.

Reatribuindo controles existentes a um pai diferente

Você pode atribuir controles que existem em seu formulário para um novo FlowLayoutPanel controle.

Para reparentar controles existentes

  1. Arraste três Button controles da Caixa de Ferramentas para o formulário. Posicione-os próximos uns dos outros, mas deixe-os desalinhados.

  2. Na Caixa de Ferramentas, clique no ícone de controle FlowLayoutPanel. Não o arraste para o formulário.

  3. Mova o ponteiro do mouse para perto dos três controles Button. Observe que o ponteiro muda para um cursor em forma de cruz com o ícone de controlo FlowLayoutPanel anexado.

  4. Clique e mantenha pressionado o botão do mouse.

  5. Arraste o ponteiro do mouse para desenhar o contorno do controle FlowLayoutPanel. Desenhe o contorno em torno dos três controles Button.

  6. Solte o botão do mouse. Observe que os três Button controles são inseridos no FlowLayoutPanel controle.

Próximas Etapas

Você pode obter um layout complexo usando uma combinação de painéis de layout e controles. As sugestões para mais exploração incluem:

  • Redimensione um dos Button controles para um tamanho maior e observe o efeito no layout.

  • Os painéis de layout podem conter outros painéis de layout. Experimente soltar um controle de TableLayoutPanel no controle existente.

  • Encaixe o controle FlowLayoutPanel no formulário pai. Redimensione o formulário e observe o efeito no layout.

  • Defina a propriedade Visible de um dos controlos para false e observe como a FlowLayoutPanel se reajusta em resposta.

Ver também

  • Last updated on