Passo a passo: organizando controles nos Windows Forms utilizando um FlowLayoutPanel

  • Artigo

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

O FlowLayoutPanel controle e o TableLayoutPanel controle fornecem maneiras intuitivas de organizar controles em seu formulário. Ambos fornecem uma capacidade automática e configurável de controlar as posições relativas dos controles filho contidos neles e ambos oferecem recursos de layout dinâmico em tempo de execução, para que eles possam redimensionar e reposicionar os controles filho conforme as dimensões do formulário pai se alteram. Os painéis de layout podem ser aninhados em painéis de layout, para permitir a realização de interfaces do usuário sofisticadas.

O TableLayoutPanel organiza seu conteúdo em uma grade, fornecendo funcionalidade semelhante ao elemento de tabela> HTML<. Suas células são organizadas em linhas e colunas, que podem ter diferentes tamanhos. Para obter mais informações, consulte Passo a passo: organizando controles nos Windows Forms usando um TableLayoutPanel.

O FlowLayoutPanel organiza seu conteúdo em uma direção de fluxo específica: horizontal ou vertical. Seu conteúdo pode ser encapsulado de uma linha à outra ou de uma coluna à próxima. Como alternativa, seu conteúdo pode ser recortado, em vez de encapsulado. As tarefas ilustradas neste passo a passo incluem:

  • Criação de um projeto dos Windows Forms

  • Organizando controles horizontalmente e verticalmente

  • Alterando a direção do fluxo

  • Inserindo quebras de fluxo

  • Organizando controles usando preenchimento e margens

  • Inserindo controles ao clicar duas vezes neles na caixa de ferramentas

  • Inserindo um controle ao desenhar seu contorno

  • Inserindo controles usando o sinal de interpolação

  • Reatribuição de 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 horizontalmente e verticalmente

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

O FlowLayoutPanel controle pode redimensionar ou refluir seus controles filho à medida que as dimensões do formulário pai mudam.

Para organizar controles horizontalmente e verticalmente usando um FlowLayoutPanel

  1. Arraste um FlowLayoutPanel controle da Caixa de Ferramentas para o 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 controle é movido Button automaticamente para uma posição ao lado do primeiro Button controle. Se o seu for muito estreito para caber os dois controles na mesma linha, o FlowLayoutPanel novo Button controle será movido automaticamente para a próxima linha.

  4. Arraste vários outros Button controles da Caixa de Ferramentas para o FlowLayoutPanel. Continue colocando Button controles até que um seja quebrado na próxima linha.

  5. Altere o valor da propriedade FlowLayoutPanel do controle 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 recortados.

  6. Altere o valor da propriedade FlowLayoutPanel do controle WrapContents para true. Observe que os controles filho quebram novamente para a próxima linha.

  7. Diminua a FlowLayoutPanel largura do controle até que todos os Button controles 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. Você pode precisar redimensionar o formulário para acomodar a largura maior.

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 controle 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 reorganiza FlowLayoutPanel os controles filho para fluir para a próxima coluna. Continue a diminuir a altura e observe que os controles filho fluem para colunas consecutivas. Altere o valor da propriedade FlowLayoutPanel do controle FlowDirection para RightToLeft. Observe que as posições dos controles filho são revertidas. Observe o layout ao alterar o valor da FlowDirection propriedade 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 FlowLayoutPanel controle pare de dispor controles na direção do fluxo atual e seja quebrado para a próxima linha ou coluna.

Para inserir quebras de fluxo

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

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

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

Posicionando controles usando encaixe e ancoragem

Os comportamentos de encaixe e ancoragem dos controles filho diferem dos comportamentos em outras caixas de controles. O encaixe e a ancoragem são relativos ao maior controle 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 controle superior Button . Aumente sua largura para que ele seja cerca de duas vezes mais largo que os outros Button controles.

  3. Selecione o segundo Button controle. Altere o valor de sua Anchor propriedade 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 Dock propriedade 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 controles em seu FlowLayoutPanel controle alterando as Padding propriedades e Margin .

A Padding propriedade permite controlar 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 de preenchimento e margem

  1. Altere o valor da propriedade FlowLayoutPanel do controle 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 FlowLayoutPanel valor da propriedade do controle expandindo a Padding entrada na janela Propriedades e definindo a All propriedade como 20.Padding Para obter mais informações, consulte Passo a passo: definindo o layout de controles dos 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 filho para longe das FlowLayoutPanel bordas do 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, portanto, eles são afastados. Talvez seja necessário redimensionar o FlowLayoutPanel controle para ser maior para ver todos os controles filho.

Inserindo controles ao clicar duas vezes neles na caixa de ferramentas

Você pode preencher seu FlowLayoutPanel controle clicando duas vezes em controles na Caixa de Ferramentas.

Para inserir controles clicando duas vezes na caixa de ferramentas

  1. Clique duas vezes no Button ícone de controle na caixa de ferramentas. Observe que um novo Button controle aparece no FlowLayoutPanel controle.

  2. Clique duas vezes em vários outros controles na Caixa de ferramentas. Observe que os novos controles aparecem sucessivamente no FlowLayoutPanel controle.

Inserindo um controle ao desenhar seu contorno

Você pode inserir um controle em um FlowLayoutPanel controle e especificar seu tamanho desenhando sua estrutura de tópicos em uma célula.

Para inserir um controle desenhando seu contorno

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

  2. Mova o ponteiro do mouse sobre o FlowLayoutPanel controle. Observe que o ponteiro muda para uma mira com o ícone de Button controle anexado.

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

  4. Arraste o ponteiro do mouse para desenhar a estrutura de tópicos do Button controle. 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 controles em uma posição específica em um FlowLayoutPanel controle. Quando você arrasta um controle para a FlowLayoutPanel área do cliente do controle, uma barra de inserção aparece para indicar onde o controle será inserido.

Para inserir um controle usando o sinal de interpolação

  1. Arraste um Button controle da caixa de ferramentas para o controle e aponte para o FlowLayoutPanel espaço entre dois Button controles. Observe que uma barra de inserção é desenhada, indicando onde o Button será colocado quando ele for descartado FlowLayoutPanel no controle. Antes de soltar o FlowLayoutPanel novo Button controle no 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.

Reatribuição de controles existentes a um pai diferente

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

Para reassociar os controles existentes

  1. Arraste três Button controles da Caixa de Ferramentas para o formulário. Posicione-os próximo entre si, mas deixe-os desalinhados.

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

  3. Mova o ponteiro do mouse para perto dos três Button controles. Observe que o ponteiro muda para uma mira com o ícone de FlowLayoutPanel controle anexado.

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

  5. Arraste o ponteiro do mouse para desenhar a estrutura de tópicos do FlowLayoutPanel controle. Desenhe a estrutura de tópicos em torno dos três Button controles.

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

Próximas etapas

Você pode obter um layout complexo usando uma combinação de controles e painéis de layout. Sugestões para exploração adicional 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 TableLayoutPanel controle no controle existente.

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

  • Defina a Visible propriedade de um dos controles como e observe como false os FlowLayoutPanel refluxos em resposta.

Confira também