DevMedia
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login

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.

[fechar]

Você não gostou da qualidade deste conteúdo?

(opcional) Você poderia comentar o que não lhe agradou?

Confirmo meu voto negativo

 

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”.

 

gbcawfaafig01.JPG 

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”.

 

gbcawfaafig02.JPG 

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):

 

gbcawfaafig03.JPG 

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:

 

gbcawfaafig04.JPG 

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”.

 

gbcawfaafig05.JPG 

Figura 05.

 

gbcawfaafig06.JPG 

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



Gustavo Barros (gustavo.barros@swstech.com.br), estudou Eng. Química no IME e Computação Gráfica no Impa, é Sócio/Desenvolvedor da SWS. Programador Java desde 2004 e .Net desde que começou a participar da Imagine Cup ( 2 lugar (Na [...]

O que você achou deste post?
Conhece a assinatura MVP?
Serviços

Mais posts