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

Question

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?

Your image links seem to have broken. If you still have the original images, please reupload them to stack.imgur. Thanks. — Ilmari Karonen, Jul 27 '15 at 08:42
http://blogs.msdn.com/dwayneneed/archive/2007/10/05/blurry-bitmaps.aspx — ezolotko, Feb 27 '09 at 02:34
If none of the tips below work immediately, also try and change the size of your image to a factor of 4 in width and height. So instead of 179 X 44, try 176 X 44. — Martin Lottering, Aug 29 '17 at 20:44

Domokun · Accepted Answer · 2010-04-29T04:37:41.697

255

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. :)

edited Apr 29 '10 at 04:37

answered Apr 29 '10 at 02:30

Domokun

2,760
1
16
6

4

More information on this new property found here: http://blogs.msdn.com/text/archive/2009/08/27/layout-rounding.aspx – Domokun Apr 29 '10 at 06:27
7

UseLayoutRendering="True" is what I used - this is perfect for solving my blurry images. Thanks! – Matt DeKrey Dec 11 '10 at 23:27
28

**FINALLY!!** UseLayoutRounding should be set by default. Images show up just like the original and even text in some places (like ContextMenus, for me at least) shows up crisper than before. Thanks, Domokun! – grant Apr 04 '11 at 02:46
3

I guess those of us still stuck on .NET 3.5 have no options? – jpierson Jun 22 '12 at 21:21
1

WTF!? **AMAZING** UseLayoutRounding should be an opt-out Option. Thanks! – wischi Aug 28 '13 at 14:13
1

`UseLayoutRounding="True"` Fixed my problem after all else failed – Tzah Mama Jul 30 '14 at 06:11
1

UseLayoutRounding="True", actually fixes the blur issue, But some of the controls like ComboBox,Button (dynamically created ones) looks clipped in the UI.Can anyone help on this? – keerthee Feb 16 '16 at 10:47
2

I'm finding that this fixes my problem if I set the property Stretch to None on images, but in all other scenarios, even with HighQuality image rendering and aliasing turned off, image stretching still sucks in WPF. But, at least this has fixed the problem for non-stretched images (which shouldn't have been a problem in the first place) – Christian Findlay Jun 18 '18 at 01:51

score 79 · Answer 2 · edited Dec 29 '19 at 07:34

79

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" />

edited Dec 29 '19 at 07:34

Cœur

37,241
25
195
267

answered Feb 26 '09 at 21:33

Zack Peterson

56,055
78
209
280

1

Also if your image was the exact size as specified in the tag, then it wouldn't have to scale it and should render it crisply. – Beardo Feb 26 '09 at 21:42
1

I'm not sure this will have the desired effect at a different DPI – Dave Feb 27 '09 at 03:20
1

Beardo, both the source graphic and the are both 20 pixels by 20 pixels. As I understand it, the issue comes from WPF. It sort-of wants to disregard the pixel grid of the monitor, so it's logical grid usually won't perfectly line up with the physical grid. – Zack Peterson Mar 02 '09 at 15:22
On my machine, NearestNeighbor isn't a legal valid value for RenderOptions.BitmapScalingMode. Weird. – mackenir Apr 07 '09 at 13:14
10

@Zack Width="20" does not mean 20 pixels. It means 20/96 of an inch. If your OS is configured to run at 96 DPI then it is 20 pixels. Now how will your nearest neighbor look on a good monitor, 160 DPI for instance? And how will it look when you print at 300 DPI? You shouldn't optimize for your dev machine. – Frank Krueger Apr 29 '10 at 02:36
Frank, I'm pretty sure that's not right...ill need to go read i guess. – Brady Moritz May 28 '11 at 14:31
2

I also found that for pixel-sized images NearestNeighbor is much better than HighQuality, especially if you combine it with img.Width = imgSource.PixelWidth; img.Height = imgSource.PixelHeight. My client provided some images with different crazy DPI values and I couldn't ask the client to convert them all, so I had to use this hack. – JustAMartin Nov 28 '12 at 20:44
Your image link seems to have broken. If you still have the original image, please reupload it to stack.imgur, or just edit your answer to make it work without the image. Thanks. – Ilmari Karonen Jul 27 '15 at 09:49
+1 This should be the accepted answer! I had an image that was enlarged by one pixel in X direction by wpf and just setting `RenderOptions.BitmapScalingMode="NearestNeighbor"` worked fine! – Marv Nov 25 '16 at 10:09
(But it also needs your image to have the DPI of your Windows setting(default 96).. thanks WPF..) – Marv Nov 25 '16 at 10:22

DK. · Answer 3 · 2011-05-11T18:08:03.750

23

+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-place, but for 3rd-party 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.

edited May 11 '11 at 18:08

answered May 04 '10 at 14:24

DK.

3,173
24
33

1

AvalonDock is also giving me the same headaches ... and I'm still with .Net 3.5 – Ignacio Soler Garcia May 08 '13 at 06:59

score 10 · Answer 4 · edited Oct 16 '13 at 16:35

Using the UseLayoutRounding="True" on the root Window works in many cases but I encountered a problem when using the WPF Ribbon control. My application relies on Contextual Tabs that appear according to what the user is doing and when I set the UseLayoutRounding to True, the contextual tab would not show up and the RibbonButton's image neither. Also, the application freezes for many seconds and CPU fan starts to sing.

Using RenderOptions.BitmapScalingMode="NearestNeighbor" on my image corrected the image rendering issues (fuzzy and cropped image) and is fully compatible with the Ribbon Contextual Tabs usage.

UseLayoutRounding="True" worked for me. Thanks. http://mikecroteau.wordpress.com/2013/01/20/wpf-net-xaml-blurry-images/ — Mike Croteau, Jan 20 '13 at 01:07

score 6 · Answer 5 · answered May 28 '16 at 10:01

6

use UseLayoutRounding=True to the top most element in your application

answered May 28 '16 at 10:01

Varatharaj

688
6
12

score 6 · Answer 6 · answered Apr 06 '09 at 20:22

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

score 5 · Answer 7 · answered Apr 06 '09 at 20:31

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.

score 3 · Answer 8 · edited Sep 14 '13 at 16:44

I have found that no combination of the suggested workarounds would cure my seemingly random blurry image problem. I like many others cannot upgrade to .net 4 in order to use the UseLayoutRendering property.

What I have found to work:

Ensure your [original] image dimensions are multiples of 2. This seems to prevent some of the funky image scaling problems.
Sometimes I have also found that adjusting margins on images by a pixel or 2 can prevent the problem.

score 3 · Answer 9 · answered Jun 29 '10 at 20:39

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.

score 3 · Answer 10 · answered Feb 26 '09 at 19:26

3

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.

answered Feb 26 '09 at 19:26

Beep beep

18,873
12
63
78

score 1 · Answer 11 · answered Mar 17 '14 at 09:17

I've tried to use the RenderOptions.BitmapScalingMode=HighQuality, seems like is causes some problems in Windows 8.1, so what i did was to run them through the tool called PngOut.exe

http://advsys.net/ken/utils.htm

Which reduces the header of the png, and also reduces the size, but without changing the image quality.

And now all my images are perfect! :-)

score 1 · Answer 12 · answered Feb 26 '09 at 19:24

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.

answered Feb 26 '09 at 19:24

Gregory A Beamer

16,870
3
25
32

1

+1 to ward off unwarranted negative votes since I think you offered some reasonable suggestions and were only trying to help and most importantly there wasn't anything incorrect with your suggestions. – jpierson Jun 22 '12 at 21:26

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

12 Answers12

Linked

Related