Image Use

Types of images

Before creating artwork, consider making use of the 1,000+ images in the Visual Studio Image Library. For more information, see the How to: Install the Visual Studio Image Library topic in the MSDN Library.

Images used in the Visual Studio user interface are generally in one of several major categories:

• Icons. Those images used in commands, hierarchies, templates, and so on. Although Windows supports larger icons, those used in Visual Studio are generally no larger than 32x32, and may be in either .bmp or true .ico format.

• Dialog images. Images that appear in dialogs or wizards, either as descriptive graphics or message indicators. Used infrequently and only when necessary to illustrate a difficult concept or gain the user's attention (alert, warning).

• Animated images. Used in progress indicators, status bars, and operation dialogs.

• Cursors. Indicate to the user whether an operation is allowed using the mouse, where an object may be dropped, and so on.

• Illustrative (non-functional), decorative imagery. Most often branded material.

Implementing artwork

When receiving an artwork replacement work request, replace the old image on disk with the new image that is attached to the work request and rebuild. This will fix the problem in the majority of cases. It is important not to edit or convert the file type to another format. For example, editing the image in Microsoft Paint changes the color table and bitmap header. This will introduce unexpected bugs on limited palette displays and terminal servers.

Double-clicking the image in the work request and copying-and-pasting it into the old image is a common mistake. Make sure that you're saving the file locally and building with the original file.

Transparency

File types and transparencies

BMP

A bitmap is an uncompressed file format that can store a single raster (pixel) image from black and white (1-bit) to 24-bit color. The BMP format supports an alpha-channel transparency which converts the 24-bit image to a 32-bit image file.

GIF

A lossless compression file that can store single or multiple raster (pixel) images in 8-bit color. GIF files support transparency, compression, interlacing and multiple-image pictures (animated GIFs). GIFs do not support alpha-channel transparency and therefore do not support semitransparent pixels.

ICO

The ICO format can store multiple sizes and color depths as well as alpha-channel transparency. A single Visual Studio icon in ICO format typically stores multiple images of both 16x16 and 32x32 pixel sizes, with color depths ranging from 4-bit to 32-bit. Vista-style icons may require additional larger images to be saved within the file.

PNG

A lossless data compression file format that can store a single raster (pixel) image. PNG files support 24-bit RGB or gray scale color, alpha-channel transparency for 32-bit color, and gamma correction and interlacing.

XAML

XAML is a vector-based image file, an object-oriented graphic based on mathematical equations. As a vector file, XAML supports 2D and 3D object scaling, rotation, filing, and transparency. Two advantages of XAML are that it is a lossless format, and that image files can be mapped more directly into the UI.

Transparencies and production details

32-bit PNG (preferred format)

True color with alpha-channel transparency. This file type is recommended for all new UI.

24-bit BMP (VS command bar)

A true color RGB image format, 24-bit BMP is a current icon convention that creates a layer of transparency by using magenta (R=255, G=0, B=255) as a color key for a knock-out transparency layer. In a 24-bit BMP, all magenta surfaces are displayed using the background color.

24-bit GIF (Wizard artwork and gif animations)

A true color RGB image format that supports transparency. GIF files are often used in Wizard artwork and GIF animations.

24-bit PNG (legacy; not recommended)

A true color RGB image format, 24-bit PNG files are not transparent.

32-bit BMP (non-WPF controls)

Also called XP or high color, 32-bit BMP is an RGB/A image format, a true color image with an alpha-channel transparency. The alpha channel is a layer of transparency designated in Adobe Photoshop that is then saved within the bitmap as an additional (fourth) color channel. A black background is added during artwork production to all 32-bit BMP files to provide a quick visual cue about the color depth; this black background represents the area to be masked out in the UI.

32-bit .ico (project icons and add item)

Also called XP or high color, all ICO files are 32-bit true color with alpha-channel transparency (RGB/A). Because ICO files can store multiple sizes and color depths, Vista icons are often in an ICO format containing 16x16, 32x32, 48x48, and 256x256 image sizes. In order to display properly in Windows Explorer, ICO files must be saved-down to 24-bit and 8-bit color depths for each image size.

XAML (design surface and windows adorners)

XAML icons are vector-based image files that support scaling, rotating, filing, and transparency. They are not common in Visual Studio today but are becoming more popular because of their flexibility.

Geopolitical and trademarked art concerns

As Visual Studio is used across global markets, it is required that one consider cultural differences and remain sensitive to imagery that may be offensive to certain cultures. In addition, be aware of copyright and trademark issues if using another company's logo, image, or icon.

Copyright and trademark issues are a concern when icons have the logo, image, or icon from another company. Do not use icons from another product without first obtaining approval from your legal contact, even if the function relates to opening and editing another company's file type.

Debugging images

High-color artwork integrates seamlessly into Visual Studio most of the time. Problems tend to arise when integrating high-color artwork into legacy owner-drawn code. Historically, developers only had twenty colors to work with: base 16 and four shades of gray. Although that increased to 255 colors in Visual Studio 2002, most artwork was left at twenty colors.

