Windows Phone 7 Quick Tip #25 – Safely modify the colors of your application

If you remember from my Windows Phone 7 Quick Tip #11 – Metro I – Colors, I said:

If anywhere within your application you do something like this:

You are probably doing it wrong and better really be careful and check your application running in both light and dark themes.  Doing so makes it really easy to show screens like this to the user and fail certification:

Solution:

Well, here’s a simple quick tip that will allow you to very simply lock in the colors for your application and provide custom colors to make your application truly unique, but still stick with the metro them.

Step 1: Find a base theme to work with, you can find the standard themes in the following directory:

[PROGRAM-FILES]\Microsoft SDKs\Windows Phone\v7.0\Design

Step 2: Copy the file for the theme called ThemeResources.xaml into your project directory and add it to your project.

Step 3: Be sure to set the Build Action for your theme resource to “Resource”:

 

Step 4: Add that file as a resource dictionary as follows:

Step 5: On each of the root elements on your phone page change the background from:
    to

Step 6: At the top of ThemResources.xaml you can see where all the colors are defined, you can modify any of those colors and your application will pick them up and ignore any of the default colors that are defined for the light and dark themes for the phones settings.

Step 7 (optional): Hide the top status bar. 

If you don’t do this, the status bar will following the theme as set on the device and your page might not look good as in the following example:

Bonus Quick Tip!

Use an image as the background for all your pages:

Step 1: Create an image, in our case we are just using a simple PNG that has a size of 480x800 with a red gradient with some text on it:

Step 2: Add the graphic to your project and set it’s Build Action = Content

Step 3: Within ThemResources.xaml find the following line:
and replace it with:

Now go run your application and your page background should be the image you added to the project!

Summary

Following this simple quick tip will allow you to create a Windows Phone 7 application that has a customized look and feel with your colors in a way that is easily managed and maintained.

-twb