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

Artigo
08/04/2011

Alguns aplicativos requerem um formulário com um layout que organiza próprio adequadamente, como o formulário é redimensionado ou que os conteúdos mudam em tamanho. Quando você precisa de um layout dinâmico e não deseja manipular Layout eventos explicitamente no seu código, considere o uso de um painel de layout.

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

O TableLayoutPanel organiza seu conteúdo em uma grade, fornecendo funcionalidade semelhante ao HTML <table> 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 em formulários do Windows usando um TableLayoutPanel.

O FlowLayoutPanel organiza seu conteúdo em uma direção de fluxo específico: horizontal ou vertical. Seu conteúdo pode ser disposto a partir de uma linha para a próxima ou uma coluna para a próxima. Como alternativa, seu conteúdo pode ser cortado em vez de quebradas. As tarefas ilustradas neste passo a passo incluem:

Criando um projeto Windows Forms
Organizando controles horizontalmente e verticalmente
Alterar a direção do fluxo
Inserindo quebras de fluxo
Organizando controles usando preenchimento e margens
Inserindo controles clicando neles duas vezes na caixa de ferramentas
Inserir um controle desenhando seus tópicos
Inserindo controles usando o acento circunflexo
Reatribuindo controles existentes a um pai diferente

Quando tiver terminado, você terá de entender 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 descritos na Ajuda, dependendo das configurações ativas ou configurações de edição. Para alterar as configurações, escolha Import and Export Settings sobre o Ferramentas menu. Para obter mais informações, consulte Trabalhando com configurações.

Criando o projeto

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

Para criar o projeto

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

Organizando controles horizontalmente e verticalmente

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

O FlowLayoutPanel controle para redimensionar ou refluxo de seus controles filho, como as dimensões da alteração de formulário pai.

Para organizar controles horizontalmente e verticalmente usando um FlowLayoutPanel

Arraste um controle FlowLayoutPanel do ToolBox para seu formulário.
Arrastar um Button de controle da Toolbox para o FlowLayoutPanel. Observe que ele é automaticamente movido para o canto superior esquerdo do FlowLayoutPanel de controle.
Arraste outra Button de controle da Toolbox para o FlowLayoutPanel. Observe que o Button controle automaticamente é movido para uma posição próximo ao primeiro Button de controle. Se sua FlowLayoutPanel é muito estreita para ajustar os dois controles na mesma linha, o novo Button controle automaticamente é movido para a próxima linha.
Arraste vários outros Button controla a partir do Toolbox na FlowLayoutPanel. Continuar colocando Button controla até que uma quebra 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, eles são movidos para a primeira linha e cortados.
Altere o valor da propriedade WrapContents do controle FlowLayoutPanel para true, . Observe que a criança novamente controla a quebra automática de linha para a próxima linha.
Diminuir a largura da FlowLayoutPanel o controle até que todos os Button controles são movidos na primeira coluna.
Aumente a largura do FlowLayoutPanel o controle até que todos os Button controles são movidos na primeira linha. Talvez você precise redimensionar o formulário para acomodar a largura maior.

Alterar a direção do fluxo

O FlowDirection propriedade permite que você alterar a direção na qual os controles estão organizados. Você pode organizar os controles de 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 de fluxo em um FlowLayoutPanel

Altere o valor da propriedade FlowDirection do controle FlowLayoutPanel para TopDown, . Observe que os controles filhos são reorganizados em um ou mais colunas, dependendo da altura do controle.
Redimensionar o FlowLayoutPanel para que sua altura for menor do que a coluna de 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 a criança controla o 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 de FlowDirection propriedade para BottomUp.

Inserindo quebras de fluxo

O FlowLayoutPanel o controle fornece uma propriedade FlowBreak para seus controles filho. Definindo o valor da propriedade FlowBreak para true faz com que o FlowLayoutPanel o controle para parar o layout de controles na direção de fluxo atual 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, .
Selecione uma da Button controles no meio da coluna mais à esquerda.
Definir o valor de Button propriedade de FlowBreak do controle para true. Observe que a coluna é quebrada e os controles selecionados a seguir Button o fluxo de controle para a próxima coluna. Definir o valor de Button propriedade de FlowBreak do controle para false para retornar ao comportamento original.

Usando o encaixe e ancoragem de controles de posicionamento.

Encaixando e ancorando comportamentos dos controles filho diferem os comportamentos em outros controles do recipiente. Encaixe e a ancoragem são relativas ao controle maior em direção de fluxo.

Para posicionar controles usando o encaixe e ancoragem

