Você também tem dúvidas sobre como preencher as vagas à direita e abaixo após arrastar a janela?
Algumas pessoas fixam diretamente o tamanho do formulário e não permitem que os usuários o arrastem. . .
Alguns novatos também me perguntaram diretamente: existe alguma maneira no MaterialSkin de fazer os controles se moverem ao arrastar?
Na verdade, essas funções estão disponíveis no Painel do sistema há muito tempo, mas as pessoas não as conhecem ou não sabem como utilizá-las.
Apenas na coluna "Container" da barra de ferramentas, independentemente desses poucos controles, ele pode realmente resolver a maioria dos problemas de layout.
Vamos dar uma olhada na aparência do software depois de usar o layout:
normal:
Reduzir o zoom:
prolongar:
Este é um zoom muito grande. Se você comparar, verá que os controles de alternância no canto inferior direito mudaram de duas colunas para uma coluna e depois para três colunas. Esta é a função do FlowLayoutPanel.
Nessas imagens, a parte do texto à esquerda e a parte do botão à direita são sempre dimensionadas na proporção de um para um. Esta é a função do SpliteContainer.
Os quatro botões mantêm uma certa distância entre si e podem ficar maiores e menores juntos.Isso está usando um TableLayoutPanel com duas linhas e duas colunas.
Também envolve especificamente que tipo de painel precisa ser usado em que circunstâncias, como aninhá-lo, como definir preenchimento, encaixe, definir propriedades de espaçamento, etc. Há muitas coisas. Você pode criar um novo projeto e segui-lo passo a passo. passo. Também peguei um formulário em branco para demonstrar.
1.TableLayoutPanel
Arraste-o e ficará assim: Assim como uma tabela, você pode clicar no pequeno triângulo no canto superior direito para adicionar linhas ou colunas.
Adicionamos uma linha e uma coluna e arrastamos seu espaçamento para exibi-la como uma grade de nove quadrados.
Parece perfeito, mas quando arrasto o canto inferior direito para ampliar o TableLayoutPanel, descubro que o tamanho das linhas e colunas recém-adicionadas não muda de acordo. As mesas estão ficando desiguais novamente.
Isso ocorre porque as linhas ou colunas recém-adicionadas são baseadas no valor da largura (altura) por padrão, e não na proporção.
Se precisar de uma bissecção mais precisa, você precisa clicar na última opção “ Editar linhas ou colunas ” no pequeno triângulo para fazer configurações detalhadas.
Nesta folha de estilo, podemos ver que a primeira e a segunda colunas têm 50%, o que significa proporção, e a terceira coluna é um valor fixo, por isso a terceira coluna não mudará de tamanho. Colocamos Também é alterado para um tipo percentual, 50% (você pode escrever essa proporção como quiser, não importa se o total ultrapassa 100%, ela será recalculada).Você pode ver que as três colunas são todas 50%, que é a forma de 1:1:1.
Clique em OK e você verá que as três colunas foram divididas igualmente. Usamos o mesmo método para dividir as linhas em três partes iguais.
Mude a exibição para linhas e o método de configuração é o mesmo acima. O TableLayoutPanel é dividido em quadrados 3*3 perfeitos e arrastar os quadrados mudará uniformemente. Neste ponto, o TableLayoutPanel foi definido com sucesso.
Em seguida, precisamos preenchê-lo com elementos. Aqui usamos botões para demonstrar. Coloque um botão em cada uma das 9 grades.
Queremos que cada botão ocupe uma grade inteira. Aqui está um truque. Mantenha pressionada a tecla Ctrl no teclado para selecionar vários controles e alterar suas propriedades juntos. Aqui mantemos pressionada a tecla Ctrl e usamos o mouse para selecionar todos os 9 botões e alterá-los. Estas duas propriedades:
AutuSize foi mencionado antes. Se for alterado para False, podemos alterar o tamanho do botão. Definir o Dock para Fill significa preenchê-lo completamente. Após a alteração, arrastando o TableLayoutPanel, podemos descobrir que cada botão ficará maior ou menor.
Não importa se há cintilação aqui, porque está no modo de design e basicamente não haverá cintilação quando estiver realmente em execução.
Da mesma forma, selecionamos TableLayoutPanel, alteramos suas propriedades e definimos Dock como Fill , para que TableLayoutPanel possa preencher todo o formulário e mudar conforme o formulário muda.
Execute o programa e tente alterar o tamanho da janela.
O formulário inteiro é sempre preenchido. Quando o formulário muda, os botões também mudam. Esse é o efeito que queremos!
Este também é o princípio básico de controle do tamanho dos controles da interface por meio do layout. É muito simples entender o seguinte.
A seguir, vamos falar sobre alguns detalhes. Por exemplo, acho que o espaçamento entre os botões é muito pequeno e parece muito denso. Como posso aumentar o espaçamento entre eles ?
Selecione todos os botões e altere suas propriedades de Margin. Os quatro valores das propriedades de Margin representam a distância entre o controle e a parte superior esquerda e inferior direita da borda do contêiner. Alteramos todos eles para 10. Você pode ver que o espaçamento mudou e é mais amplo.
Claro, se você quiser alterar apenas o espaçamento esquerdo e direito, basta definir as margens correspondentes à esquerda e à direita, respectivamente. Na ordem superior esquerda e inferior direita, elas são a primeira e a terceira (todos vocês devem saber disso, então não vou entrar em detalhes)
E se eu quiser que um botão ocupe várias linhas ou colunas ? Semelhante à barra de espaço do teclado e à tecla delete.
Exclua Button6 e Button9, clique em button3 e encontre Layout->RowSpan na lista de propriedades.
Isso significa que ele pode abranger várias linhas, alteramos para 3, o que significa que esse controle pode ocupar 3 linhas de espaço.
Após a modificação, conforme mostrado na figura, a coluna mais à direita é toda Button3:
Da mesma forma, excluímos Button8, clicamos em Button7 e definimos ColumnSpan como 2, para que Button7 possa ocupar o espaço de duas colunas.
Na verdade, isso divide nosso layout em diferentes áreas funcionais. Para facilitar a demonstração, uso botões e substituo os botões por componentes funcionais. Na verdade, é o software que usamos todos os dias. Este TableLayoutPanel é equivalente à fundação. É justamente por isso que cada componente pode alterar automaticamente seu tamanho seguindo a forma ~
Se você quiser fazer uma barra de status inferior ou barra de menu com altura fixa, semelhante à barra de status na parte inferior do nosso navegador, ela terá uma altura fixa e não mudará com o tamanho do formulário. Como mostrado abaixo:
Isso também é muito simples. Basta adicionar uma nova linha e definir a altura para uma altura fixa (não em forma de porcentagem). Este formulário geralmente é o padrão e não requer nenhuma modificação.
Em seguida, defina as propriedades em várias colunas e defina o Dock como Preenchimento, conforme mostrado na figura abaixo. Independentemente de ser longo ou plano, a altura da barra de status inferior não mudará.
Neste ponto, o conteúdo do TableLayoutPanel está quase introduzido. Você pode experimentar as funções restantes sozinho no uso diário, então não vou descrevê-lo muito.
2. SplitContainer
SplitContainer é um controle usado para separação de interfaces e também em layout. Seu efeito é dividir a interface em duas partes.
Pode ser dividido em partes esquerda e direita ou partes superior e inferior, e a proporção da mesma divisão também pode ser ajustada.
Ele pode ser usado em locais onde os requisitos de layout não são altos. Por exemplo, softwares de bate-papo como o WeChat basicamente têm um layout da esquerda para a direita, com contatos à esquerda e uma barra de informações à direita. Se o layout for simples, você pode usar SplitContainer .
Pode ser usado em nesting, por exemplo, se quiser separar as partes superior e inferior do lado direito, arraste outro SplitContainer para dentro do Painel à direita, conforme mostrado abaixo:
No entanto, quando houver muitos SplitContainers, surgirão problemas. É difícil selecionar durante a seleção. Muitas vezes o Painel interno é selecionado em vez do SplitContainer externo. Nesse caso, você precisa clicar com o botão direito e selecionar o SplitContainer manualmente.
É altamente recomendável que você nomeie cada painel ao usá-lo , como na imagem acima. Depois de muito tempo, você não saberá a que SplitContainer2 se refere e será muito confuso.
Justamente porque os nomes de cada Painel são confusos e difíceis de gerenciar por serem muitos, então se o layout for mais complicado, use o TableLayoutPanel mencionado acima.
Ainda assim, defina o Dock do SplitContainer como Fill para acompanhar as alterações do formulário.
3.FlowLayoutPanel
Também conhecido como layout de fluxo, é adequado para estilos repetidos, como cartões de visita, menus, pedidos, etc. Basta adicionar controles a ele e o FlowLayoutPanel se organizará. Se houver espaço suficiente para 3 colunas e não Se forem suficientes 4 colunas, ele será exibido como 3 colunas. Por analogia, definir AutoScroll como TRUE também exibirá automaticamente barras de rolagem.
A imagem abaixo é o efeito da adição do UserControl ao FlowLayoutPanel depois que eu mesmo o criei. (Você mesmo pode adicionar UserControl ao projeto)
Dentre eles, desenhei apenas a parte do cartão de visita, e o layout foi preenchido automaticamente pelo FlowLayoutPanel. (A propriedade Dock de FlowLayoutPanel está definida como Fill)
Conteúdo do UserControl:
Adicione 9 UserControls ao FlowLayoutPanel. Como a janela atual é relativamente pequena, ela é exibida automaticamente em duas colunas. Como apenas 6 podem ser exibidos, uma barra de rolagem aparece automaticamente no lado direito.
Arraste o formulário para alterar seu tamanho e o FlowLayoutPanel exibirá automaticamente três colunas.
Quando a exibição for concluída, a barra de rolagem desaparece automaticamente.
Este método de layout também é comumente usado e precisa estar familiarizado com ele!
Se quiser adicionar controles dinamicamente ao FlowLayoutPanel em segundo plano, você pode usar o seguinte código:
this.flowLayoutPanel1.Controls.Add(new UserControl1());Você pode adicionar controles personalizados ao FlowLayoutPanel no código de fundo , conforme mostrado na figura, existem 10 cartões de visita.
É bastante conveniente e flexível de usar.
As funções do FlowLayoutPanel são exatamente as acima e, no geral, são bastante poderosas.
4. Aplicação abrangente
Para usar o TabCotrol como o projeto de barra lateral que escrevemos antes, precisamos colocar o painel de layout na guia correspondente.
Aqui usamos primeiro SplitContainer para separar as partes esquerda e direita, de modo que as partes esquerda e direita sempre mantenham uma proporção de 1:1 de ampliação e redução.
Como existem três linhas no lado esquerdo, opte por usar TableLayoutPanel e divida-o em três linhas.
A parte superior do lado direito é dividida em duas linhas e duas colunas usando TableLayoutPanel para permitir que os botões expandam e diminuam uniformemente.
O FlowLayoutPanel é usado no canto inferior direito para permitir que as opções sejam organizadas de forma adaptativa.
Ok, por enquanto é isso, espero que seja útil para todos!