#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 , , ,

#392 – Use SnapsToDevicePixels Property to Prevent Anti-Aliasing

September 22, 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 the inconsistent appearance of the vertical lines in the example below. Every line should be the same width, since they were defined to be 1 WPF unit wide (1 pixel at 96 dpi).

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

Setting SnapsToDevicePixels to true on the parent ListBox in the above example leads to vertical lines that are consistently sized (1 pixel wide on a 96 dpi display).

Filed under Layout Tagged with , , , ,