My images are blurry! Why isn't WPF's SnapsToDevicePixels working?

Answer 1

My first thought, reading the question, was you were blowing up the image too much, but that does not appear to be the case looking at the image you have of the app.

Second thought is color palette, but with black as one of the colors that is not rendering correctly, this is not as likely.

If you can fully rule out the two above, I am currently stumped.

As an experiment, you can try other graphics formats, but PNG should be fine. I will have to think it through some more to come up with a better answer.

Answer 2

I believe this is a bug (or at least it was). Check out this Microsoft support e-mail exchange page for some ideas to fix it.

Answer 3

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

Answer 4

RenderOptions.BitmapScalingMode="NearestNeighbor" works well most of the time. However, occasionally you'll get graphical glitches (in my case, 4 out of 5 images showed up fine, but the fifth had a slight distortion on the right edge). I fixed it my increasing the Image control's right margin by 1.

If that still doesn't fix it, try the Bitmap class control above that EugeneZ mentions. It's a replacement for the Image control and so far it's worked pretty well for me. See http://blogs.msdn.com/dwayneneed/archive/2007/10/05/blurry-bitmaps.aspx

Answer 5

Make sure you save the image in the same DPI as your WPF application is working in, some image formats have this info stored as metadata. I don't know if this solves the problem but I've hade some problems because of this where images resized to 100% got bigger or smaller than expected.

Might be something similar.

Answer 6

You may want to consider trying a new property available now in WPF4. Leave the RenderOptions.BitmapScalingMode to HighQuality or just don't declare it.

NearestNeighbor worked for me except it led to jaggy bitmaps when zooming in on the application. It also didn't seem to fix any glitches where icons were sizing in weird ways.

On your root element (i.e. your main window) add this property: UseLayoutRounding="True".

A property previously only available in Silverlight has now fixed all Bitmap sizing woes. :)

Answer 7

+1 for Zack Peterson

I'm using .Net 3.5 sp1 and it looks like the most simple solution for a large number of fuzzy images. It's not a big deal to specify RenderOptions in your own code, but for 3rd-party code or components a style in app-level resource makes sense:

  <Style TargetType="{x:Type Image}">
    <Setter
        Property="RenderOptions.BitmapScalingMode"
        Value="NearestNeighbor" />
 </Style>

Worked nicely when AvalonDock started to render blurry icons.

Answer 8

I have found that the RenderOptions.BitmapScalingMode="NearestNeighbor" does not work for me. I'm using Windows XP x32 with DirectX 9.0c. As the actual rendering for WPF is done with DirectX, this could have an effect. I do have anti-aliasing turned on for XP with the following registry entries:

[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Avalon.Graphics] "MaxMultisampleType"=dword:00000004 "EnableDebugControl"=dword:00000001

However, turning aa off with these settings has no effect on the images. I think this only effects 3D Viewports.

Finally, I found that the blurring occurs with the text of TextBlocks as well as images. And the blurring only happens for some text blocks and images, not all of them.