27 04 2016

Não sei se você lembra, mas, tinha uma época em que as resoluções dos monitores eram meio que “fixas“. Se você tinha um computador “mediano“, provavelmente a resolução dele era 800×600. Caso você tivesse um pouco mais de grana, o luxo era investir em uma placa de vídeo e monitor que suportasse 1024×780.

Hoje em dia isso não é mais a realidade. Com as placas de vídeo e monitores evoluindo rapidamente, em pouco tempo surge uma nova resolução, cada vez maior. 720p, 1080p e agora 4k. E isso sem falar nos problemas que o ajuste de DPI podem trazer para o nosso aplicativo!

Normalmente, os aplicativos WPF se comportam muito bem quando alteramos a resolução e DPI do Windows, uma vez que, por padrão, ele trabalha com contêineres de layout e unidades independentes de resolução (e não pixels). Porém, no Windows Forms não é muito difícil termos problema com alterações de resolução. Pensando nisso, resolvi escrever este artigo detalhando como podemos ajustar o formulário dependendo da resolução no Windows Forms.

Criando o projeto de exemplo

Para entendermos os problemas que uma alteração na resolução ou DPI podem trazer para aplicativos Windows Forms, vamos construir um novo projeto do tipo “Windows Forms Application“. Nesse projeto, altere o formulário para que ele fique parecido com a imagem abaixo:

Esse é o típico exemplo em que teremos problema se o usuário estiver trabalhando em uma resolução maior do que a que desenvolvemos o nosso sistema. Nesse caso, o usuário provavelmente tentará aumentar o tamanho do formulário (ou até mesmo maximizar a janela) e, como no Windows Forms os componentes têm tamanho fixo por padrão, eles continuarão com o seu tamanho original. Veja o efeito neste gif animado:

Esse problema pode ser facilmente corrigido utilizando a propriedade “Anchor” dos controles.

Propriedade Anchor

A propriedade “Anchor“, como o próprio nome diz, implementa um efeito de “âncora” nos controles do Windows Forms. Por padrão, quando adicionamos um controle dentro de um formulário, ele vem com a âncora configurada para “Top, Left” (topo, esquerda). Isso faz com que o controle fique “grudado” no formulário, só que tomando como base o canto superior esquerdo.

Para melhorar o comportamento dos controles do exemplo apresentado anteriormente, podemos alterar a propriedade “Anchor” de alguns controles. Vamos alterar essa propriedade para “Top,Left,Right” nos TextBoxes e Button indicados em vermelho e “Top,Bottom,Left,Right” no DataGridView azul:

Com essas alterações, confira o novo comportamento dos controles:

Como você pode perceber, a propriedade “Anchor” cola a extremidade do controle a uma borda específica do formulário e faz com que ele se redimensione automaticamente quando o formulário muda de tamanho.

Para que você entenda melhor o efeito de cada uma das opções de “Anchor“, vou demonstrar todas as possibilidades com gifs animados abaixo:

Sem Anchor (None):

Top:

Bottom:

Top,Bottom:

Left:

Right:

Left,Right:

Bottom,Left,Right:

Top,Left,Right:

Top,Bottom,Left,Right:

Propriedade Dock

Além da propriedade “Anchor“, temos também à nossa disposição no Windows Forms a propriedade “Dock“. Com ela, podemos “docar” controles em uma extremidade do formulário (ou do contêiner onde o controle está posicionado). Por exemplo, ao configurarmos o “Dock” do DataGridView para “Bottom“, ele se comportaria da seguinte maneira:

Note que, ao configurarmos qualquer tipo de “Dock” o “Anchor” será automaticamente alterado para “Top,Left“. Não é possível utilizarmos o “Anchor” em combinação com o “Dock“. Levando isso em consideração, notamos que o “Dock” é mais utilizado somente quando queremos que um controle ocupe todo o espaço do formulário (ou contêiner pai). Para isso, configuramos a propriedade “Dock” para “Fill“:

TableLayoutPanel

Você já notou que no primeiro exemplo de “Anchor” apresentado neste artigo, o ComboBox e TextBox da primeira linha não ficam com o mesmo tamanho ao aumentarmos o tamanho do formulário? O ComboBox que não está com o “Anchor” fica com um tamanho estático enquanto que o TextBox com “Anchor” tem o seu tamanho aumentado automaticamente. Como poderíamos fazer para que o tamanho do ComboBox e TextBox aumentasse simultaneamente? Para isso, precisamos de um TableLayoutPanel.

Se você está acostumado com o WPF, o TableLayoutPanel nada mais é que o Grid. Com ele, podemos definir linhas e colunas que terão tamanhos fixos, automáticos (que têm o tamanho do controle que está dentro da célula) ou percentuais.

Dessa forma, para que o ComboBox e o TextBox cresçam proporcionalmente, podemos adicionar um TableLayoutPanel com duas linhas e duas colunas. Esse controle se encontra dentro da categoria “Containers” na caixa de ferramentas:

Uma vez adicionado o TableLayoutPanel, arraste os Labels, ComboBox e TextBox para dentro do TableLayoutPanel:

