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:
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:
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.
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.
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.
On the real device:
Easy isn’t it?
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.
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.
The tile image can have a resolution of upto 256dpi (page 46 of the UI design guidelines PDF).
For some reason, it did not work for me. Can you please share your sample project?
You can download the sample here: cid-2a153181cee98bbe.office.live.com/.../WP7TileSample-transparent.zip
Thanks Katrien for the samples.....
Any one please share some hubtiles examples......
when will you PIN the Tile to the Start Screen and how?