Implementing an “App News” Live Tile in Windows Phone 8

Even if your app doesn’t have frequently updating content, it is easy to implement a cool live tile for your Windows Phone 8 app if you have a twitter account.

One of the coolest features of Windows Phone since Windows Phone 7 was initially released is that of Live Tiles for apps that are pinned to the phone’s start screen. With Windows Phone 8 implementing live tiles is both easier and provides a wider range of functionality than ever.

The Windows Phone 8 API provides developers with access to three different types of Tiles:

1. Flip Tiles
2. Cycle Tiles
3. Iconic Tiles

In this article, we are going to implement a Live Flip Tile. Information on the other two tile types is available in the API documentation here.

So I will assume that you have already written a killer Windows Phone 8 app. And you know that all the really cool apps use live tiles, but maybe your app doesn’t present the type of frequently updated data that would work well in a live tile, and you just don’t know if a live tile would work for your app. Well, wouldn’t it be nice if your users could see the latest news about your app (such as updates submitted, new features, bugs, etc) from a quick glance at a live tile? All you need to implement that functionality is a twitter account and a unique hashtag for your app. The code that implements the live tile in your app is super easy. Let’s get started.

Step 1: Twitter
You’re a developer. You already have a twitter account. Done.

Step 2: Post an Update
I will assume you have more than one Windows Phone app, but whether you do or not, you will want to come up with a unique hashtag to target tweets to a specific app. For example, in this demo, I am working with my app called cameronheadcovers.com. To target tweets from my timeline to this app I include the hashtag #cameronheadcoversapp. Yes that is a long hashtag and it eats up a bit of my 140 characters but it hasn’t been an issue for me yet. You can always choose a shorter hashtag if you wish. So here is my latest app update tweet for cameronheadcovers.com:

#cameronheadcoversapp for windows phone 8 submitted on 12/2/12 #wp8

— andrew long (@andrew_long) December 3, 2012

Now that I have tweeted an update for my app let’s get into our app.

Step 3: App properties and Tile images
Before we get into writing some code, there are a few properties we need to make sure are set and some image assets we need to add to the app. There are three sizes of tiles supported by Windows Phone 8 and you should supply an image to support all three (Small, Medium, and Large or Wide). The dimensions for these tiles is as follows:

Small: 159px X 159px
Medium: 336px X 336px
Large or Wide: 691px X 336px

If you created your app new as a Windows Phone 8 app, you should already have placeholders for these in the Assets/Tiles folder. If you upgraded your app to Windows Phone 8 from Windows Phone 7.0 or 7.1, I would suggest adding that folder and placing your tile images there.

Double-click the WMAppManifest.xml file in your app and on the Application UI tab you will see the following:

Make sure to select TemplateFlip for the Tile Template, and select your three tile images where appropriate.

Step 4: Scheduled Task Agent
In order to update your Live Tile, your solution needs a Scheduled Task Agent project added to it. Right-click your solution, click “Add”, then “New Project”. From the Add New Project window, click Windows Phone on the left and select the Windows Phone Scheduled Task Agent project type. Specify a name for the project and click OK.

The Scheduled Task Agent includes one code file – ScheduledAgent.cs, with one method that we care about – OnInvoke.

OnInvoke is where we will place our code to provide updated data to our live tile. This process basically involves only three steps:

1. Retrieve a reference to our app’s pinned tile
2. Retrieve your twitter feed and search for a relevant update
3. Create a new FlipTileData object, set the properties and pass it to the app’s pinned tile

Before we start coding, make sure you add a reference to the following assemblies in ScheduledAgent.cs:

• System.Linq
• Microsoft.Phone.Shell

First, let’s grab the app’s pinned tile:

ShellTile appTile = ShellTile.ActiveTiles.First();

You next want to retrieve your twitter feed. I have written my own twitter helper, but you can accomplish this easily using a library such as Linq2Twitter.

List listItems = await AndrewLong.WindowsPhone.Helpers.Twitter.SearchHelper.GetSearchResults(
"@andrew_long",
"#cameronheadcoversapp",
1);

Next, I check to see if there is a tweet found to put on the live tile or not. Either way, I am going to create a new FlipTileData object and pass it to the tile:

tileData = new FlipTileData()
{
BackContent = listItems[0].ItemText,
BackTitle = "App News",
Title = "CameronHeadcovers.com",
WideBackContent = listItems[0].ItemText
};

appTile.Update(tileData);

Finally, in a Scheduled Task Agent, you want to make sure you always make a call to

NotifyComplete();

Now let’s go back to our Phone App project.

Step 5: Updating your App project
All that is left now is to add some code to your phone project so that it sets up your Scheduled Agent to run.

Since you don’t know if your app is pinned to the start screen or not, it makes sense to try to schedule your agent every time the app runs.

Setting up the scheduled agent is done with the following code:

PeriodicTask tileUpdaterPeriodicTask;

string taskName = "LiveTileUpdater";

tileUpdaterPeriodicTask = ScheduledActionService.Find(taskName) as PeriodicTask;

if (tileUpdaterPeriodicTask != null)
{
ScheduledActionService.Remove(taskName);
return;
}

tileUpdaterPeriodicTask = new PeriodicTask(taskName);
tileUpdaterPeriodicTask.Description = "CameronHeadcovers.com Tile Updater";

ScheduledActionService.Add(tileUpdaterPeriodicTask);
#if DEBUG
ScheduledActionService.LaunchForTest(
taskName,
TimeSpan.FromSeconds(10));
#endif

All this code does is search for an existing instance of our Agent running in the Scheduled Action Service. If it finds one, we are going to remove it so we can create a fresh instance. We then create the new instance of the Agent. After we add our agent to the Scheduled Action Service, we use the development-only call of ScheduledActionService.LaunchForTest. This allows us to immediately kick off execution of our agent so we can step through and debug the code if necessary.

Step 6: Live Tile Magic
Once all this is done, it is time to run our app. Assuming you are still in the development environment and running in the emulator, you will need to run the app twice before you start seeing your live tile updates. That is because you can’t pin the app to the start screen until it runs the first time after being deployed to the emulator from Visual Studio. So, after you have pinned your app to the emulator’s start screen and fire up the app again, you should start seeing your live tile in action like so:

As you can see, adding cool live tile functionality to your Windows Phone 8 apps is very simple and is a great way to keep your users informed and engaged with your apps.

Good luck.

Advertisement