Compartilhar via

Passo a passo: organizando controles nos 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 conforme o conteúdo muda de tamanho. Quando você precisar de um layout dinâmico e não quiser manipular Layout eventos explicitamente em seu código, considere usar um painel de layout.

O FlowLayoutPanel controle e o TableLayoutPanel controle fornecem maneiras intuitivas de organizar controles em seu formulário. Ambas fornecem uma capacidade automática e configurável de controlar as posições relativas dos controles filho contidos nelas e oferecem recursos de layout dinâmico em tempo de execução, permitindo redimensionar e reposicionar os controles filho à medida que as dimensões do formulário pai mudam. Os painéis de layout podem ser aninhados em painéis de layout, para criar interfaces de 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, e elas podem ter tamanhos diferentes. Para obter mais informações, consulte Passo a passo: organizando controles em Windows Forms usando umTableLayoutPanel.

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 para outra ou de uma coluna para outra. Como alternativa, seu conteúdo pode ser recortado em vez de encapsulado. 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 para um pai diferente

Quando terminar, você terá uma compreensão da função desempenhada por esses recursos de layout importantes.

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 precisamente a posição de cada controle individual.

O FlowLayoutPanel controle pode redimensionar ou reorganizar seus controles filho quando as dimensões do formulário pai são alteradas.

Para organizar controles horizontal e verticalmente usando um FlowLayoutPanel

  1. Arraste um controle FlowLayoutPanel 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 a FlowLayoutPanel. Observe que o Button controle é movido automaticamente para uma posição ao lado do primeiro Button controle. Se o FlowLayoutPanel for muito estreito para colocar os dois controles na mesma linha, o novo controle Button 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 mude para a 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 passam novamente para a próxima linha.

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

  8. Aumente a largura do FlowLayoutPanel controle até que todos os Button controles sejam movidos para a primeira linha. Talvez seja necessário redimensionar seu 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 modo que sua altura é menor que a coluna de Button controles. Observe que o FlowLayoutPanel reorganiza os controles filho para se moverem para a próxima coluna. Continue a diminuir a altura e observe que os controles filhos se distribuem por colunas consecutivas. Altere o valor da propriedade FlowLayoutPanel do controle FlowDirection para RightToLeft. Observe que as posições dos controles filho são invertidas. Observe o layout quando você altera 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 para true faz com que o controle FlowLayoutPanel pare de organizar os controles na direção atual do fluxo e passe 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 Button propriedade FlowBreak do controle 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 Button propriedade FlowBreak do controle para false retornar ao comportamento original.

Controles de posicionamento usando encaixe e ancoragem

Comportamentos de encaixe e ancoragem de controles filho diferem dos comportamentos em controles de outros contêineres. Tanto o acoplamento quanto a ancoragem são referentes ao maior elemento de controle na direção do fluxo.

Para posicionar controles usando encaixe e ancoragem

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

  2. Selecione o controle superior Button . Aumente sua largura para que ela tenha cerca de duas vezes mais largura do 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 com 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 com 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 propriedades Padding e Margin.

A Padding propriedade permite controlar o posicionamento de controles dentro da célula de um FlowLayoutPanel controle. Especifica o espaçamento entre os controles filhos e a borda do controle FlowLayoutPanel.

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

Para organizar controles usando as propriedades Espaçamento Interno 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 valor da FlowLayoutPanel propriedade do Padding controle expandindo a Padding entrada na janela Propriedades e definindo a All propriedade como 20. Para obter mais informações, consulte Passo a passo: organizando controles do Windows Forms com espaçamento, margens e a propriedade AutoSize. Observe que os controles filho são movidos para o centro do FlowLayoutPanel controle. O aumento do valor da propriedade Padding afasta os controles filho das bordas do controle FlowLayoutPanel.

  3. Selecione todos os Button controles no FlowLayoutPanel e defina o valor da Margin propriedade como 20. Observe que o espaçamento entre os Button controles aumenta, de modo que eles são movidos mais distantes. Talvez seja necessário redimensionar o controle FlowLayoutPanel para aumentar seu tamanho e assim visualizar todos os controles filhos.

Inserindo controles clicando duas vezes neles na caixa de ferramentas

Você pode preencher seu FlowLayoutPanel controle clicando duas vezes nos 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 controle Button aparece no controle FlowLayoutPanel.

  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 desenhando seu contorno

Você pode inserir um controle em um FlowLayoutPanel controle 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 Button controle. Não arraste-o para o formulário.

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

  3. Clique e segure o botão do mouse.

  4. Arraste o ponteiro do mouse para desenhar o contorno do Button controle. Quando estiver satisfeito com o tamanho, libere o botão do mouse. Observe que o controle Button é criado na próxima posição livre do controle FlowLayoutPanel.

Inserindo controles usando a barra de inserção

Você pode inserir controles em uma posição específica dentro de um controle FlowLayoutPanel. Quando você arrasta um controle para a área de cliente do controle FlowLayoutPanel, uma barra de inserção aparece para indicar onde o controle 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 Button será posicionada no controle 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 movimenta.

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

Reatribuindo controles existentes para um pai diferente

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

Para reparenciar controles existentes

  1. Arraste três Button controles da Caixa de Ferramentas para o formulário. Posicione-os perto um do outro, mas deixe-os desalinhados.

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

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

  4. Clique e segure o botão do mouse.

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

  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. 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 dentro de um controle existente.

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

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

Consulte também

  • Last updated on