I have been working on a .NET application for our company. I'm having a weird issue with the MaterialSkin TabSelector where properly sized icon images are being drawn low quality. From all the resources I found, and people posing similar questions, it looks as though its key that the images are the same size as listed in the ImageList. I do have everything correctly setup with image sizes, however its still drawn incorrectly.

Here is what they currently look like: fuzzy icons in tab selector

And the current setup of the ImageList and the settings associated: properties menu, image collection properties

I took a look in the source code of the updated MaterialSkin.2 package, and here is the relevant section.

 if (_tabLabel != TabLabelStyle.Text)
 {
     // Icons
     if (_baseTabControl.ImageList != null && (!String.IsNullOrEmpty(tabPage.ImageKey) | tabPage.ImageIndex > -1))
     {
         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);
         if (_tabLabel == TabLabelStyle.IconAndText)
         {
             iconRect.Y = 12;
         }
         // Begin TabSelector modifications, Store previous settings to restore after drawing.
         var oldSmoothingMode = g.SmoothingMode;
         var oldCompositingMode = g.CompositingQuality;
         var oldPixelOffsetMode = g.PixelOffsetMode;
         var oldInterpolationMode = g.InterpolationMode;

         try
         {
             // Modified graphic draw modes here
             g.SmoothingMode = SmoothingMode.HighQuality;
             g.CompositingQuality = CompositingQuality.HighQuality;
             g.PixelOffsetMode = PixelOffsetMode.HighQuality;
             g.InterpolationMode = InterpolationMode.HighQualityBicubic;

             // Draw the image in the iconRect
             g.DrawImage(
                 !String.IsNullOrEmpty(tabPage.ImageKey)
                     ? _baseTabControl.ImageList.Images[tabPage.ImageKey]
                     : _baseTabControl.ImageList.Images[tabPage.ImageIndex],
                 iconRect
             );
         }
         finally
         {
             // End modifications, Restore original modes after drawing
             g.SmoothingMode = oldSmoothingMode;
             g.CompositingQuality = oldCompositingMode;
             g.PixelOffsetMode = oldPixelOffsetMode;
             g.InterpolationMode = oldInterpolationMode;
         }
     }
 }

I attempted to force the TabSelector control to draw the image at a higher quality. With the same results.

Am I missing something? Any help would be greatly appreciated!

I modified the MaterialSkin.2 TabSelector graphics properties in an attempt to increase the image quality.

I have been working on a .NET application for our company. I'm having a weird issue with the MaterialSkin TabSelector where properly sized icon images are being drawn low quality. From all the resources I found, and people posing similar questions, it looks as though its key that the images are the same size as listed in the ImageList. I do have everything correctly setup with image sizes, however its still drawn incorrectly.

Here is what they currently look like: fuzzy icons in tab selector

And the current setup of the ImageList and the settings associated: properties menu, image collection properties

I took a look in the source code of the updated MaterialSkin.2 package, and here is the relevant section.

 if (_tabLabel != TabLabelStyle.Text)
 {
     // Icons
     if (_baseTabControl.ImageList != null && (!String.IsNullOrEmpty(tabPage.ImageKey) | tabPage.ImageIndex > -1))
     {
         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);
         if (_tabLabel == TabLabelStyle.IconAndText)
         {
             iconRect.Y = 12;
         }
         // Begin TabSelector modifications, Store previous settings to restore after drawing.
         var oldSmoothingMode = g.SmoothingMode;
         var oldCompositingMode = g.CompositingQuality;
         var oldPixelOffsetMode = g.PixelOffsetMode;
         var oldInterpolationMode = g.InterpolationMode;

         try
         {
             // Modified graphic draw modes here
             g.SmoothingMode = SmoothingMode.HighQuality;
             g.CompositingQuality = CompositingQuality.HighQuality;
             g.PixelOffsetMode = PixelOffsetMode.HighQuality;
             g.InterpolationMode = InterpolationMode.HighQualityBicubic;

             // Draw the image in the iconRect
             g.DrawImage(
                 !String.IsNullOrEmpty(tabPage.ImageKey)
                     ? _baseTabControl.ImageList.Images[tabPage.ImageKey]
                     : _baseTabControl.ImageList.Images[tabPage.ImageIndex],
                 iconRect
             );
         }
         finally
         {
             // End modifications, Restore original modes after drawing
             g.SmoothingMode = oldSmoothingMode;
             g.CompositingQuality = oldCompositingMode;
             g.PixelOffsetMode = oldPixelOffsetMode;
             g.InterpolationMode = oldInterpolationMode;
         }
     }
 }

I attempted to force the TabSelector control to draw the image at a higher quality. With the same results.

Am I missing something? Any help would be greatly appreciated!

I modified the MaterialSkin.2 TabSelector graphics properties in an attempt to increase the image quality.

• c#
• .net
• winforms
• user-interface

1 Answer 1

WinForm applications on certain controls does not like PNG format images. When importing images to your image list, use a image format other than PNG. ICO files retain transparency and do not have any compression/draw issues.