Tweets by @Actipro
Please take some time to learn more about us and our product offerings.
In 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.
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.
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.
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.
PixelSnapper includes options for controlling how the separate horizontal and vertical measurements are rounded. Options for each include None, Floor, Ceiling, and Round.
August 17, 2008 at 08:36
give us an xaml sample. i can't find PixelSnapper in xaml. i have .net 3.5 SP1 installed.
August 17, 2008 at 15:20
Hi, we include a full source sample of its usage in our WPF Studio evaluation's Sample Browser, under the Shared Library tab. Also the WPF Studio documentation has help on how to use it.
Bill Henning (Actipro)
January 3, 2009 at 11:21
Will this also fix the infamous "fuzzy-text" rendering problem? By placing everything in a PixelSnapper, will everything just look right? A lot of developers I know are skipping WPF altogether because clients are complaining about fuzzy text, and Microsoft doesn't seem to be able to come-up with a solution...
January 4, 2009 at 01:06
Hi Jason,It may help a little with some anti-aliasing of text depending on the layout scenario but it's not controlling the rendering of the text at all so it probably won't have an effect on what you're speaking of.The PixelSnapper is meant to work with the WPF layout system to help ensure that controls with non-integer measurements do end up with integer-based measurements. This keeps any other controls that have lines (like borders) as wel as icons, etc. clear and crisp.Also the documentation and samples describe in more detail how to use it, but you basically wrap each control (like TextBlocks) that affect layout with a PixelSnapper. It has made a huge clarity difference for images and borders, etc. in the applications we've made where we use it.