Demonstra Passo a passo: Organizando controles no Windows Forms usando um FlowLayoutPanel

Artigo
08/25/2010

Alguns aplicativos necessitam de um formulário com um layout que organiza próprio adequadamente o formulário é redimensionado ou sistema autônomo o Sumário alterar em dimensionar.Quando você precisa de um layout dinâmico e deseja manipular Layout eventos explicitamente no seu código, considere o uso de um painel de layout.

The FlowLayoutPanel controle e o TableLayoutPanel controle fornecem maneiras intuitivas de organizar controles no formulário. Ambos fornecem uma capacidade automático e configurável de controlar sistema autônomo posições relativas de controles filho contidos neles e ambos oferecem recursos de layout dinâmico em time de execução, para que eles possam redimensionar e reposicionar controles filhos sistema autônomo dimensões do formulário pai alterar.Painéis de layout podem ser aninhados em painéis de layout, para permitir a realização de interfaces de usuário sofisticada.

The TableLayoutPanelorganiza seu Sumário em uma grade, fornecendo funcionalidade semelhante ao HTML <tabela>elemento. Suas células são organizadas em linhas e colunas e elas podem ter tamanhos diferentes.Para obter mais informações, consulte Demonstra Passo a passo: Organizando controles no Windows Forms usando um TableLayoutPanel.

The FlowLayoutPanel organiza seu Sumário em uma direção de fluxo específico: horizontal ou vertical.Seu Sumário pode ser disposto a partir de uma linha para a próxima ou uma coluna para a próxima.Como alternativa, seu Sumário pode ser cortado em vez de quebradas.Tarefas ilustradas nesta explicação passo a passo incluem:

Criando um projeto Windows Forms
Organizando controles horizontalmente e verticalmente
Alterando a direção do fluxo
Inserir quebras de fluxo
Organizando controles usando preenchimento e margens
Inserindo controles, clicar duas vezes eles na caixa de ferramentas
Inserir um controle por seu estrutura de tópicos de desenho
Inserindo controles usando o cursor
Reatribuindo controles existentes a um pai diferente

Quando tiver terminado, você terá noções básicas sobre o papel desempenhado por esses recursos importantes do layout.

Observação:
As caixas de diálogo e comandos de menu demonstradas podem ser diferentes daqueles descritas na Ajuda, dependendo das configurações ativas ou configurações de edição.Para alterar as configurações, escolher Importar e exportar configurações on the Ferramentas menu.Para obter mais informações, consulte Configurações do Visual Studio.

Criando o projeto

A primeira etapa é criar o projeto e configurar o formulário.

Para criar o projeto

Crie um projeto de aplicativo baseado no baseado no Windows chamado "FlowLayoutPanelExample".Para obter mais informações, consulte Como: Criar um projeto de aplicativo do Windows.
Selecione o formulário na caixa Forms Designer .

Organizando controles horizontalmente e verticalmente

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

The FlowLayoutPanel controle para redimensionar ou refluxo seus controles filhos sistema autônomo sistema autônomo dimensões do formulário pai são alteradas.

Para organizar controles horizontal e verticalmente usando um FlowLayoutPanel

Arraste um controle FlowLayoutPanel do ToolBox para seu formulário.
arrastar um Button controle das Caixa de ferramentas into the FlowLayoutPanel. Observe que ele é automaticamente movido para o canto superior esquerdo do FlowLayoutPanel controle.
arrastar outro Button controlar a partir do Caixa de ferramentas into the FlowLayoutPanel. Observe que o Button controle automaticamente é movido para uma posição ao lado para o primeiro Button controle. Se seu FlowLayoutPanel é muito estreita para ajuste os dois controles na mesma linha, o novo Button controle automaticamente é movido para a próxima linha.
arrastar mais várias Button Controla a partir do Caixa de ferramentas into the FlowLayoutPanel. Continuar colocando Button controles até que uma quebra automaticamente para a próxima linha.
Altere o valor da propriedade WrapContents do controle FlowLayoutPanel para false, .Observe que o filho não controla o fluxo para a próxima linha.Em vez disso, elas são movidas para a primeira linha e recortadas.
Altere o valor da propriedade WrapContents do controle FlowLayoutPanel para true, .Observe que o filho controles dispor novamente na próxima linha.
Diminuir a largura do FlowLayoutPanel controle até que todos os Button controles são movidas para a primeira coluna.
Aumente a largura do FlowLayoutPanel controle até que todos os Button controles são movidas para a primeira linha. Talvez seja necessário redimensionar o formulário para acomodar a largura maior.

