Criando aplicações Windows Forms auto-ajustáveis ao tamanho da tela
Neste artigo veremos (de uma maneira bem básica) como criar aplicações Windows Forms com layouts auto-ajustáveis. Os dois principais controles para isso são “Panels” (que servirá como container para os outros controles) e o “Splitter” que fará a separação entre os “Panels”.
O primeiro controle que vamos colocar é o “StatusBar”. Vai ser a partir deste controle que saberemos o tamanho atual da tela, e possibilitando os ajustes dos “Panels” da tela. Adicione também um “Splitter” e em propriedades coloque: “Dock=Bottom”.
Figura 01.
Vamos agora adicionar o “Panel” do lado esquerdo. Este “Panel” ficará com a largura fixa, mas com a altura variável. Configuramos as suas proprieadades: “Dock=Left, Name=panel_esq”. Depois adicionamos outro “Splitter”.
Figura 02.
Vamos adicionar agora o “Panel” da parte superior. Esse “Panel” ficará com a altura fixa, mas com a largura variável. Adicione o “Panel” e em propriedades coloque “Dock=Top”. Depois adicione um “Splitter” e configure em propriedades: “Dock=Top”. Finalmente adicione mais um “Panel” e configure em propriedades “Dock=Fill”, para que este “Panel” ocupe todo o espaço entre o “Panel” de cima, do lado, e o StatusBar.
A tela deverá ficar da seguinte maneira (alterei as cores dos panels para que ficasse mais claro a visualização):
Figura 03.
Agora vamos preencher cada “Panel”:
“Panel” esquerdo:
Os controles do “Panel” esquerdo ficarão fixos, logo apenas colocaremos alguns para ficar mais claro o layout, mas não existe nenhum passo especial em relação a esses controles.
Adicionaremos então três “labels”, três “textboxs”, e um “button”.
“Panel” topo:
Neste “Panel” colocaremos alguns controles que ficarão fixos ( neste caso 3 “buttons” ) e um controle que se adaptará a largura do “Form”. Para isso coloque três “buttons” em cima, e logo abaixo um “Textbox”, o qual deverá ocupar praticamento todo o espaço ( abaixo dos “buttons”) restante. Então selecione o “Textbox”, e em propriedades, escolha “Anchor”, e a configure para: “Left, “Buttons” e “Right”, conforme a figura a seguir:
Figura 04.
“Panel” central:
Adicionaremos no “Panel” central outros três “Panels”. Veja a seguir:
- “Panel” central / Esquerdo
Coloque o primeiro “Panel” ( o qual ficará do lado esquerdo ) e configure em propriedades: “Dock=Left, Name=panel_centro_esq”. Adicione ( dentro deste “Panel”) então um “TextBox” e em propriedades: “Dock=Fill”, “Multiline=True”.
- “Panel” central / Centro
Adicione um “Splitter” ( ao lado do panel “panel_centro_esq” ), e em propriedades configure: “Dock=Left”.
Coloque o segundo “Panel” e configure em propriedades: “Dock=Left, Size->Width=20, Name=panel_centro_meio”.
- “Panel” central / Direito
Adicione um “Splitter” ( ao lado do panel “panel_centro_meio” ), e em propriedades configure: “Dock=Left”.
Coloque o terceiro “Panel” ( o qual ficará do lado direito ) e configure em propriedades: “Dock=Fill, Name=panel_centro_dir”. Adicione então um “TextBox” e em propriedades: “Dock=Fill”, “Multiline=True”.
Por último ajustaremos as larguras dos dois “TextBoxs” do “Panel” central de acordo com a largura do “StatusBar”. Para isso adicione o seguinte código no nosso Form:
private void ResizeMiddlePanel()
{
int panelCentralWidth = (int)(.95*(statusBar1.Width - panel_esq.Width)) - panel_centro_meio.Width;
panel_centro_esq.Width = panelCentralWidth/2;
panel_centro_dir.Width = panelCentralWidth/2;
}
O cálculo realizado no código acima é bem simples. Nós simplesmente recuperamos a largura da tela ( através do StatusBar ) e subtraimos a largura do “Panel” esquerdo. Com isso sabemos a largura disponível para o “Panel” central. Subtraimos o tamanho do “panel_central_meio”, e o que resta é dividido igualmente para os dois “Panels” que possuem os “TextBox”
E chame esse método nos eventos de “Load” e “Resize” do “Form”. Para isso basta ir em propriedade ( com o “Form” selecionado ), clicar no raiozinho de eventos, e dar um duplo clique ( tanto em “Load”, quanto “Resize”).
private void Form1_Load(object sender, System.EventArgs e)
{
ResizeRightBottomPanel();
}
private void Form1_Resize(object sender, System.EventArgs e)
{
ResizeRightBottomPanel();
}
Observe no resultado final como os “TextBox” se adaptam ao tamanho do “Form”.
Figura 05.
Figura 06.
Pronto pessoal, este é um exemplo bem básico, mas com o objetivo de mostrar qual o caminho que devemos seguir para criar aplicações com layouts auto-ajustáveis. Agora é só brincar um pouco mais, e em pouco tempo vocês estarão dominando isso de uma maneira bem intuitiva.
Gustavo Barros
