Silverlight Tip of the Day #6: Creating Transparent PNG files for Silverlight

With GIF's, which aren’t supported in Silverlight2, transparency is fairly easy because you can just specify what color in that GIF you want to be your transparent color. With PNG's, it's a little tougher. You will need to use an editing tool to go in and "clear" out the sections of the bitmap that you do not want displayed. There are tools that do this; and I will walk you through one such scenario.

Step 1. Find a image editing tool that supports PNG file format and a feature like the "Magic Wand" that is used to clear selected areas. Open the image you want to edit in that tool. For our example, we will use this cute little attacking mage as seen in Figure 7.1.

Figure 7.1 Attacking Mage

Step 2. Click the "magic wand"  button on the toolbar. If you are using a tool like Photoshop, first duplicate the layer and delete the original background layer. This way the background you clear away is transparent and not white. If available, set the Tolerance level = 0 so that it only grabs the brown color. Also, if available, turn off Anti-Alias.

Step 3. Left click on the brown surface as seen in Figure 7.2 (plus left shift click to grab the brown piece under his cloak) and you will see that everything in brown is selected.

Figure 7.2 Image Boundaries Selected

Step 4. Hit the delete key. The result is the background is now erased as seen in Figure 7.3.

Step 5. Save the file as a PNG file. This image will now render in Silverlight as transparent through the spaces that you cut out of the image. Below is an example on how to load and display and PNG image. We call our routine LoadImage() and than add the image resource to a Canvas control I have named MapCanvas.

public void DisplayPNG()

{

    Image img = LoadImage("images/mage.png");

    MapCanvas.Children.Add(img);

}

public Image LoadImage(string resource)

{

    Image img = new Image();

    Uri uri = new Uri(resource, UriKind.Relative);

    ImageSource imgSrc = new System.Windows.Media.Imaging.BitmapImage(uri);

    img.SetValue(Image.SourceProperty, imgSrc);

    return img;

}

Credits: Thanks to the site http://reinerstileset.4players.de/ (Reiner "Tiles" Prokein) for these images.

Thank you,