Thursday, 15 May 2008 05:26 by
Bill HenningIn our latest maintenance release of WPF Studio's Shared Library v3.5.0427, we have added a simple decorator class called PixelSnapper.
The PixelSnapper decorator basically snaps the measurement of its child content to integer values, thereby helping to prevent blurry images and borders that may appear after it.
The Issue: Blurry Images and Lines in WPF
A problem in WPF is that images and borders can become very blurry when they are positioned on non-pixel boundaries. This makes the application appear to be poorly designed to end users even though technically, the developer did nothing wrong.
How does this scenario occur? Very easily in fact. Say you have a standard WPF Menu at the top of your Window. The text in the menu items may measure to 12.5 pixels high. Then lets assume that we have 2 pixels of padding. Now we have a Menu that is 16.5 pixels high and the problem has been introduced.
The control directly under the Menu will start at vertical location 16.5. If this control is an Image, all the pixels in the image will appear blurry in the vertical direction since each lies half on one pixel and half on the one below it. Even setting SnapsToDevicePixels to true does nothing to correct the issue.
A Visual Sample
In the screenshot below, we have a Border with a PixelSnapper surrounding it. In the left sample, the PixelSnapper has snapped its contents to integers, the default behavior. In the right sample, the PixelSnapper functionality has been disabled.
| 
A demonstration of the differences between using and not using PixelSnapper |
Note how the images, which are laid out after the Border, are blurry when not using PixelSnapper functionality due to the decimal size of the Border.
Effective Use of PixelSnapper
Where should you use PixelSnapper? Generally, text elements like TextBlock controls are the only ones that will measure to decimal values. So any time you have a text control in your UI and that control will affect the layout of other controls, we recommend you surround it with a PixelSnapper in your XAML. This will keep everything in your UI on pixel boundaries, enabling images and lines to remain crisp and clear.
Several Options
PixelSnapper includes options for controlling how the separate horizontal and vertical measurements are rounded. Options for each include None, Floor, Ceiling, and Round.