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:

1. Lowest layer: theme background (not shown if your tile is not transparent)
2. Intermediate layer: background image (your image)
3. 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?

Comments

• Anonymous
  November 05, 2010
  To PIN the Tile to the Start Screen.. you have to long-click the application in the application list screen and then choose “pin to start” from the menu.

• Anonymous
  November 08, 2010
  24 bits lack the 8 bits that store the transparency per pixel, which 32bit provide. A pixel can be 50% transparent for example. 8 bit pngs have pixels that are either 100% transparent or not.

• Anonymous
  November 17, 2010
  The tile image can have a resolution of upto 256dpi (page 46 of the UI design guidelines PDF).

• Anonymous
  December 11, 2010
  For some reason, it did not work for me. Can you please share your sample project?

• Anonymous
  December 12, 2010
  You can download the sample here: cid-2a153181cee98bbe.office.live.com/.../WP7TileSample-transparent.zip

• Anonymous
  March 16, 2012
  Thanks Katrien for the samples.....

• Anonymous
  March 16, 2012
  Any one please share some hubtiles examples......

• Anonymous
  March 18, 2013
  when will you PIN the Tile to the Start Screen and how?