Creating A Live Tile

Continuing my series of Blog posts that distill the presentations I’m giving this month in Europe and the UK, today I’ll take a look at creating a Live Tile.  LiveTile

Live tiles tell the user that something interesting is happening in your application, or that you have new information for them. 

Live tiles are an essential and exciting part of Windows 8 and creating a Live tile is not very difficult. In fact, creating a simple Life tile is, well, simple.

To start, create a new blank application and name it LiveTile.  The very first thing to do is to add the NotificationsExtensions project that Microsoft are* shipping with the SDK and with the Sample applications on tiles.

*I’m in the UK right now, and here corporations are plural(!)

On the home page, create a button,

   1: <Button Name="CreateLiveTile"

   2:         Content="Create"

   3:         Click="CreateLiveTile_Click_1" />

When the button is clicked, we’re going to send text to the tile. 

Note that there are two ways to send text to a tile:

  • From within the application as we are doing here
  • Using the Windows Notification Service (NWS) covered in a future blog post

In the event handler for the button click event, we start by creating a wide and a square tile with the new text we want to display,

   1: private void CreateLiveTile_Click_1(object sender, RoutedEventArgs e)

   2: {

   3:     ITileWideText03 tileContent = TileContentFactory.CreateTileWideText03();

   4:     tileContent.TextHeadingWrap.Text = "Jesse's Tile Notification";

   5:  

   6:     ITileSquareText04 squareContent = TileContentFactory.CreateTileSquareText04();

   7:     squareContent.TextBodyWrap.Text = "Jesse's Tile Notification";

We then attach the square tile to the wide tile,

   1: tileContent.SquareContent = squareContent;

Create an instance of TileNotification by calling CreateNotification on the wide tile,

   1: TileNotification notification = tileContent.CreateNotification();

Create an instance of TileUpdater by calling CreateTileUpdaterForApplication on the TileUpdateManager,

   1: TileUpdater updater = TileUpdateManager.CreateTileUpdaterForApplication();

Pass the notification to the Update method of the TileUpdater,

   1: updater.Update(notification);

That’s all there is to it. If you switch to  your tile in the start menu, you’ll see the message pop into view.

You can find the source for this example here

Share

About Jesse Liberty

Jesse Liberty is a Master Consultant for Falafel Software, and has three decades of experience writing and delivering software projects. He is the author of 2 dozen books and multiple Pluralsight courses, and has been a Technical Evangelist for Telerik and for Microsoft, a Distinguished Software Engineer for AT&T, a VP for Information Services for Citibank and a Software Architect for PBS.
This entry was posted in Essentials, Mini-Tutorial, Tiles, Windows 8, WinRT and tagged . Bookmark the permalink.

4 Responses to Creating A Live Tile

  1. Andreas says:

    After a ton of Google’ing, I finally came across this. Funny that you’re working for Telerik, been using their WP/Win8 controls for a while.

    HOWEVER, what I wanted to ask was whether you know how to make the live tile shift between the “normal tile image”, and the tileContent text? I’d love it if it flipped around just like other apps. Thanks!

  2. olivier says:

    Hi Jesse,

    I tried your sample but it does not work (notification is not displayed on the tile). Do you know what is the problem ?

  3. olivier says:

    Hi Jessie,

    I tried your sample but it does not work (notification is not displayed on the tile). Do you know what is the problem ?

  4. tiles uk says:

    I just came onto your post and found it quite interesting. I am also associated with tiles uk, swimming pool tiles, commercial tiles, and love to enjoy the stuff on the same as its rarely found on internet. Thanks again for writing such a good post.

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>