The resolution independence in WPF(Windows Presentation Foundation) can sometimes be a little tricky to understand. When we say that WPF is resolution independent it doesn’t straightaway mean that WPF controls will be of the same size across all resolutions. Does this mean that all these talks about WPF being resolution independent are false ? Not actually.
To understand this concept we first need to dig into 2 important concepts that will build a strong foundation, using which, you can take your understanding of resolution independence in WPF to the next level.
- Monitor resolution ( example : 1024×768 , 1600×1200 etc )
- System DPI Setting ( We will come to this in a while )
Monitor resolution :
Consider a monitor with resolution 1366×768 which is 12″ wide and 9″ high. Now if we calculate the density of pixels per inch it comes down to :
Pixels per inch = (1366/12) = (768/9) = 85
This means that the density of the monitor is 85 physical pixels per inch.
Now consider a monitor with resolution 1600×1200 which is also 12″ wide and 9″ high. However, the pixel density in this monitor would be :
Pixels per inch = (1600/12) = (1200/9) = 133
Take an application that has a normal button which is 30 px wide, and has been designed using the earlier monitor. Now, when you move this application to the other monitor, the button would shrink because the 30 pixels that made up the button would be very close to each other. The pixels would be smaller as well. Hence the button would become smaller than intended and this would cause improper display.
Usually in such cases we tend to lower the resolution of the monitor. This would decrease the number of pixels per inch and the 30 pixels that make up the button would take more space, increasing the visual size of the button. However, this would cause blurry display which is often caused by lowering the resolution. When this happens, we can increase the system DPI setting to scale up the application’s UI.
Before we move on to understand how WPF handles such cases, it is important to understand how DPI ( Dots-Per-Inch ) work.
DPI ( Dots Per Inch ) :
When we use the word “inch” here, it is not actually the physical inch that you would measure using a scale, but a screen inch. This would mean that in 1 screen inch, the number of dots or pixels depend on this system setting. Usually in a windows system, the value is set to 96, but you could go ahead and increase it by applying percentage increment in the display settings pane.
When the DPI is increased to say 125 % it becomes 120. This means that the screen inch now has 120 pixels. However, since the resolution has not changed, the the screen inch would become larger by 25 %. When the screen inch becomes larger, the applications developed using DPI awareness support are able to scale up based on the percentage increase applied.
When these applications scale up, the controls and text increase in size relative to the increase in DPI value rendering a crisp and clear display.
Take the below example where we have two buttons of relatively same size coded into a Winform and WPF application each. You can see they are almost similar. I am using a screen resolution of 1680 X 1050. The button on top is the WPF one.
Let us increase the system DPI to 175 % and see how the buttons and text therein are handled in both versions. We can clearly see how WPF scales up compared to Winforms when the system DPI is increased. You can also notice the better clarity in the WPF button and text. The Winform counterpart looks rather blurry, especially the text on the button.
Credits :
If this subject fascinates you, go ahead and explore these links that helped shape this post.
The one from Microsoft is especially quite revealing.