How to Use Live Tiles in Windows Phone Dev

Introduction

What makes an application more fascinating than others? There are so many reasons to go with. It depends on the user, what fascinates him the most. Notifications are however the most essential feature for any application. You have seen notifications for current SMS, Email pop ups, Recent News or it can be current Cricket Score. There are so many apps that use Live Notification in any form. 

In Windows Phone, we have Live Tiles that fulfill the purpose of notification. Apart from Live Tiles there are Toast Notification and Raw Notification. In this article we will try Live Tiles.


 
Background

We will have nothing in the background except a few classes from Microsoft.Phone.Shell and some objects to implement them on.

Procedures

Step 1: Start your Silverlight Project or any Windows Phone and add two Buttons name their Text property as “Create Primary Tile” and “Create Secondary Tile”.


 
Step 2: Before starting your code, add a namespace for the entire Tile’s classl that is, using Windows.Phone.Shell.

Step 3: Now, raise the Click event of the first Button, in other words Create Primary Tile.

And there, you need to create a reference for ShellTile and assign it with ShellTile.ActiveTiles.First().

ShellTile primary = ShellTile.ActiveTiles.First();

And then, check a condition if primary (what we‘ve created just now) is Not Null. Then assign the entire Tile’s Data to its respective fields.     
          

StandardTileData tile = new StandardTileData();

//---------------------------------------------------Part I

tile.BackgroundImage = new Uri("/Icons/Android.png", UriKind.Relative);

// Background Image

 

tile.Count = 7; // Any Numeric Value

tile.Title = "C# Corner";

 

// ------------------------------------------------Part II

//Flip Back Side

tile.BackBackgroundImage = new Uri("/Icons/Apple.png", UriKind.Relative);

tile.BackContent = "Its Magic :)";

tile.BackTitle = "I 'm Title";

primary.Update(tile);

MessageBox.Show("Successfully Created !!");

Explanation

In the code above, I have created an object of StandardTileData that will actually be used in the Tile’s description.

So, next we have assigned the Background Image of the Tile as Android.Png as in the following:
 

tile.BackgroundImage = new Uri("/Icons/Android.png", UriKind.Relative);

Then we assigned a Count predefined variable that defines some numeric value that can be used for relative purposes. In the case of an Email app, it may define the number of unread emails in the Inbox.

tile.Title = "C# Corner";

Then the Title, as the name suggests, defines the Title of the Tile as in the following:

tile.Title = "C# Corner";

There is a back side of the Tile that can also be coded. And that can be done as in the following:

tile.BackBackgroundImage = new Uri("/Icons/Apple.png", UriKind.Relative);

With this, we can assign the Background Image.

And, in contrary to the front side of the Tile, you can define the content as in the following:

tile.BackContent = "Its Magic :)";

Again, the Back Title:

tile.BackTitle = "I 'm Title";

Finally, we need to update the Tile so that it can be visible on the Metro Screen.

primary.Update(tile);

It’s enough to get this in any App. Let’s have some more features to add to the Tiles.

Step 4: Double-click on the second button “Create Secondary Tile”, and put there:

ShellTile secondary = ShellTile.ActiveTiles.FirstOrDefault(x => x.NavigationUri.ToString().Contains("ID=2"));

// Secondary Tile

StandardTileData tile = new StandardTileData();          

if (secondary == null)

{

     tile.Title = "Name";

     tile.BackgroundImage = new Uri("/Icons/Facebook.png", UriKind.Relative);               

     ShellTile.Create(new Uri("/New.xaml?ID=2", UriKind.Relative), tile);

     MessageBox.Show("Successfully Created !!");

}

 
Almost the same few lines, in the first line we have ed two arguments in FirstOrDefault().

Actually, this is LINQ code that defines where to navigate when the Secondary Tile is tapped /pressed. And, there we have invoked the item with ID=2.

So, in ShellTile.Create() that is a navigator to New.xaml with carrying ID=2.

Output

Before doing anything, ensure your current Project app has its Default tile on the Home Screen. So, you will see the effect of Tile.

If there is no Tile for Your App, then long press on the Icon of Your App and you will get this screen.



And select the Pin to Start. Then you can see the default tile of your app.



When I click on the Secondary Tile Button then I have such a screen:



Conclusion

You can use this Notification Service in any of your Windows Phone applications without any external effort. If you encounter any problem regarding the output or code then please go for the enclosed solution file with it.