Search code examples
c#wpfwindowicons

Tray icon looks fine but WPF Window icon looks horrible


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?


Solution

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