PNG images are fuzzy

Question

I'm displaying several png files on a WPF window. These display okay, but the image is a bit fuzzy compared to the original image, so I must be doing something to distort it or render it incorrectly. I'm still digging into this but I wanted to throw this post out in case anyone has suggestions.

 

Here's what I'm doing:

Code Snippet

Image image = new Image();

image.Margin = new Thickness(5d, 0d, 0d, 0d);

image.HorizontalAlignment = HorizontalAlignment.Right;

image.Width = 16d;

image.Height = 16d;

image.Stretch = Stretch.None;

if (link.ImageURL != null && link.ImageURL != string.Empty)

{

BitmapImage bitmap = new BitmapImage();

bitmap.BeginInit();

bitmap.UriSource = new Uri(link.ImageURL, UriKind.Relative);

bitmap.EndInit();

image.Source = bitmap;

}

 

The image I'm trying to display is a 16x16 png. Any ideas on another way to render this? I tried the PngBitmapDecoder class with no luck, but I may have been missing something. I'm going to look into this further.

 

Any suggestions would be appreciated.

Answer 1

The effect is caused by the anti-aliasing that WPF does for every object.

As far as I know there is at this time no way to turn it off.

I read about some registry values that might improve the outcome

of the anti-aliasing, but I haven't tried these since they would only improve

the outcome not don't do anti-aliasing at all.

I had the same problem and my conclusion is that the only thing one can do

is to wait until the algorithm for anti-aliasing in WPF is improved.

 

Hope this helps.

Florian

 

Answer 2

Thanks for the info.

 

I thought I had found a solution, but it appears to be sporadic. The anti-aliasing problem may be coming into play.

 

My attempted solution was to remove the size settings on the image (where I set the width and height to 16). This seemed to clear up the images in my control library unit test project even though the image in question is 16x16, but I absolutely can't get the fix to come through to the real project. I have replaced the assemblies, tried messing around with bitmap cache settings, etc., nothing seems to work.

 

So now I'm not sure if I have found a solution and then run into a bitmap caching problem, or if this anti-aliasing issue is coming into play or what.

 

This is certainly a pain, especially being so close to a solution. Any additional info would be appreciated. Thanks.

 

Answer 3

I've written a blog post about this very issue.  Hopefully, you'll find it useful:

 

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

 

Answer 4

Thanks for the post. I may give this a shot but it seems quite involved. Is the issue that WPF just doesn't offer enough control in this area yet?

Also, I found that if I put the image in a TabItem of a TabControl, then it renders perfectly. Any idea why the TabItem has this effect? Unfortunately I cant use a tab item in this case, but I'm hoping this sheds light on a more straight-forward solution, or perhaps even another container with the same desired outcome.

Thanks

Answer 5

I implemented the solution and was able to get the bitmaps to render properly. Thanks.

Does anyone know if  WPF will expose the ability to control this in the future without having to manually do it ourselves?

Answer 6

I know it is 2 years later but if someone else finds this as I did, here is the simple solution.

It is easily fixed by using RenderOptions.BitmapScalingMode

<Image Source="/images/icons/_16/search_16.png" Width="16" Height="16" RenderOptions.BitmapScalingMode="NearestNeighbor" />

Answer 7

Thanks mate. Helped me very match.