Jan 032013
 

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

live tile and toast notifications in Windows Store Apps

Dont forget ;)

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

toast_notification

smallTile

bigTile

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

Example using the NotificationsExtensions library

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

6 comments on “Windows Store App: Live tiles and toast- a simple example

  1. Alessio on said:

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

  2. james braselton on said:

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

  3. Santhosh on said:

    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

  4. Jivraj on said:

    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

  5. Yash Vijay on said:

    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!

Leave a Reply

Your email address will not be published. Required fields are marked *

*

HTML tags are not allowed.

What is 7 + 10 ?
Please leave these two fields as-is:
IMPORTANT! To be able to proceed, you need to solve the following simple math (so we know that you are a human) :-)