Tags: , | Categories: Articles, Tutorials Posted by RTomlinson on 2/22/2011 10:26 PM | Comments (0)

This is the first in the series of WP7 tips that I picked up whilst developing StackO for Windows Phone 7. I have to say, that I am no Silverlight (or WP7) expert and there may be better ways to do certain things from what I write about in these posts, and if there are then I’d love to here them, so please leave comments. Hopefully, some of these tips will help you along a little quicker in getting your apps to market.

The TheNounProject.com is an absolutely excellent resource for iconography. Their mission is to:

"sharing, celebrating and enhancing the world's visual language".

There are over 500 icons there that fit perfectly with the metro style that the WP7 adopts providing visual metaphors to use throughout your application, absolutely free.

These icons are downloaded as SVG’s and the WP7 ApplicationBar will only accept PNG images. In addition, you will most probably want these images to be themable.

WP7 theming is pretty clever. If you use a PNG icon that has a transparent background and the image itself is completely white. Then if the dark theme is used your image will remain white, however, if you switch to the light theme then the image is changed automatically to black. This tutorial details the steps to take the SVG’s from TheNounProject and convert them to theme aware icons for WP7.

Firstly, choose an appropriate image. For StackO, I used the “Eye” icon. blackeye

Download the icon to somewhere local on your machine.

Next you need to download and install ImageMagick. Again, there might be other ways to do this but this was the first solution I found.

Open up a Command Prompt and navigate to the location of your SVG you downloaded. We are going to use the convert tool from ImageMagick to do the conversion, set the background to transparent, fill the image with white and resize it to 48px (the recommended image size for ApplicationIcons).

Use the following command:

convert -background none -fill white -resize 48 noun_project_388_1.svg whiteeye_42.png

image

The output is exactly what we want.eye_white_42

Try it out. Add it to your project and set the IconUrl to the PNG. Now if you go into your WP7 Settings and change the theme from dark to light you will see that the icon is changed for you. Brilliant!

blog comments powered by Disqus