Alterando a direção do fluxo

The FlowDirection propriedade permite que você alterar 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

Altere o valor da propriedade FlowDirection do controle FlowLayoutPanel para TopDown, .Observe que o filho controles são reorganizados em uma ou mais colunas, dependendo da altura do controle.
Redimensionar o FlowLayoutPanel Portanto, é menor do que a coluna de sua altura Button controles. Observe que o FlowLayoutPanel Reorganiza os controles filho para fluir para a próxima coluna. Continue a diminuir a altura e observe que o filho controla fluxo em colunas consecutivas.Altere o valor da propriedade FlowDirection do controle FlowLayoutPanel para RightToLeft, .Observe que as posições dos controles filho são revertidas.Observe o layout quando você altera o valor do FlowDirection propriedade para BottomUp.

Inserir quebras de fluxo

The FlowLayoutPanel controle fornece uma propriedade FlowBreak para seus controles filho. configuração o valor da propriedade FlowBreak para true faz com que o FlowLayoutPanel controle para parar o layout de controles na direção de fluxo corrente e passará para a próxima linha ou coluna.

Para inserir quebras de fluxo

Altere o valor da propriedade FlowDirection do controle FlowLayoutPanel para TopDown, .
selecionar uma do Button controles no meio da coluna mais à esquerda.
conjunto o valor de Button propriedade do controle FlowBreak para true. Observe que a coluna é quebrada e os controles após o selecionado Button fluxo de controle para a próxima coluna. conjunto o valor de Button propriedade do controle FlowBreak para false para retornar para o comportamento original.

Posicionamento com encaixe e ancorando controles

O encaixe e ancoragem comportamentos dos controles filho diferem dos comportamentos em outros controles de contêiner.O encaixe e ancoragem são relativas ao controle maior na direção do fluxo.

Para posicionar controles usando o encaixe e ancoragem

Aumentar o dimensionar do FlowLayoutPanel até que o Button controles são organizados em uma coluna.
selecionar o superior Button controle. Incresistema autônomoe sua largura para que ela seja duas vezes sobre sistema autônomo ampla sistema autônomo outros Button controles.
selecionar o segundo Button controle. Defina o valor da propriedade Anchor como Right.Observe que ele é movido para que sua borda direita está alinhada com a primeira Button borda direita do controle.
Alterar o valor de seus Anchor propriedade para Right e Left. Observe que ele seja dimensionado para a mesma largura que o primeiro Button controle.
selecionar a terceira Button controle. Defina o valor da propriedade Dock como Fill.Observe que ele seja 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 o Padding e Margin Propriedades.

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

The Margin propriedade permite que você controle o espaçamento entre controles.

Para organizar controles usando as propriedades de preenchimento e margem

Altere o valor da propriedade Dock do controle FlowLayoutPanel para Fill, .Se o formulário for grande o suficiente, Button controles serão movidas para a primeira coluna das FlowLayoutPanel controle.
Alterar o valor de FlowLayoutPanel do controle Padding propriedade expandindo o Padding entrada de Propriedades janela e definindo o All propriedade para 20. Para obter mais informações, consulte Demonstra Passo a passo: Fazendo o layout de Windows Forms Controls com a propriedade AutoSize, margens e preenchimento. Observe que os controles filhos são movidos em direção ao centralizar do FlowLayoutPanel controle. O valor aumentado para o Padding propriedade coloca os controles filho longe do FlowLayoutPanel bordas do controle.
selecionar todo o Button os controles no FlowLayoutPanel e defina o valor da Margin propriedade para 20. Observe que o espaçamento entre o Button Controla aumenta, para que elas são movidas ainda mais separadas. Talvez seja necessário redimensionar o FlowLayoutPanel controle para ser maior para ver todos os controles filho.

