Question

I am trying to create icons in Microsoft Expression Design, but I want to add the system resource colors like the phone background and foreground so that the icons change color when the user changes the theme. Does anyone know how to specify the windows phone system colors in Expression Design, or how to import them?
Thanks

Answer 1

This is a great blog post that I’ve used before which goes step-by-step into applying the System themes into images (which should be white.. but It’ll get into the nitty-gritty details!)

Using an image as a mask so that WP7 theme’s are honoured

For example, here’s how you can do it using a Rectangle and OpacityMask:

<Rectangle Fill="Black" Height="48" Width="48">
            <Rectangle.OpacityMask>
                <ImageBrush ImageSource="/MyProject;component/Images/Dark/appbar.add.rest.png" />
            </Rectangle.OpacityMask>
        </Rectangle>

Note that the Height & Width are set explicitly to the Width & Height of my ImageSource. This fixes the stretching issue that will occur if you don’t do this.