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

 

Advertisements