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

About Sean
Software developer in the Twin Cities area, passionate about .NET technologies. Equally passionate about my own personal projects related to family history and preservation of family stories and photos.

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

  1. Pingback: Dew Drop – September 21, 2011 | Alvin Ashcraft's Morning Dew

  2. Pingback: #392 – Use SnapsToDevicePixels Property to Prevent Anti-Aliasing « 2,000 Things You Should Know About WPF

  3. Pingback: #453 – The UseLayoutRounding Property Aligns Things to Pixel Boundaries « 2,000 Things You Should Know About WPF

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: