Windows Store App: Live tiles and toast- a simple example

The first time I played around with Tiles and Toasts I was surprised by the lack of easy examples. I mean, it really easy rather simple to implement a basic live tile - be that Windows Store App or Windows Phone app (different implementation thought!), and a very basic toast notification is also rather easy.

Unfortunately I think many devs, especially devs new to Windows Store Apps don’t use this cool feature because they think it will take time,- and often a feature like this is considered a ‘would be nice’ and not a necessity for an app. Oki, that might be true, BUT it might add a nice selling point, add a final polish to an app, and it’s just pretty cool really.

So here is a VERY simple implementation for two live tiles, and a toast notification. Why two tiles? The user can set a wide or small tile, and if you don’t provide that exact tile no notification will be shown on the tile. So make sure you have two tiles.

Steps for tiles and toasts:

Tile
1.Make sure you add those Png’s to the project, and set them in the appmanifest
2.Enable toast notifications! IMPORTANT and very easy to forget
3.Create the tile, and set the inner text (tiles are represented as XML)
4.Create a tile notification, don’t forget to set an expirationtime(recommended)
5.Set the tile for update through the TileUpdateManager

Dont forget ;)

Toast
1.Create a template
2.Set the desired text
3.Create the The toast notifier
4.Show the notification

[sourcecode language=“csharp”]
public MainPage()
{
InitializeComponent();
SetUpTiles();
}

    private void SetUpTiles()  
    {  
        var largeTile = TileUpdateManager.GetTemplateContent(TileTemplateType.TileWideImageAndText01);  
        largeTile.GetElementsByTagName("text")[0].InnerText = "I'm a big bad tile";  

        var smallTile = TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquareText04);  
        smallTile.GetElementsByTagName("text")[0].InnerText = "I'm a tiny tile";  

        var node = largeTile.ImportNode(smallTile.GetElementsByTagName("binding").Item(0), true);  
        largeTile.GetElementsByTagName("visual").Item(0).AppendChild(node);  

        var tileNotification = new TileNotification(largeTile) { ExpirationTime = DateTimeOffset.UtcNow.AddSeconds(10) };  

        TileUpdateManager.CreateTileUpdaterForApplication().Update(tileNotification);  

        ShowToastNotification();  
    }  

    private void ShowToastNotification()  
    {  
        var xml = ToastNotificationManager.GetTemplateContent(ToastTemplateType.ToastText01);  

        xml.GetElementsByTagName("text")[0].AppendChild(xml.CreateTextNode("Hello from toast!"));  

        ToastNotificationManager.CreateToastNotifier().Show(new ToastNotification(xml));  
    }  
}  

[/sourcecode]

Example using the NotificationsExtensions library

[sourcecode language=“csharp”]
public MainPage()
{
InitializeComponent();
SetUpTiles();
}

    private void SetUpTiles()  
    {  
        var updater = TileUpdateManager.CreateTileUpdaterForApplication();  

        var wide = TileContentFactory.CreateTileWideText09();  
        var square = TileContentFactory.CreateTileSquareText04();  
        wide.TextHeading.Text = "Heading";  
        wide.TextBodyWrap.Text = "Some text";  
        square.TextBodyWrap.Text = "Some text";  
        wide.SquareContent = square;  

        var notification = wide.CreateNotification();  
        notification.ExpirationTime = DateTimeOffset.UtcNow.AddSeconds(10);  
        updater.Update(notification);  

        ShowToastNotification();  
    }  

    private void ShowToastNotification()  
    {  
        var content = ToastContentFactory.CreateToastText01();  
        content.TextBodyWrap.Text = "Some text for da toast";  

        ToastNotificationManager.CreateToastNotifier().Show(content.CreateNotification());  
    }  
}  

[/sourcecode]

Comments

Thank you so much, Iris. Agree with you: very difficult to find examples about live tiles... 

hi   there     there  are   a     few    live   tiles   on  ios   tiles  weather    puffin  browser  stock  touch   dashboard  pro  my   dashboard 

maybe there are now, but not when I wrote the post :) 

Thank you so much for this easy tutor for Live tiles. Do you have similar example with Push Notification services (Showing application updates if available on the live tile)

Thanks in advance 

thanks a lot for your kind help of live tiles, please if you have similar example on Push Notification services , then hoping another kindful help from you


Thanks in advance 

Hi!
Could you please give the steps for displaying RSS feed continuously on live tiles in my app.
Actually mine is a latest scores app which has to show latest scores continuously on live tiles.
I previously used Background Task  but the live tiles started working after a day.I don't know why.
Please help! 

Last modified on 2013-01-03