Why Are MaterialSkin TabSelector Icons Rendered Fuzzily in C# WinForms?

It turns out that even when you set everything “correctly” on the ImageList and in your drawing code, the ImageList itself can be the culprit. This is because the Windows Forms ImageList will automatically rescale images if they’re added before you set the desired ImageSize. In many cases, the images are reduced in quality because they’re preprocessed or “snapped” to a lower resolution.

Here are a few suggestions to ensure your icons are rendered using the original quality:

1. Set ImageList.ImageSize First:
   Before adding any images to the ImageList, set its ImageSize property to match the resolution of your source icons. If you add images first and then change ImageSize, the images will already be stored at the default size (commonly 16×16). For example:

   CSHARPCopied
   // Configure the image list before loading images
   myImageList.ImageSize = new Size(48, 48); // make sure this is what you need
   myImageList.ColorDepth = ColorDepth.Depth32Bit; // ensure full color
   // Then add your images.
   myImageList.Images.Add("iconKey", yourIconImage);

2. Double-check Your Icon Resolution:
   Make sure the original icon images you’re using are at the same pixel dimensions as the ImageList’s ImageSize. If the source image is larger or smaller, a resampling will occur and can lead to a lower quality result—even though your drawing code is using high-quality interpolation settings.

3. Bypass the ImageList (if necessary):
   If you continue to have issues with the ImageList downscaling your images, consider keeping a separate collection of original images (for example, in a Dictionary) and draw those directly in your custom TabSelector control. This way you have full control over the image resolution and rendering quality:

   CSHARPCopied
   // Suppose you have a dictionary of images
   Image myIcon = myIconDictionary[tabPage.ImageKey];
   Rectangle iconRect = new Rectangle(
       _tabRects[currentTabIndex].X + (_tabRects[currentTabIndex].Width / 2) - (ICON_SIZE / 2),
       _tabRects[currentTabIndex].Y + (_tabRects[currentTabIndex].Height / 2) - (ICON_SIZE / 2),
       ICON_SIZE, ICON_SIZE);
   
   // Use high-quality rendering settings as you already do
   var oldInterpolationMode = g.InterpolationMode;
   g.InterpolationMode = InterpolationMode.HighQualityBicubic;
   g.DrawImage(myIcon, iconRect);
   g.InterpolationMode = oldInterpolationMode;

4. DPI Awareness:
   Make sure your application is DPI-aware. If your icons were designed for a specific DPI, a mismatch with the system DPI can lead to unexpected scaling behavior.

By following these steps—especially making sure you set ImageSize on your ImageList before adding images—you should be able to improve the drawn image quality in your MaterialSkin TabSelector.