Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

3 Ways to update the Application Tile Content in Mango

DZone's Guide to

3 Ways to update the Application Tile Content in Mango

· Mobile Zone
Free Resource

Launching an app doesn’t need to be daunting. Whether you’re just getting started or need a refresher on mobile app testing best practices, this guide is your resource! Brought to you in partnership with Perfecto

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

 

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

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

image

2) 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

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

image

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

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

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

image

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

image

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

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

image

3) The third way that we can change the Application Tile content is through code.

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);

If 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

and when the tile flips it looks like this:

image

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.

Keep up with the latest DevTest Jargon with the latest Mobile DevTest Dictionary. Brought to you in partnership with Perfecto.

Topics:

Published at DZone with permission of Michael Crump. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}