"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
READ THE FULL ARTICLE Read Disclaimer Notice