WPF Blurry Images

Question

I'm looking for a way to prevent WPF to blur my images. I want my application to look good on high-DPI displays so I created Icons in 96x96px to display in size 32x32.

There's a lot of in google to find and even on stackoverflow there are some topics about this. Summarized they say: Enable the property UseLayoutRounding and set RenderOptions.BitmapScalingMode to HighQuality. Unfortunately this doesn't really work for me - the images still look very blurry. Then I tested my application on a laptop with higher DPI aaaand - WOW. Images are totally sharp and nice.

My only solution was to create a custom control which converts the ImageSource to System.Drawing.Bitmap, rescales it there to match the image-dimensions and convert it back to a WPF ImageSource. Obviously not the perfect solution!

Example on low-DPI display (96dpi) Example on high-DPI display (~122dpi)

So the question is: Why look my images blurry on the low-dpi-display? I have no idea what may cause this and hope somone has an idea to fix this.

Here some of the most useful resources I found:

EDIT:

As requested here is the code for converting the ImageSource. There are a couple of method-calls which are not included, but you can find them really fast via google.

// Calculate the conversion factor.
float dpi = WpfImageHelper.GetCurrentDPI(this);
float factor = dpi / 96f;
int width = (int)Math.Round(this.image.ActualWidth * factor);
int height = (int)Math.Round(this.image.ActualHeight * factor);

// Create bitmaps.
Bitmap oldBitmap = WpfImageHelper.ToWinFormsBitmap2((BitmapSource)this.Source);
Bitmap newBitmap = new Bitmap(width, height, System.Drawing.Imaging.PixelFormat.Format32bppArgb);

// Draw the new bitmap. Use high-quality interpolation mode.
using (Graphics g = Graphics.FromImage(newBitmap))
{
    g.InterpolationMode = InterpolationMode.HighQualityBicubic;

    g.Clear(System.Drawing.Color.Transparent);
    g.DrawImage(oldBitmap, 0, 0, newBitmap.Width, newBitmap.Height);
}

// Set the image source to the resized bitmap.
this.Source = WpfImageHelper.ToWpfBitmap2(newBitmap);

That is a good effort on a question! I have had similar problems yourself. Mine were specifically related to Windows 8. — Patrick Hofman, Apr 28 '14 at 07:13
Thanks for the hint. I tried it on a win7-PC and got the same result like on win8. — freakinpenguin, Apr 28 '14 at 07:18
Yes I had this in mind but didn't want to put the effort in it. If there is no way to display the images nicely, well I think I will hit my head on the table ;) — freakinpenguin, Apr 28 '14 at 07:29
@freakinpenguin: Maybe I am asking too much, but it might be useful to others to have your conversion code. If no other solution comes up, maybe you want to post your solution as answer? — Patrick Hofman, Apr 28 '14 at 07:31
@PatrickHofman: That shouldn't be a problem. But I don't want it to post as answer, as it's a bad solution. — freakinpenguin, Apr 28 '14 at 10:22
@freakinpenguin: but if it is the only solution... But got your point. — Patrick Hofman, Apr 28 '14 at 10:23

score 3 · Answer 1 · edited May 23 '17 at 12:24

3

Your icons are bitmaps so you are not going to solve this problem IMHO. You need to look at for a different solution. You want your icons to be device independent so you need to either convert for images to vectors or convert your images to xaml. This question have been asked and answered before and the solution does not involve much effort.

create-vector-from-image

convert-svg-to-xaml

edited May 23 '17 at 12:24

Community

1
1

answered Apr 28 '14 at 10:23

RussellEast

153
8

Sorry Russell, but I don't think that I must have vector icons. As you can see in the pictures in my post the images can look nice & sharp! – freakinpenguin Apr 28 '14 at 10:28
They do look nice when that are rendered at the resolution that were designed for. Try converting one image to a vector and see how it goes. Hopefully it works for you. – RussellEast Apr 28 '14 at 10:33
They look also sharp in lower resolutions than they were designed for (which is my case). I know vector graphics will work, but I don't want to convert all images to vector-graphics (>200 images). There MUST be a way to display images just like in WindowsForms. – freakinpenguin Apr 28 '14 at 10:40
1

Not the ideal solution, but have to tried to use a scale transform in xaml? – RussellEast Apr 28 '14 at 10:47
So I tried setting the size of the image to the size of the bitmap (96x96) and applied an scale-transform with 1/3. Unfortunately the result looks like the linear-scaling-mode in the image in my post :( But it was worth a try! – freakinpenguin Apr 28 '14 at 11:42

score 0 · Answer 2 · edited May 23 '17 at 12:24

0

According to this post (from the esteemed creator of VirtualDub), WPF's high-quality "fant" method isn't really that great. Your custom control uses the superior bicubic method.

The subject of resampling goes pretty deep; see the links in Old Pro's answer to a question on downscaling quality, especially this one.

edited May 23 '17 at 12:24

Community

1
1

answered Jul 16 '15 at 03:50

Mark

374
4
9

Thanks for sharing the link! Seems like this is exactly my problem. Unfortunately there's not much I can do than waiting for Microsoft to fix the behaviour. – freakinpenguin Jul 17 '15 at 13:27

WPF Blurry Images

2 Answers2