Tutorials for web designers and developers
Tutorials for Developers_
Search
Close this search box.
Hafiz Faraz Mukhtar

Hafiz Faraz Mukhtar

Hafiz Faraz Mukhtar is an expert Web Developer, SEO specialist, and Graphic Designer. Hafiz Faraz is an expert in WordPress design and development. Hire on Upwork | Hire on Fiverr

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);
    TileUpdateManager.CreateTileUpdaterForApplication().Update(tileNotification);
}

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.

10 Responses

Leave a Reply

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