WPF 3.5 SP1 to fix blurry text and images

makerofthings — Wed, 07 May 2008 04:23:00 GMT

Although it is possible to display text, bitmaps, and other images in WPF you may soon realise that your display output is blurry and it is difficult for end users to use your application when a large amount of text is displayed.

The reason for this is pixelsnapping. Read more about this feature here: http://msdn.microsoft.com/en-us/library/aa970908.aspx . The problem with blurry images and text is actually a WPF Design issue. However, there is a solution coming out pretty soon; Microsoft is adding Nearest Neighbor image resampling in WPF 3.5 SP1 which will keep images from getting blurry; they will instead get pixellated. In the mean time you could just use really large images with the default (Fant) image scaling mode so that even when magnified you would never be mapping a single texel to multiple pixels. This is what Microsoft does in Blend in several cases (like the splash screen for example) to prevent blurring with high DPI settings – they use a single large 192 DPI image which is acceptable enough when scaling.

If you absolutely must use crisp bitmaps, there are a couple of things that you can try doing:

Always use bitmaps that are the same DPI as the device on which you’re displaying. Since you don’t know at compile time what DPI your device is, in practice this means creating at least 3 copies of every bitmap: one for 96 DPI (the most common today), one for 120 DPI (the up-and-coming standard), and one for 144 DPI (common on some laptops). Of course, this still doesn’t handle every case: users are free to set whatever DPI they like on their machine and bitmaps might still look blurry in accessibility scenarios as well. You also have the problem of determining what the device DPI is in the first place – something that may not be possible in certain scenarios (e.g. Partial Trust).
Ensure that the bitmap is placed an integral number of pixels from the top-left-hand corner of the device. This one is more difficult. If all your elements are fixed-layout (e.g. Canvases), you can precisely position your content relative to the window (and in V1 windows are always pixel-aligned). If you make use of any of the more complicated layout elements (Grids, DockPanels, FlowDocuments, or the like), though, you must walk up the visual tree to calculate your offset from the window origin, and you have to do this every time layout changes (for instance, every time the user scrolls through the document).

Until this patch gets shipped, you may be interested in a few of these related blog posts:

- http://blogs.msdn.com/seema/archive/2006/10/31/on-some-monitors-it-seems-that-thin-wpf-lines-are-blurred-across-two-pixels-instead-of-one-ick-how-do-i-get-sharply-rendered-lines.aspx

- http://blogs.msdn.com/dwayneneed/archive/2007/10/05/blurry-bitmaps.aspx

SRZ080415000312

Mankow's Development Blog

Links to Silverlight RC1 Software

WPF 3.5 SP1 to fix blurry text and images