#453 – The UseLayoutRounding Property Aligns Things to Pixel Boundaries

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).

 

#392 – Use SnapsToDevicePixels Property to Prevent Anti-Aliasing

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).