Click here to Skip to main content
15,867,686 members
Articles / Mobile Apps / Windows Phone 7

3 Ways to Update the Application Tile Content in Mango

Rate me:
Please Sign up or sign in to vote.
4.92/5 (11 votes)
31 Aug 2011CPOL3 min read 22.6K   25   3
A look at how to update the Application Tile Information in Windows Phone 7 Mango

Introduction

Have you ever wondered how to update the Application Tile in your Windows Phone 7 Mango application? Me too. But before we dig in, let’s look at the properties of a Tile.

Image 1

Microsoft defines each one as listed below:

  • Title: A string indicating the title of the application. The Title must fit on a single line of text and should not be wider than the actual Tile. Approximately 15 characters will fit in the title before being truncated.
  • BackgroundImage: An image displayed on the front of the Tile. We recommend that you always have a background image on the front of the Tile.
  • Count (also known as Badge): An integer value from 1 to 99. If the value of Count is not set or it is set to 0, the circle image and value will not display in the Tile.
  • BackTitle: A string displayed at the bottom of the back of a Tile. The BackTitle must fit on a single line of text and should not be wider than the actual Tile. Approximately 15 characters will fit in the title before being truncated.
  • BackBackgroundImage: An image displayed on the back of the Tile.
  • BackContent: A string displayed in the body of the back of a Tile. Approximately 40 characters will fit in the Tile before being truncated.

(Images taken from MSDN overview.)

Let’s get started.

What we are going to focus on today is the three ways to update the Application Tile.

  1. The first way is pretty weak as you can only change two options. The Title and the Background Image. If you right click on the project and go to Properties, then you will see that you can set the Title and Background image.

Image 2

If you run this, it’s pretty boring stuff:

Image 3

  1. The second option is much much better as it allows you to modify all the properties by the use of the WMAppManifest.xml. If you create a new Windows Phone 7 Mango Application and head straight to the Properties –> WMAppManifest.xml then you will see the following:

Image 4

If you run the app and pin it to the start screen in the emulator, then you should see something like this:

Image 5

Pretty standard stuff right? Well, let’s change the count and title of the Application Tile by heading back to the WMAppManifest.xml and changing the Count and Title to the following:

Image 6

After you deploy it again and “Pin to start” then it should be updated as shown below. We could have changed the background image, but for now the default will do.

Image 7

But that’s not all we can do. If we type a “<” after the last </title>, then it brings up other options as shown below:

Image 8

Let’s play with a few of these real quick.

Image 9

Now if we deploy it again and give it a few seconds, the Application Tile will flip over and reveal the information we just set for the back tile.

Image 10

One other thing to note before we leave this section is that Comments work just fine in the WMAppManifest.xml file.

Image 11

  1. The third way that we can change the Application Tile content is through code:
C#
ShellTile firstTile = ShellTile.ActiveTiles.First();
var newData = new StandardTileData()
{
    Title = "MichaelCrump.Net",
    BackgroundImage = new Uri("background.png", UriKind.Relative),
    Count = 6,
    BackContent = "New BackContent",
    BackTitle = "New BackTitle",
    BackBackgroundImage = new Uri("background.png", UriKind.Relative),
};
 
// Update the default tile
firstTile.Update(newData);

We go ahead and run our application now and trigger this code, through a Click event or whatever. Then we will see our Application Tile has updated:

Image 12

and when the tile flips, it looks like this:

Image 13

Conclusion

As you can see, it is pretty easy to update the Application Tile. The one thing to remember about updating the Application Tile is that your content will wrap and it is best to use one to two words if possible. We will look at creating Live tiles in the next part of this series. Thanks for reading and have a great day.

Image 14Subscribe to my feed

Image 15

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior) Telerik
United States United States
Michael Crump is a Silverlight MVP and MCPD that has been involved with computers in one way or another for as long as he can remember, but started professionally in 2002. After spending years working as a systems administrator/tech support analyst, Michael branched out and started developing internal utilities that automated repetitive tasks and freed up full-time employees. From there, he was offered a job working at McKesson corporation and has been working with some form of .NET and VB/C# since 2003.

He has worked at Fortune 500 companies where he gained experience in embedded systems design and software development to systems administration and database programming, and everything in between.

His primary focus right now is developing healthcare software solutions using Microsoft .NET technologies. He prefers building infrastructure components, reusable shared libraries and helping companies define, develop and automate process standards and guidelines.

You can read his blog at: MichaelCrump.net or follow him on Twitter at @mbcrump.

Comments and Discussions

 
QuestionApply same concept in desktop apps? Pin
Ammar_Ahmad13-Nov-13 4:44
Ammar_Ahmad13-Nov-13 4:44 
GeneralMy vote of 5 Pin
Kanasz Robert21-Sep-12 0:57
professionalKanasz Robert21-Sep-12 0:57 
GeneralMy vote of 5 Pin
Kunal Chowdhury «IN»1-Sep-11 1:23
professionalKunal Chowdhury «IN»1-Sep-11 1:23 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.