Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

When should I use SnapsToDevicePixels in WPF 4.0?

Can anyone suggest a guideline on when to use SnapsToDevicePixels in WPF 4.0?

Should it only be used occasionally if there is an issue, liberally throughout an App, only on certain controls or what?

like image 816
Mike B Avatar asked Mar 08 '10 06:03

Mike B


People also ask

What is SnapsToDevicePixels WPF?

The UIElement class has a SnapsToDevicePixels property that controls pixel snapping. When set to true for a top-level element, all child elements will be set to line up with pixel boundaries at render time, to avoid anti-aliasing.

What is UseLayoutRounding?

When you use the UseLayoutRounding property, objects are lined up with pixel boundaries during the Measure and Arrange passes of the layout process. When you use the SnapsToDevicePixels property, pixel snapping occurs when rendering elements.


2 Answers

Good answers by Spencer and Martin as to the when to align your pixels.

As to the how: I would also point out that one should in WPF 4.0 try using the property UseLayoutRounding instead of SnapsToDevicePixels.

UseLayoutRounding makes what you are doing compatible with Silverlight (SnapsToDevicePixels is not available in Silverlight) ... and Microsoft is also encouraging the use of UseLayoutRounding over SnapsToDevicePixels in its documentation.

What is the difference between the two? Well, one big difference is that UseLayoutRounding occurs during the layout phase while SnapsToDevicePixels occurs during the render phase. This makes me speculate that UseLayoutRounding is probably a more performant way to go (I haven't confirmed this, though).

All that being said, there will still be reasons to use SnapsToDevicePixels. In fact, the MSDN documentation points to one. I will add another: it is only with SnapsToDevicePixels that you can use guidelines for precise control.

Here are some resources on this matter (i.e. pixel snapping and clarity with images, text, and visuals):

  • The MSDN Documentation for the UIElement.SnapsToDevicePixels Property.
  • The MSDN Documentation for the FrameworkElement.UseLayoutRounding Property.
  • Here is the old, classic post by Dwayne Need on blurry images.
  • Sometimes BitmapScalingMode helps with image clarity.
  • A great blog post that shows you how to actually use SnapsToDevicePixels. It can be tricky.
  • A blog post by the WPF Text team about all the different improvements they added to WPF 4.0 in order to help text clarity.
  • Another blog post by the WPF Text team on layout rounding.

Heh. I know my answer was a little more than what you were asking for ... but this concept (i.e. resolution independence and the resulting problems it brings and how to get over them) can often be a point of frustration when working with WPF. At the very least, I wanted to point you to the new WPF 4.0 property, UseLayoutRounding.

UPDATE

I just have to add since I've seen this over and over ... sometimes SnapsToDevicePixels works when UseLayoutRounding doesn't. I wish I could put a finger on why this is the case, but definitely try UseLayoutRounding first and if that doesn't work, don't hesitate to try SnapsToDevicePixels.

That line is so sharp it can cut you!

like image 54
cplotts Avatar answered Oct 11 '22 16:10

cplotts


It should be used on controls or areas where the placement of the pixels has meaning. Controls relating to the canvas of a drawing application would be one example. Have you ever seen the map of a fragmented drive? This might be another example.

One exception I can think of is when you're using divider lines of some kind. Most people expect border lines to be solid. If this setting is off they can look blurred and distracting.

Basically if blurred edges = bad then turn it on

like image 41
Spencer Ruport Avatar answered Oct 11 '22 16:10

Spencer Ruport