#454 – UseLayoutRounding vs. SnapsToDevicePixels

December 20, 2011 Leave a comment

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.

In .NET 4.0, the FrameworkElement class got a UseLayoutRounding property that also prevents anti-aliasing by snapping things to device pixels.

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.

You should use UseLayoutRounding when possible, or use SnapsToDevicePixels on child elements when it’s not possible to use UseLayoutRounding.

Advertisement

Filed under Layout Tagged with , , ,

#453 – The UseLayoutRounding Property Aligns Things to Pixel Boundaries

December 19, 2011 1 Comment

Because WPF position GUI elements using device-independent units, small GUI elements can look fuzzy when rendered, due to anti-aliasing.

Notice that the edges of the Border elements are a little fuzzy in the example below.  Each element should have a width of 2 on this device, but the anti-aliasing leads to fuzzy edges.

The fuzzy edges are even more apparent if you zoom in.

You can prevent fuzziness due to anti-aliasing by setting the UseLayoutRounding property of a FrameworkElement to true.  Setting this property to true tells the layout system to line elements up with pixel boundaries, which prevents anti-aliasing.  This is known as pixel snapping.

Setting UseLayoutRounding to true on the parent Grid in the example above leads to consistently sized Border elements (2 pixels wide on a 96 dpi display).

 

Filed under Layout Tagged with , , , ,