click tracking
Creating a Tile using theme’s color as background (Windows Phone 7) - Katrien's MSDN Blog - Site Home - MSDN Blogs

Creating a Tile using theme’s color as background (Windows Phone 7)

Creating a Tile using theme’s color as background (Windows Phone 7)

  • Comments 8

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.

tiles

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

2010-11-01_1925
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.

2010-11-01_1932

Delete the white background, press CTRL+A (to select), then DEL.

2010-11-01_1934

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 Knipogende emoticon

2010-11-01_1942

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.

2010-11-01_1945

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”.

2010-11-01_1952

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.

2010-11-01_1953

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:

2010-11-01_2002  2010-11-01_2003

On the real device:
tilesfull

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?

Page 1 of 1 (8 items)
Leave a Comment
  • Please add 6 and 5 and type the answer here:
  • Post