Silverlight Tip of the Day #7: Creating Transparent PNG files for Silverlight
With GIF's, which isn'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 tool 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 below:
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 (plus left shift click to grab the brown piece under his cloak) and you will see that everything in brown is selected.
Step 4. Hit the delete key. The result is the background is now erased!
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.
Credits: Thanks to the site http://reinerstileset.4players.de/ (Reiner "Tiles" Prokein) for these images.
Thank you,
--Mike Snow
Subscribe in a reader