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

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.