Resolution Independent Layout Fix in WPF

It is very important to keep track of Operating System Resolution while building one application. We do lots of things to make the application work the same way in various ranges of Operating System Resolutions. For WPF developers, it is quite obvious to miss out the Anchor and Dock properties, which is present in Windows Applications but quite annoyingly absent here. The result of this is, when we change the Resolution of the Display, the UI of the application gets waked up abruptly.


"Oh god, how can I solve the same problem once again" --- This is what I thought after I built a brand new application altogether tested it in various Resolutions that is supported in my machine, and saw that it just didn't worked in a machine of one of my colleague. Well, even I thought of changing the machine resolution to something that suits my application and revert it when application closes ( Just like what DirectX games does).

The idea was good, but this would slow down performance, and also make other programs running in the windows unusable. I was very worried for the last couple of days, until today, I found a way of eliminating the problem using ViewBox.

While development of UI, I always liked to avoid ViewBox, as ViewBox generally changes the normal behavior of the UI elements. But strangely enough, I found that is the only way to make the UI look the same in all other Resolution possible.

<viewbox stretch="Fill">  <grid width="600"> Height="800">  </grid></viewbox>

Using ViewBox makes it Resolution Independent

If you see this minutely, the UI is same as we do normally, but I just wrapped around the existing UI with a ViewBox with Stretch property is set to Fill. Thats all, you need.

You can check the UI in different Resolution, and I bet, it will look the same way in all.

Points to Remember

You should remember to create the UI with the resolution for which the chances of getting it is the most. Say you think you will have more customers using 1024 x 768 than 1400X900, then it is recommended to set the height and width of the Grid inside the viewbox with this. Actually, ViewBox stretches the existing UI to fill up the space. This might sometimes create the UI look hazy. So more and more dispersed Resolution than the mean, will lead to more and more unclear User Interface. As the ViewBox will stretch the existing UI from the original content, so it is always good to choose a resolution which is very common to users.

Another point is while using ScrollViewer inside your grid, please ensure you specify the Height of it. In fact if ViewBox finds a ScrollViewer inside it without height specified, it will shrink the existing control directly without scroll bar being generated. This would look weird, so please take care of it.

Try out the Sample Application

Download Source


READ THE FULL ARTICLE