Aumentar o tamanho da FlowLayoutPanel até o Button controles são organizados em uma coluna.
Selecione a parte superior Button de controle. Aumentar a largura para que fique sobre duas vezes, tão larga quanto a outro Button controles.
Selecione a segunda Button de controle. Defina o valor da propriedade Anchor como Right. Observe que ele é movido para que sua borda direita é alinhada com o primeiro Button borda direita. do controle
Alterar o valor de suas Anchor propriedade para Right e Left. Observe que ele é dimensionado com a mesma largura do primeiro Button de controle.
Selecione a terceira Button de controle. Defina o valor da propriedade Dock como Fill. Observe que ele é dimensionado com a mesma largura do primeiro Button de controle.

Organizando controles usando preenchimento e margens

Você também pode organizar controles em seu FlowLayoutPanel controle alterando a Padding e Margin Propriedades.

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

O Margin propriedade lhe permite controlar o espaçamento entre controles.

Para organizar os 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, o Button controles serão movidas para a primeira coluna da FlowLayoutPanel de controle.
Alterar o valor da FlowLayoutPanel do controle Padding propriedade expandindo o Padding entrada na Propriedades janela e a configuração do All propriedade para 20. Para obter mais informações, consulte Demonstra Passo a passo: Dispor de Windows Forms Controls Padding, margens e a propriedade AutoSize. Observe que os controles filhos são movidos em direção ao centro da FlowLayoutPanel de controle. O maior valor para o Padding propriedade empurra os controles filho longe do FlowLayoutPanel bordas. do controle
Selecionar todas a Button controles da FlowLayoutPanel e definir o valor da Margin propriedade para 20. Observe que o espaçamento entre as Button controla aumenta, para que eles são movidos mais separadas. Talvez seja necessário redimensionar o FlowLayoutPanel o controle a ser ampliada para ver todos os controles filho.

Inserindo controles clicando neles duas vezes na caixa de ferramentas

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

Para inserir controles clicando duas vezes na caixa de ferramentas

Clique duas vezes o Button no ícone do controle a Toolbox. Observe que uma nova Button controle aparece no FlowLayoutPanel de controle.
Clique duas vezes em vários controles mais o caixa de ferramentas. Observe que os novos controles aparecem em sucessivamente a FlowLayoutPanel de controle.

Inserir um controle desenhando seus tópicos

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

Para inserir um controle desenhando seus tópicos

No caixa de ferramentas, clique o Button ícone de controle. Não arraste-o para o formulário.
Mova o ponteiro do mouse sobre o FlowLayoutPanel de controle. Observe que o ponteiro muda para uma cruz com o Button o ícone do controle anexado.
Clique e mantenha pressionado o botão do mouse.
Arraste o ponteiro do mouse para desenhar o contorno da Button de controle. Quando estiver satisfeito com o tamanho, solte o botão do mouse. Observe que o Button controle é criado no próximo abrir local a FlowLayoutPanel de controle.

Inserindo controles usando a barra de inserção

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

Para inserir um controle usando o acento circunflexo

Arrastar um Button de controle da Toolbox na FlowLayoutPanel de controle e aponte para o espaço entre dois Button controles. Observe que uma barra de inserção é desenhada, indicando onde a Button será colocado quando ele é colocado naFlowLayoutPanel controle. Antes de você soltar o novo Button controle para o FlowLayoutPanel de controle, mova o ponteiro ao redor para observar como a barra de inserção move.
Solte a nova Button controle para o FlowLayoutPanel de controle. Observe que a nova Button controle não está alinhado com os outros, porque seu Margin a propriedade tem um valor diferente.

Reatribuindo controles existentes a um pai diferente

Você pode atribuir controles existentes em seu formulário para uma nova FlowLayoutPanel de controle.

Para reassociar os controles existentes

Arraste três Button controla a partir de caixa de ferramentas para o formulário. Posicioná-los perto uns aos outros, mas deixá-los não alinhadas.
No caixa de ferramentas, clique o FlowLayoutPanel ícone de controle. Não arraste-o para o formulário.
Mova o ponteiro do mouse próximo ao três Button controles. Observe que o ponteiro muda para uma cruz com o FlowLayoutPanel o ícone do controle anexado.
Clique e mantenha pressionado o botão do mouse.
Arraste o ponteiro do mouse para desenhar o contorno da FlowLayoutPanel de controle. Desenhar o contorno ao redor de três Button controles.
Solte o botão do mouse. Observe que os três Button controles são inseridos no FlowLayoutPanel de 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:

Redimensione um do Button controles de um tamanho maior e uma observação o efeito no layout.
Painéis de layout podem conter outros painéis de layout. Experimente soltando um TableLayoutPanel o controle em um controle existente.
Encaixe o FlowLayoutPanel o controle para o formulário pai. Redimensionar o formulário e observe o efeito no layout.
Definir o Visible propriedade de um dos controles para false e observe como o FlowLayoutPanel reflui na resposta.

Consulte também

Share via