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