Verso para impresso: Criando aplicaes Windows Forms auto-ajustveis ao tamanho da tela

www.devmedia.com.br [verso para impresso]

Pgina 1

Criando aplicaes Windows Forms auto-ajustveis ao tamanho da tela

Neste artigo veremos (de uma maneira bem bsica) como criar aplicaes Windows Forms com layouts autoajustveis.

Criando aplicaes Windows Forms auto-ajustveis ao tamanho da tela

Neste artigo veremos (de uma maneira bem bsica) como criar aplicaes Windows Forms com layouts auto-ajustveis. Os dois principais controles para isso so Panels (que servir como container para os outros controles) e o Splitter que far a separao 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 tambm 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 varivel. Configuramos as suas proprieadades: Dock=Left, Name=panel_esq. Depois adicionamos outro Splitter.

http://www.devmedia.com.br/articles/viewcomp_forprint.asp?comp=4926

03/02/2012 17:34:19

Verso para impresso: Criando aplicaes Windows Forms auto-ajustveis ao tamanho da tela

Pgina 2

Figura 02. Vamos adicionar agora o Panel da parte superior. Esse Panel ficar com a altura fixa, mas com a largura varivel. 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 espao 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 visualizao):

Figura 03. Agora vamos preencher cada Panel: Panel esquerdo: Os controles do Panel esquerdo ficaro fixos, logo apenas colocaremos alguns para ficar mais claro o layout, mas no existe nenhum passo especial em relao a esses controles. Adicionaremos ento trs labels, trs textboxs, e um button. Panel topo: Neste Panel colocaremos alguns controles que ficaro fixos ( neste caso 3 buttons ) e um controle que se adaptar a largura do Form. Para isso coloque trs buttons em cima, e logo abaixo um Textbox, o qual dever ocupar praticamento todo o espao ( abaixo dos buttons) restante. Ento selecione o Textbox, e em propriedades, escolha Anchor, e a configure para: Left, Buttons e Right, conforme a figura a seguir:

http://www.devmedia.com.br/articles/viewcomp_forprint.asp?comp=4926

03/02/2012 17:34:19

Verso para impresso: Criando aplicaes Windows Forms auto-ajustveis ao tamanho da tela

Pgina 3

Figura 04. Panel central: Adicionaremos no Panel central outros trs 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) ento 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 ento 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 cdigo 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 clculo realizado no cdigo acima bem simples. Ns simplesmente recuperamos a largura da tela ( atravs do StatusBar ) e subtraimos a largura do Panel esquerdo. Com isso sabemos a largura disponvel 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 mtodo 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.

http://www.devmedia.com.br/articles/viewcomp_forprint.asp?comp=4926

03/02/2012 17:34:19

Verso para impresso: Criando aplicaes Windows Forms auto-ajustveis ao tamanho da tela

Pgina 4

Figura 05.

Figura 06. Pronto pessoal, este um exemplo bem bsico, mas com o objetivo de mostrar qual o caminho que devemos seguir para criar aplicaes com layouts auto-ajustveis. Agora s brincar um pouco mais, e em pouco tempo vocs estaro dominando isso de uma maneira bem intuitiva. Gustavo Barros

por GUSTAVO BARROS

Gustavo Barros (gustavo.barros@swstech.com.br), estudou Eng. Qumica no IME e Computao Grfica no Impa, Scio/ Desenvolvedor da SWS. Programador Java desde 2004 e .Net desde que comeou a participar da Imagine Cup ( 2 lugar (Nacional) 2005 e 8 lugar (Nacional) 2006), possui bastante interesse nas solues Web e Mobiles. Procura sempre est acompanhando o que acontece nos dois mundos (Java e .Net) a fim de saber mais dos potenciais e limitaes de cada uma.

www.devmedia.com.br/articles/viewcomp.asp?comp=4926

http://www.devmedia.com.br/articles/viewcomp_forprint.asp?comp=4926

03/02/2012 17:34:19