Because of the twenty-color limitation, early developers were forced to get creative in their use of images and palettes. Even though high-color has been around for many years now, we still need to work to remove these historic hacks and assumptions.

Rainbow artwork

It's difficult to look at a high color image and determine exactly what the image's problem is. Rainbow artwork will help you narrow down the scope and focus your debugging. Note that you could have more than one of the problems listed below.

Download the rainbow image that's closest to the size of your image by right-clicking on the image and choosing Save Picture As.

8x8

16x16

32x32

64x64

Save the image locally and replace your image with the rainbow image. Do not open the rainbow image in Microsoft Paint because the bitmap's header could be altered. If you inadvertently change the bitmap header or the color table, this exercise won't work. If your image and the rainbow image aren't the same size don't worry about clipping. If possible, use a piece of rainbow artwork that is slightly smaller than your image.

Once you've swapped the artwork, rebuild itand see what happens. Compare your results to the images below.

Rainbow artwork variations

Correct behavior

In a perfect world, the image will look like this with a transparent border. If the rainbow artwork appears correctly but your image has problems, your image likely got corrupted. Please attach a screenshot of the rainbow artwork to a work request and assign it back to your design team. They will work with you to get a new image.

No transparency

If you see the pink border around the box and the entire green square then your code does not correctly select a transparency color. In the old days it was common for the transparency color to change based on the colors that were needed in the artwork.

There are two things you need to do:

1. Look around your code to see if you're setting the transparent color for the image. Look for calls to GetBKMode(hDC) on the device context or calls to TransparentBlt and the crTransparent color passed. Remove any dependencies that you find. Do not use custom transparency colors.

2. Draw your image transparent. For managed code:

using System.Drawing;
using System.Drawing.Imaging;

void panel2_Paint(object sender, PaintEventArgs e) 
{
  Graphics g = e.Graphics;
  using( Bitmap bmp = new Bitmap(@"INTL_NO.BMP") ) 
  {
    // Set the image attribute's color mappings
    ColorMap[] colorMap = new ColorMap[1];
    colorMap[0] = new ColorMap();
    colorMap[0].OldColor = bmp.GetPixel(0, bmp.Height - 1);
    colorMap[0].NewColor = Color.Transparent;
    ImageAttributes attr = new ImageAttributes();
    attr.SetRemapTable(colorMap);
    // Draw using the color map
    Rectangle rect = new Rectangle(0, 0, bmp.Width, bmp.Height);
    rect.Offset(...); // Center the image
    g.DrawImage(bmp, rect, 0, 0, rect.Width, rect.Height,
    g.PageUnit, attr);
  }
}

Forced Windows palette

If the red and yellow squares appear correctly but the blue and green squares appear in random colors (most likely a shade of gray), then the Windows 256 color palette is being forced on the image. You need to start where you load the image and work your way backward. Somewhere along the line, the code assumes the image is a 256-color Windows DDB. You need to remove this assumption.

Forced custom palette

If each square appears in a random color, then a custom palette is being forced on the image. The code is likely creating a software palette, tweaking an entry or two in that software palette, and then applying that software palette. Search around for calls to GetSystemPaletteEntries, SelectPalette(hDC), or RealizePalette(hDC).

You need to track down exactly why the custom palette is being created and remove those assumptions, then remove the custom palette.

Wrong mask

If the image appears with the correct colors but there's clipping around the edges, then your image has an associated mask rather than a transparent background color. You need to find where the mask is generated or stored and work with your designer to create and check in a mask. Do not attempt to generate a mask yourself.

Upside-down

If the green corner appears in the top right, then your image is being flipped vertically after it's loaded. Macintosh and OS/2 BMPs are stored right side-up whereas Windows BMPs are stored upside-down. Most image manipulation APIs intelligently handle the rotation of the bitmap, but if you're seeing this problem you need to start where you load the image and work your way backward until you find the flip occurs and remove that assumption.

255 Transparent

If you don't see the upper left hand corner of the green square then your code maps true green (0,255,0) to transparent. Office command bars use a similar shade of green to represent translucent and we suspect that someone tried to copy them a few years ago. You need to remove this assumption from your code and only honor the background color as transparent. Look in your code to find where it is setting crTransparent to PALETTERGB(0,255,0) and remove this assumption.

254 Transparent

If you don't see the lower right hand corner of the green square then your code maps true green (0,254,0) to translucent. Office command bars use this shade of green to represent translucent and we suspect that people reused Office artwork by hard coding MSO's translucent color as transparent. You need to remove this assumption from your code and only honor the background color as transparent. Look in your code to find where it is setting crTransparent to PALETTERGB(0,254,0) and remove this assumption.

Something new?

If these options don't work, we recommend that you start where the image is loaded and work your way up through the DCs looking for anything that could cause color manipulation and removing that assumption.