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.
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.
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.
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!
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
Related
I have created a WinForm desktop application.
I have installed it on 2 different client PCs.
On 1 PC the captions fit with their controls.
On the other the label does not resize properly.
I went to check the resolution on each Client PC expecting differences but on the resolution 1920x1080 it did not fit and on the resolution 1680x1050 it did fit.
To make things more weird on my development PC the resolution is 1920x1080 and yes the labels do fit.
AutoSize on Form and label is 'true'.
What am I missing?
On the other the label does not resize properly
No, it is the exact opposite. It did resize properly, leaving enough space for the text. Problem is, the text is too wide.
There is more than one problem going on here. Starting point is that the other machine is operating at a different DPI setting. Dots-per-inch, it determines how a font size of, say, 10 points is mapped to pixels on the screen. You have a nice monitor, a high resolution one at 1920 x 1080 pixels. To keep text readable, you wanted 10 points to take more pixels. So you increased the DPI setting. Very easy to do on later Windows versions, you probably moved to slider to 125%. Effective DPI is 120 dots per inch.
Your program however is running on an older machine, one that still has the legacy setting (100% = 96 dpi). This tends to cause accidents, you avoided the most common ones given that the form properly rescaled itself. It shrunk itself to match the lower DPI setting. The layout is still correct, the labels and textboxes have the correct size and location.
But you can see a mishap with the bitmap, it is now too big too fit the space. Not the most obnoxious side-effect here. Otherwise not that easy to fix, to see the entire bitmap it has to be shrunk as well and that causes it to get fuzzy and lose detail. The only perfectly clean fix is to have two bitmaps, each drawn to match the dpi of the target machine. Unfun and often skipped.
Moving to the problem you are complaining about, text rendering at different dpi setting can be a problem as well. At issue is that the height of text scales quite well, but the width does not. The technical term for that is that text rendering is not resolution independent. The chief issue is pixel-grid fitting, a technique used to make text more readable at low monitor resolutions. Aided by TrueType hinting, the shape of a letter is stretched so that stems of a character fall exactly on a monitor pixel. Which greatly improves readability, but of course the side effect is that text will be wider on such low resolution monitors.
But your text is off so much that another explanation is needed. The most likely mishap here is that you used a font that is not available on the old machine. The operating system now must fallback to a substitute font and it has a very different pitch from your original font. I can't see your code but I'd roughly guess at a mapping from Segoe to Microsoft Sans Serif.
There are no simple solutions to these kind of problems, it is just something you need to be aware of. A basic guideline is that it is almost never a problem to scale up, scaling down is a lot more troublesome. So running your dev machine at 96 dpi is in general a good idea, other than the inconvenience of course. Testing on older operating systems, or putting your foot down with a strongly stated prerequisite (like XP not supported), is required. Demanding a higher resolution than 96 dpi is however still unreasonable, lots of machines are still at that legacy setting. Not in the least because changing it causes so many programs to misbehave. 96 dpi has been the default setting for way too long, those days are however over and done with.
How can I make my Windows Store App look great on large resolutions? For example a Button - how can I change its font size based on the resolution? If I view my app on 13" the button looks OK, but if I view it on 27" display it looks very, very small. Isn't something to be used in the Windows store apps framework to adapt a button, textBlock, etc to the screen resolution?
Set StretchDirection="Both" & StretchProperty="Fill" in ViewBox
This is a consequence of screen scaling based on DPI... which makes your button the same physical size on both monitors, but totally ignores the fact that the user sits/stands much closer to one than the other. Maybe someday we'll have a not-stupid scaling scheme that works based on subtended angles.
Large format monitors already have larger pixels, I suggest you simply opt out of display scaling in your application. (But do respect the global system font size settings)
I'm not sure what the opt-out setting is in XAML (WPF), but in WinForms, I'd be changing the AutoScaleMode property.
Is there any way or general size template created for windows 8 app using xaml so that we can create application of different screen size and DPI. As we are having in Android we put images and screen UI in different folders and application picks it up depending on different screen size and DPI? I am trying to design a general template for this but just asking if MS has already created something like this?
Besides the default templates that come with VS2012 I am not aware of any other templates. Working with the diff. requirements aren't that much of a hassle if you know how to get started. Here is some information that you might have already seen, but I'll add it here for those reading you questions looking for some information :)
There are different recommendations for scaling to screen size and resolution.
In regards to pixel density and images :
Guidelines for scaling to pixel density (Windows Store apps)
Basically you create folders like so:
Option #1 - File naming convention:
...\test.scale-100.jpg
\test.scale-140.jpg
\test.scale-180.jpg
Option #2 - Folder naming convention:
...\scale-100\test.jpg
\scale-140\test.jpg
\scale-180\test.jpg
in XAML
<Image Grid.Row="0" Grid.Column="1" x:Name="testImage" Source="test.jpg" Margin="2,2,2,2"/>
The resource loading is smart and will fetch the right image from the right folder
As for scaling to screens
Guidelines for scaling to screens (Windows Store apps)
You could:
a) Have a fixed layout that scales to fit the screen
Create a Viewbox control and add your controls to it, set the size to the minimum size you want to support.
Don't add appbars or other stuff that is by default adaptive!
Define letterboxing style and color, and don't forget to add different res. images as I showed above.OR use vector graphics or XAML.
b) Adaptive layout ,- check out the default templates that come with VS2012, they use adaptive layout.
c) I'm sure there are other options/variations
I have a form that I have sized to what I wanted, it has a few panels, some buttons and some labels on it but when I open it on a different computer, it is resized and it is larger. I am using visual studio 2008. I know this is very little detail but I thought maybe someone knows of a known issue or some troubleshooting steps that I can take.
Possible reasons for this are different screen resolution and different DPI.
Several possible reasons. First and foremost is the form's AutoScaleMode property. The default, Font, ensures that both the font and the controls get resized to leave enough room for any displayed text. Text size is measured in points, 1/72 of an inch. If you run your program on a machine with a larger dots-per-inch setting for the video adapter, the fonts grow accordingly and need more pixels. That needs the controls to be bigger as well to prevent clipping the text.
Another reason is user preferences for border width (Aero) and caption bar height. A form is sized based on its designed ClientSize, the actual Size at runtime will be determined by adding those preferences to the design size. That's very rarely a problem.
May be the computers have different screen resolution and that's why it appears small in one and large on the other computer
Diffeent resolutions, different browsers, different versions. If you want o keep this from happening, you must specify their width and height.
I'm looking to make a relatively simple game using solely graphics primitives (Arcs, Lines, Polygons, etc.).
I started doing this in C# by drawing to a Panel, but right now I'm hung up on how all the scaling works in terms of keeping the proportions the same when changing resolutions. Does anyone have any advice and / or tips on how to do something like this?
There are two options:
1 - Scale everything so that it is sized at a certain percentage of the screen/window. For example, if you want your object to be 1/4 of the screen, then it's width is ScreenWidth/4 and height is ScreenHeight/4. The problem with this technique is that a screen's aspect ratio may make things short and fat or tall and wide. Usually this is addressed by determining one dimension and then using the screen's aspect ratio to determine the other dimension. Ie, Width=Height*AspectRatio.
2 - Make everything the same physical dimension. For example, you may want an object to appear exactly 1" by 1". You can use the screen's resolution (dots per inch) to scale your drawings accordingly. The problem with this is that while it may work well for 'average' sized screens, images may be too small on large screens or too large on small screens.
Most games use technique #1 (with compensation made for the aspect ratio). AR was not always a big deal, but now with widescreen monitors being so popular, it's almost required.
Also, like Richard said, WinForms is not great for games (except minesweeper!), but probably okay for teaching yourself.
Not really a helpful answer but, don't use WinForms!!
If you want a good gaming platform, use DirectX, or XNA Game Studio.
You can do this using GDI+, and transforms. For details on using Matrix to do transforms, see this article on CodeProject.
That being said, this is much, much simpler using WPF's drawing options. In addition to being a retained mode model, which is much simpler when doing simple graphics (ie: move an object instead of constantly redrawing), it has some other nice benefits. The main benefit is that everything in WPF is done using floating point values, and is completely scalable, with no extra real effort. For details on this, see Shapes and Basic Drawing with WPF, which includes both drawing and transforming of shapes.