Windows Phone: Theme colored tile and icon

In this short article I will explain how to change the color of Tiles when you change the color of theme.

In one of my previous article Part 29 - Windows Phone 7 - Application Tile Image I talked about how to create Application Tile Image in Windows Phone.

Let's see how we can create Theme Colored Tile image.

Step 1: Create a Silverlight Windows Phone project.

Step 2: Add transparent image background in the project. Right click and go to properties window and change the Build Action to Content.

Transparent image and the image should be part of XAP package, a project content is mandatory requirement to change the color of Tiles as per theme.

Step 3: Expand properties folder it is collapsed and open WMAppManifest.xml.

Step 4: <PrimaryToken> element sets the Tile image of application. pushpin-B.png has transparent background.

<Tokens>
   <PrimaryToken TokenID="WP___Theme_Color_Applicaion_TileToken" TaskName="_default">
      <TemplateType5>
         <BackgroundImageURI IsRelative="true" IsResource="false">pushpin-B.png</BackgroundImageURI>
         <Count>0</Count>
         <Title>WP___Theme_Color_Applicaion_Tile</Title>
      </TemplateType5>
   </PrimaryToken>
</Tokens>

Step 5: Now run the application, change the color of theme (I have changed to teal) and pin the app to start window. You will notice color of tile is same as theme color which is teal.

Now if you notice the image of icon is not based on theme color. It is good to keep icon and tile image same.

Step 6: <IconPath> element is used to change the color of icon based on the them color. I have put same transparent image over here also.

<IconPath IsRelative="true" IsResource="false">pushpin-B.png</IconPath>