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

Viewed 61274

I'm using some Images in my WPF applcation.

XAML:

<Image Name="ImageOrderedList"
       Source="images/OrderedList.png"
       ToolTip="Ordered List"
       Margin="0,0,5,5"
       Width="20"
       Height="20"
       SnapsToDevicePixels="True"
       MouseUp="Image_MouseUp"
       MouseEnter="Image_MouseEnter"
       MouseLeave="Image_MouseLeave" />

But, they appear fuzzy.

Why doesn't that SnapsToDevicePixels="True" line prevent this problem?

12 Answers

Rather than using SnapsToDevicePixels, I instead used RenderOptions.BitmapScalingMode and they're now nice and crisp!

XAML:

<Image Name="ImageOrderedList"
       Source="images/OrderedList.png"
       ToolTip="Ordered List"
       Margin="0,0,5,5"
       Width="20"
       Height="20"
       RenderOptions.BitmapScalingMode="NearestNeighbor"
       MouseUp="Image_MouseUp"
       MouseEnter="Image_MouseEnter"
       MouseLeave="Image_MouseLeave" />

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

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.

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.

Related