Creating a Tile using theme’s color as background (Windows Phone 7)
The Windows Phone 7 Start screen default tiles like e-mail and agenda use the current Theme color with a visual and text in white. Depending on the theme color, whether it’s set to Dark or Light, white content will always on the Tile’s foreground color.
As I was working on a personal project this weekend I got into looking how to use this same approach for 3rd party apps. As it happens, it’s really easy to have your tile look like one of these default app tiles.
Let’s first look at how a Tile is constructed. As explained in the section Push Notifications, in the UI Design and Interaction Guide for Windows Phone 7 document, a Start screen tile consists of:
- Background image
- An optional counter (foreground)
- Tile’s/App title
Image source: UI Design and Interaction Guide for Windows Phone 7
There is something not mentioned in the document which is the fact that your tile image, when using transparency, also inherits from the theme color. So in fact you have these layers:
- Lowest layer: theme background (not shown if your tile is not transparent)
- Intermediate layer: background image (your image)
- Foreground layer: Title and counter (optional, only used when doing tile updates through Push Notifications)
Now that we know this, the process to create a transparent Tile image that will display in the color of the current theme is really simple. For the example here I’m creating an image using Paint.net, an incredibly good program to do image manipulation (and it’s free!). You can use your favorite program to do this.
Creating a transparent image with white content in Paint.net
Create a new image file with the dimensions 173x173.
Delete the white background, press CTRL+A (to select), then DEL.
Create your tile visual by using white as the color. Because the background color will always be the theme color you can count on white always coming to the foreground no matter what Theme the user has chosen. I just decided to create a rectangle with a circle. Nothing fancy but it does not really matter for this post. Be creative and don’t follow my example here 
Save the file as .PNG (in my case I named the file mytile.png). Paint.net gives you several options to save your PNG. Make sure you select something other than 24bit PNG since the latter does not allow you to save transparency. Not sure why this is though.
Adding the image as new Tile for your Windows Phone 7 project
Open your project, or create a new one using Visual Studio 2010 (or Express edition).
Copy the newly created image into the project. Via Explorer Ctrl+C / In Visual Studio: Ctrl+V. Other option is to use the Add existing item option in the project properties. By default your project will contain an image called ‘Background.png’. You can delete this one.
Select your new tile image file and set it’s Build Action to “Content”.
Go to Project properties, choose the newly added image as the “Background image”. Note: seems like a misleading name to me, wonder why they did not call it Tile background or something similar.
Save your project and run in the emulator or device. Pin your application to the Start screen. You should now have your white visual with the theme’s color applied. Notice the application name supplied in the project properties also appears as the topmost layer. As you can see below, my rectangle is displayed as expected using either a dark (horrible brown) or a light theme.
Emulator view:
On the real device:
Easy isn’t it?