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

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

#391 – Anti-Aliasing Can Lead to Fuzzy GUI Elements

September 21, 2011 3 Comments

You specify positions and sizes for GUI elements in WPF using device-independent units.  A unit is 1/96 of an inch, or 1 pixel on a 96 dpi display.  This allows the object to have a consistent physical size, regardless of the output resolution.

Because you’re not specifying things in terms of pixels, object edges don’t always line up exactly with pixels.  WPF uses anti-aliasing when rendering GUI elements.  For example, if an element only covers half of a pixel, that pixel is rendered at half intensity.

This can lead to fuzzy edges of GUI elements and looks especially bad for elements designed to be very small.

Below is an example of a ListBox containing items that include a couple of vertical lines (specified using a Border element).  The lines are all 1 display unit wide.  Some are 1 pixel wide, but many of them look fuzzy.

I’ll talk next time about how to fix this.

Filed under Layout Tagged with , ,