Tutorials for web designers and developers
Tutorials for Developers_

Implementing Live Tiles Windows 8.1- Updated

Live tile in windows 8.1 is ANIMATING tile i.e after some time content of app TILE (Not inside app but on start screen tile) changes automatically. (Another OLD post of ‘implementing live tiles’ is here). Live tiles windows 8

Lets do it now!

1. Open visual studio 13 > New project > Visual C# > Blank App

2. In solution explorer, open App.Xaml.cs
3. Add following method code after public app(){} method.

protected override void OnWindowCreated(WindowCreatedEventArgs args)
    XmlDocument tileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileWide310x150ImageAndText01);
    //This code first retrieves all elements in the template with a tag name of "text".
    XmlNodeList tileTextAttributes = tileXml.GetElementsByTagName("text");
    tileTextAttributes[0].InnerText = "Hello World";

    XmlNodeList tileImageAttributes = tileXml.GetElementsByTagName("image");
    ((XmlElement)tileImageAttributes[0]).SetAttribute("src", "ms-appx:///Assets/red.png");
    ((XmlElement)tileImageAttributes[0]).SetAttribute("alt", "Red Image");

    TileNotification tileNotification = new TileNotification(tileXml);
    //AddSeconds(20) defines tile need to refresh at rate of 20.
    tileNotification.ExpirationTime = DateTimeOffset.UtcNow.AddSeconds(20);

Code Explanation: There are templates styles available to implement live tiles. Here I made use of
TileWide310x150ImageAndText01 template then accessed content of template using GetTemplateContent and assigned it to variable  tileXml. Next, I entered desired text to appear on live tile and image path that we want to show. Lastly, set the time for tile to show up. Thats it.

4. Goto manifest file and do following steps show in picture below.

Live Tile

5. Finally add tile image in your assets folder that you mentioned earlier in code.

Download Complete code by Mr. Shahid Aziz
Having any problem implementing above code? Click on this post title and comment below there.

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on email

11 Responses

Leave a Reply

Your email address will not be published.