Feito isso, vá para a tela de configuração das linhas e colunas do TableLayoutPanel:

Dentro da tela de configuração, escolha a opção “Rows” e configure ambas as linhas para tamanho “AutoSize“. Com essa configuração, as linhas terão automaticamente o tamanho do controle que está localizado dentro das células:

Agora, você se lembra que acabamos de estudar os efeitos da propriedade “Dock“? Lembra que eu falei sobre a configuração “Fill” do “Dock“? Pois bem, nesse caso, se configurarmos a propriedade “Dock” do ComboBox e TextBox para “Fill“, eles serão automaticamente redimensionados de acordo com o tamanho das colunas do TableLayoutPanel. E se, por fim, configurarmos o “Anchor” do TableLayoutPanel para “Top,Left,Right” teremos o seguinte resultado:

Percebeu que agora o ComboBox e TextBox estão aumentando e diminuindo proporcionalmente, de forma que cada um ocupe 50% da largura do formulário? Bem bacana, não é mesmo?

Ajuste de DPI

Até esse ponto, nós só falamos do ajuste automático dos controles quando alteramos o tamanho do formulário. Porém, como fica a situação em que o usuário tenha aumentado o DPI? Para quem não sabe, DPI é a porcentagem que os controles ocupam de acordo com a resolução da tela. Essa opção pode ser alterada nas configurações de resolução de tela, clicando no botão “Make text and other items larger or smaller“:

Quando a configuração está em 100%, não temos nenhum problema. Porém, quando o usuário altera essa configuração para outro valor, dependendo do manifesto da aplicação, ela pode acabar ficando toda desfigurada.

Por padrão, os projetos Windows Forms não são “DPI aware“. Ou seja, elas não implementam ajuste automático dos controles dependendo do DPI (como o WPF faz automaticamente). Dessa forma, se não alterarmos nenhuma configuração relacionada ao DPI e executarmos a nossa aplicação em um computador que está com um DPI diferente, as janelas serão automaticamente redimensionadas dependendo da configuração.

Porém, um detalhe importante é que o Windows fará esse redimensionamento como se ele estivesse “esticando” um bitmap. Ou seja, conseguiremos reparar uma certa perda de qualidade visual no aplicativo (mais especificamente, a aplicação parecerá um pouco “borrada“).

Uma outra opção que temos para solucionar o problema da alteração do DPI é configurarmos o nosso projeto Windows Forms como “DPI aware“. Podemos fazer isso adicionando um arquivo de manifesto no projeto incluindo a seguinte tag:

  <asmv3:application>
    <asmv3:windowsSettings xmlns="http://schemas.microsoft.com/SMI/2005/WindowsSettings">
      <dpiAware>true</dpiAware>
    </asmv3:windowsSettings>
  </asmv3:application>

Com isso, o nosso aplicativo não será mais redimensionado automaticamente, ou seja, ele ficará do mesmo tamanho em que ele foi desenvolvido. Isso pode causar o efeito do aplicativo ficar extremamente pequeno caso a resolução e o DPI estejam muito altos.

Por fim, é possível ainda lidarmos com a alteração de DPI manualmente, redimensionando os controles da maneira que quisermos. Isso pode ser feito através de um override no método “ScaleControl” dos formulários da aplicação. Eu não recomendo essa alternativa, uma vez que ela é muito complicada de ser implementada e difícil de ser mantida. Porém, caso você se interesse sobre esse tema, aqui vão algumas referências:

Per-Monitor DPI Aware in Windows Forms

How to control the font DPI in .NET WinForms app

WinForms Scaling at Large DPI Settings–Is It Even Possible?

Concluindo

Apesar do Windows Forms não implementar o ajuste automático dos controles dependendo da resolução e DPI (como no WPF), é possível fazermos esses tipos de ajustes para deixarmos os nossos formulários mais amigáveis com diferentes resoluções. Não é uma tarefa fácil, mas, também não é uma tarefa impossível.

Neste artigo você conferiu como utilizar as propriedades “Anchor” e “Dock” para ajustarmos os tamanhos dos controles automaticamente dependendo do tamanho do formulário. Além disso, vimos também como aumentar o tamanho de controles proporcionalmente através do TableLayoutPanel. Por fim, vimos uma breve explicação de como o Windows Forms lida com a alteração de DPI.

E você, já teve esse tipo de problema com as suas aplicações Windows Forms? Como é que você acabou resolvendo? Conte para a gente nos comentários se você utilizou “Anchor“, “Dock” ou outro tipo de solução.

Por fim, convido você a inscrever-se na minha newsletter. Ao fazer isso, você receberá um e-mail toda semana sobre o artigo publicado e ficará sabendo também em primeira mão sobre o artigo da próxima semana, além de receber dicas “bônus” que eu só compartilho por e-mail. Inscreva-se utilizando o formulário logo abaixo.

Até a próxima!

André Lima

Image by Pixabay used under Creative Commons
https://pixabay.com/en/monitor-monitor-wall-big-screen-1054600/

Trabalhando com o Report Viewer no WPF Como podemos exportar relatórios do Report Viewer?