Inserindo controles, clicar duas vezes eles na caixa de ferramentas

Você pode popular seu FlowLayoutPanel controle clicando duas vezes em controles de Caixa de ferramentas.

Para inserir controles clicando duas vezes na caixa de ferramentas

clicar duas vezes o Button ícone de controle no Caixa de ferramentas.Observe que um novo Button controle aparece no FlowLayoutPanel controle.
clicar duas vezes em vários controles mais no Caixa de ferramentas.Observe que os novos controles sucessivamente aparecem no FlowLayoutPanel controle.

Inserir um controle por seu estrutura de tópicos de desenho

Você pode inserir um controle em um FlowLayoutPanel controlar e especifique seu dimensionar por seu estrutura de tópicos de desenho em uma célula.

Para inserir um controle desenhando seus tópicos

No Caixa de ferramentas, clicar no Button ícone de controle. Não arrastar-o para o formulário.
Mova o ponteiro do mouse sobre o FlowLayoutPanel controle. Observe que o ponteiro se transformar em uma cruz com o Button ícone do controle anexado.
clicar e Isenção o botão do mouse.
arrastar o ponteiro do mouse para desenhar o estrutura de tópicos do Button controle. Quando estiver satisfeito com o dimensionar, solte o botão do mouse.Observe que o Button controle é criado no local próximo em aberto das FlowLayoutPanel controle.

Inserindo controles usando a BAR de inserção

Você pode inserir controles em uma posição específica em um FlowLayoutPanel controle. Quando você arrastar um controle para o FlowLayoutPanel área de cliente do controle, uma BAR de inserção é exibida para indicar onde o controle será inserido.

Para inserir um controle utilizando o acento circunflexo

arrastar um Button controlar a partir do Caixa de ferramentas into the FlowLayoutPanel controle e aponte para o espaço entre os dois Button controles. Note that an insertion bar is drawn, indicating where the Button will be placed when it is dropped into theFlowLayoutPanel control.Antes você soltar o novo Button controle para o FlowLayoutPanel controle, mova o ponteiro do mouse para observar como a BAR de inserção se move.
Solte o novo Button controle para o FlowLayoutPanel controle. Observe que o novo Button controle não está alinhado com as outras porque sua Margin propriedade tem um valor diferente.

Reatribuindo controles existentes a um pai diferente

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

Para controles existentes reaparentá

arrastar três Button Controla a partir do Caixa de ferramentas para o formulário.Posicioná-los perto uns aos outros, mas deixá-los desalinhada.
No Caixa de ferramentas, clicar no FlowLayoutPanel ícone de controle. Não arrastar-o para o formulário.
Mova o ponteiro do mouse próximo à três Button controles. Observe que o ponteiro se transformar em uma cruz com o FlowLayoutPanel ícone do controle anexado.
clicar e Isenção o botão do mouse.
arrastar o ponteiro do mouse para desenhar o estrutura de tópicos do FlowLayoutPanel controle. Desenhar o estrutura de tópicos ao redor de a três Button controles.
Solte o botão do mouse.Observe que as três Button controles são inseridos na 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 mais exemplos incluem:

Redimensionar um o Button controles para um dimensionar maior e observe o efeito sobre o layout.
Layout de painéis podem conter outros painéis de layout.Experimentar soltando um TableLayoutPanel controle para o controle existente.
Encaixar o FlowLayoutPanel controle ao formulário pai. Redimensionar o formulário e observe o efeito sobre o layout.
conjunto o Visible propriedade de um dos controles para false e observe como o FlowLayoutPanel reflui em resposta.

Consulte também