Live Tiles in XAML based Windows 8 Metro Application

In this post we will discuss Live Tiles in XAML based Windows 8 Metro Application. We will see

  • Updating Live Tiles
  • Creating queue of information to update Live Tiles

What is Live Tile?

Tiles are the entry point for the application. You will find TILES for all applications installed on your machine at the start screen. These Tiles are termed as Live if we update the content of the Tiles on basis of some business rules. So when user sees the Tiles, She gets some vital information from the application. Below are the Tiles of some of the installed applications on my system.

 If you see weather application there is weather information about Seattle on the tiles itself. So to know weather information of Seattle, you do not need to open the application. You can get information by just seeing the Tile of the weather application. This information is live and will change as the weather of Seattle will be changed.

You can update information on Tiles in Four ways

  1. From Push Notification Service
  2. Locally
  3. Scheduled
  4. Periodic

In this post we are focusing on updating Tiles locally. To start with add below namespaces

image

You can update Tile using below line of code.

image

You can see that Update method takes TileNotification as input parameter. You need to pass content to update on Tile as XML to TileNotification. Tile XML can be created using below code.

image

There are many templates type available for TileTemplate. We are using TileWideText01 type (see 1st highlighted text).

There are 44 TileTemplateType available. You need to choose one as your requirement. In following post I will go in details of each TileTemplateType.

Each Tile Template Type is a XML document. We can update a particular element by selecting element with the tag name. We are doing this in second line of code. In last line we are setting the information we want to update on the Tile. You can set is dynamically according to your business requirement.

So putting all pieces of codes together on a click event of a Button, a Tile can be updated as following.


private void btnSendLiveTiles_Click_1(object sender, RoutedEventArgs e)
{
XmlDocument tileXml = TileUpdateManager.
GetTemplateContent
(TileTemplateType.TileWideText01);

XmlElement textElement = (XmlElement)tileXml.
GetElementsByTagName("text")[0];
textElement.AppendChild(
tileXml.CreateTextNode
("Hey This my Text Updated on Tile"));

TileUpdateManager.CreateTileUpdaterForApplication()
.Update(new TileNotification(tileXml));
}

Before you run and see that whether Tiles has been updated or not. You need to set Wide Logo of the application. Text on live Tiles appears only when you have set the Wide Logo. Wide Logo need to be 310×150 Pixels. To set Wide Logo from solution explorer click on Package.appmanifest file and the set the Wide Logo.

image

I have set green rectangle of size 310×150 as Wide Logo. Now go ahead and run the application. After clicking on the button close the application and go to start screen. On start screen you can see that Tile text has been updated with the text we provided.

image

You can update Tile multiple times. For that you need to enable notification queue and you can have five information in the queue to be updated on the Tile. If there are more than five information available then recent five would be updated.

image

On click event of a button you can update Tiles with three different information as following.


private void btnSendLiveTiles_Click_1(object sender, RoutedEventArgs e)
{

TileUpdateManager.
CreateTileUpdaterForApplication().
EnableNotificationQueue(true);

XmlDocument tileXml = TileUpdateManager.
GetTemplateContent
(TileTemplateType.TileWideText01);
XmlElement textElement = (XmlElement)tileXml.
GetElementsByTagName("text")[0];
textElement.AppendChild(
tileXml.CreateTextNode
("Updating Tile1"));

TileUpdateManager.CreateTileUpdaterForApplication()
.Update(new TileNotification(tileXml));

XmlDocument tileXml1 = TileUpdateManager.
GetTemplateContent
(TileTemplateType.TileWideText01);

XmlElement textElement1 = (XmlElement)tileXml1.
GetElementsByTagName("text")[0];
textElement1.AppendChild(
tileXml1.CreateTextNode
("Updating Tile2"));

TileUpdateManager.CreateTileUpdaterForApplication()
.Update(new TileNotification(tileXml1));

XmlDocument tileXml2 = TileUpdateManager.
GetTemplateContent
(TileTemplateType.TileWideText01);

XmlElement textElement2 = (XmlElement)tileXml2.
GetElementsByTagName("text")[0];
textElement2.AppendChild(
tileXml2.CreateTextNode
("Updating Tile3"));

TileUpdateManager.CreateTileUpdaterForApplication()
.Update(new TileNotification(tileXml2));
}

You can have three information in queue getting updated on Tiles. In this way you can work with Live Tiles in XAML based window8 metro application. I hope this post is useful. Thanks for reading.

How to launch Call Task from Secondary Tile in Windows Phone 7

Recently I got a mail from one of the reader. She asked; How could be launch Call Task from Secondary Tile? In this post I am going to show the way to do that. Before you go ahead with this post, I strongly recommend reading below three posts for more on Live Tiles and Call Task.

Video on How to work with Live Tiles in Windows Phone 7

Live Tiles in Windows Phone 7.5 or Mango phone

Code to make call in Windows Phone 7

Delete Secondary Tiles in Windows Phone 7.5 or Mango Phone

Idea of launching Call Task from Secondary Tiles is very simple.

  1. On clicking of Secondary Tile user will get navigated to a blank page. Let us call that page as Page1.XAML
  2. On NavigatedTo method of the Page1.Xaml, we will instantiate Call Task and show call panel to user.

Let us create Secondary Tile on MainPage.Xaml. I have put a button on MainPage and on click event of the button Secondary Tile will get created.


private void btnCreateSecondaryTiles_Click(object sender, RoutedEventArgs e)
{

var newTile = new StandardTileData()
{
Title = "Blogs Update",
BackgroundImage = new Uri("background.png", UriKind.Relative),
Count = 42,
};
var uri = "/Page1.xaml?state=Live Tile";
ShellTile.Create(new Uri(uri, UriKind.Relative), newTile);



}

If you notice in above code, I have set navigation to Page1.Xaml. Now on onNavigatedTo() method we need to write code to launch Call Task.


protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
{
//base.OnNavigatedTo(e);
PhoneCallTask callTask = new PhoneCallTask();
callTask.PhoneNumber = "999999";
callTask.DisplayName = "debugMode";
callTask.Show();


}


 

On running you should be getting below output

image

I hope this post was useful. Thanks for reading.

Video on How to work with Live Tiles in Windows Phone 7

 

You can read more about Live Tiles in below  articles

Live Tiles in Windows Phone 7.5 or Mango phone

Delete Secondary Tiles in Windows Phone 7.5 or Mango Phone

Schedule the Tile update in Windows Phone 7.5 or Mango Phone