Tray icon looks fine but WPF Window icon looks horrible

Question

Is there any way to force a WPF Window to scale an icon down to a size with a better algorithm for the scaling or force it to use better resolutions for my icon?

I made an icon (ICO-format) file that hosts a 256x256, 32 bit, PNG image. I set my project's icon to this one in the project's properties. It looks fantastic in the Windows tray when I run the application.

The problem is when I set the icon to the Window in question. What happens is...it doesn't down-scale my image properly and I get this ugly image at the top left of my Window with some bad anti-aliasing on it. Its not smooth at all. What can I do?

Have you tried a smaller size or different format? In the project I'm currently working on, the .ico format is 32x32 8-bit BMP. It looks fine in both places, although granted it's a fairly simple graphic. — Andrew Stephens
Hmm...I can try that out but I'm worried that it won't alias properly at 32x32 since it has nice shapes like circles, etc. that require some fancy rasterization. — Alexandru
@AndrewStephens It looks like 64x64 looks much better for both tray and Window icons. I wish I could get GIMP to export multiple resolutions and then get WPF to choose which resolution to use where, but I don't think I have that luxury. I should note: I used a PNG image instead of the ICO format... — Alexandru

Troels Larsen Troels Larsen · Accepted Answer · 2014-07-04T20:30:29

You have one of two problems: WPF downscales icons poorly (jagged/skewed), or icons are rendered poorly (blurry)

To solve the first one, I would not rely on WPF to downscale icons. Use GIMP or Photoshop to create the icon in 16, 32, 64, 128 and 256 dimensions, and save them in separate folders:

Icons
  16
    MyIcon.png
    AnotherIcon.png
  32
    MyIcon.png
    AnotherIcon.png
etc.

Most icon libraries come in multiple sizes (IconExperience, Syncfuction, etc.). If you create a custom icon, you should downscale it yourself to have full control.

You can create custom controls that help you find the right icon. So you can define in one common place which size icon you want to use where:

<CustomIcon Name="MyIcon.png" Location="Ribbon"/>

Where Name is the filename, and Location is a selfdefined enum that allows you to predefine the sizes based on their location in the UI. The CustomIcon could inherit from Image, and internally set the Source based on these two properties.

If you think are experiencing the second issue, try setting UseLayoutRouding="True" on your MainWindow, aad experiment with RenderOptions.BitmapScalingMode (WPF4 and onwards).

Tray icon looks fine but WPF Window icon looks horrible

1 Answers