How resolution independence work in WPF?

Question

This is more out of curiosity. I was studying that WPF applications are resolution independent. Does this means that we need not bother about the monitor resolution size? because being a windows application developer I have faced several challenges making the application compatible to different resolutions.

My question here is how WPF manages the resolution independent property? Do we need to provide ratios in which controls would appear? And how would the quality of the image will be effected if used as background (will it distort in high resolutions or maintain its clarity)?

Please help. This can be a deciding factor for a project.

Solution 1

As far as I know, WPF uses vector graphics for Buttons isntead of Bitmaps like the older WinForms. Due to this, resizizing and adapting to different screen resolutions is easy for WPF. I have no direct experience with Background images etc. but if they are pixel-based I would provide them in a higher resolution than needed in 96 DPI, maybe twice as high? That should guarantee, that they are not looking poor in higher resolutions.

As a practical note: WPF applications are always readable and are looking good on all monitors I have tried so far. But if you use far smaller resolutions to display a program which was developed for bigger resolutions you can run into problems with fixed objects. E.g. defining text boxes to a certain minimal size, which than eats too much of the available screen. So it seems best for me to define as few constraints as possible and test the applications on other monitors before you ship the product simply because it will always be readable but you might find a few problems with usabillity.

Solution 2

The key thing about WPF and resolution independance is that it uses device independent units and uses this to work correctly with the system dpi setting ( 'Large Fonts' etc); so for example if you are working on a system set to the default 96 dpi, and draw a textbox 96 units wide, WPF knows that this is one logical inch. If you then change the resolution to 144 dpi, WPF will draw the textbox using 144 physical pixels. All the GUI elements scale flawlessly like this. If you try the same thing with a Winforms GUI you will see that it does not scale properly - you end up with big fonts in small textboxes etc

ETA Another way to put this is to clarify what you mean by resolution - I guess 1024 x 768 is really 'screen size in pixels' and the 96dpi is more accurately the actual resolution, and it's changes to this that WPF handles correctly whilst other platforms don't; both Winforms etc and WPF will display correctly if you simply change from 800 x 600 to 1024 x 768.

Solution 3

WPF is vector based and contains a lot of powerful layout features to ensure scaling works nicely on any device (the simple but powerful Grid control is one of my faves here). It basically uses a measurement and arrangement system that ensures that child controls know how much space they have to work with and therefore can size themselves accordingly

Having said that, it is up to the UI designer to ensure that the application layout is scalable, since it is still very possible to create hard-coded fixed, non-fluid layouts by setting explicit sizes etc

If this does happen, it's possible to scale the entire UI (by using a transforms and other methods) which would have the effect of a zoom in/zoom out depending on if the app is targeting a larger or smaller resolution. This has the disadvantage of making any non-vector content such as bitmaps look blocky or distorted if they are not designed for this scaling

In conclusion, WPF doesn't manage any resolution independence directly so to speak, but by using a few simple layout concepts it's possible to make a resolution independent UI without resorting to scaling (similar to using anchoring in WinForms...but much better)

A small example:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="100">
        <ColumnDefinition Width="auto">
        <ColumnDefinition Width="*">
        <ColumnDefinition Width="2*">
    </Grid.ColumnDefinitions>
</Grid> 

This would create a two column grid layout in which the first column is a fixed width at 100 units, the second column takes up only enough space to fit its child controls and the fourth column takes up proportionately two times the space of the third column. These columns would stretch to completely fill their parent container, be that a small area of the screen or a full window.

This works by measuring how much available space there is to play with, making the 1st column a fixed 100 units, making the second column the size of the child controls that are in it and then working out what space is remaining and dividing it amongst the other columns based on their ratios. (the number before the asterisk * is the proportion of space each dynamically sized column should take. * on it's own is equivalent to 1*)

This with the standard Margin and alignment properties allows for almost any layout imaginable...and this is just a single control!

Edit:

I'd probably add that whilst most people don't use silly resolutions it is surprising how many people are still running 1024x768 or running widescreen mid resolution monitors that have a vertical resolution of less than 800 pixels, so the only way to be sure is to test!

Solution 4

Question 1: My question here is how WPF manages the resolution independent property?

from MSDN:
Resolution-independent and device-independent graphics. The basic unit of measurement in the WPF graphics system is the device independent pixel, which is 1/96th of an inch, regardless of actual screen resolution, and provides the foundation for resolution-independent and device-independent rendering. Each device-independent pixel automatically scales to match the dots-per-inch (dpi) setting of the system it renders on.

Question 2: how would the quality of the image will be effected if used as background (will it distort in high resolutions or maintain its clarity)?

I guess this would mostly depend on the quality of the given picture. a high quality image wont loose of it clarity while being scaled.

I would recommend reading the following articles:

Introduction to WPF you will learn that there is more to wpf than resolution in dependency (DataBinding, layouts, styles, templates, 2D, 3D, animation....)

Imaging Overview WPF Graphics Rendering Overview

View more solutions

Comments

[Christian Sauer]

Yes, weird resolutions are still surprisingly common. I have a small laptop which usable vertical resolution is like 700 pixels or so - very annoying. Also, many older people I know of simply reduce the resolution to accomodate for their poor eyesight.

[Yury Schkatula]

In WPF, you're free to use both raster bitmap images and vector ones. Indeed, it's wise to prefer vector-only images but sometimes you have to pick raster, something like complex animations etc.