Creating Training Buddy’s Live Tile

IC600903

Live tiles are probably the best known feature about Windows Phone. Unlike iOS’s plain grid of app icons Microsoft designed their phones home screen to provide users with data without having to open the app. With Windows Phone 8 the feature was updated so that 3rd party apps like Training Buddy could offer full width tiles along with new layout templates.

Adding a live tile to your app is a great idea as it is one of the features users often look for when their choosing an app. The app store also handily points out if an app uses a live tile or not.

The Design

There are 3 tile templates to choose from when you add a live tile to your app. These are Flip, Iconic and Cycle.

Flip gives the illusion that the tile has a front and a back and will flip over after a few seconds.

IC600901

Iconic has space for an image and a large number, a bit like the icon for messages and emails. When in its largest size there is also wide content zones that can contain text.

IC625724

Cycle lets you choose 9 images that the app will Cycle through.

IC601177

For Training Buddy I have used the Iconic template. You will probably find like myself that the type of app you are creating will more than likely determine what template you are going to use. As Training Buddy’s live tile was ultimately going to show details of the users last activity, Iconic was the obvious choice. The smaller sizes don’t really have enough space to give any activity stats and the large version gives you an additional space for a smaller image that was perfect for the activity type image (running, cycling, walking).

Another alternative is to make a completely custom design and write something in your app to render it as an image. You can then display the image using either the flip or cycle template.

The Code

The second reason you everyone should add live tiles to their app is because the code is so simple (this is the actual code from Training Buddy).

// Application Tile is always the first Tile, even if it is not pinned to Start.
            ShellTile TileToFind = ShellTile.ActiveTiles.First();

            // Application should always be found
            if (TileToFind != null)
            {
                string WideContent1 = "";
                string WideContent2 = "";
                string WideContent3 = "";
                string activityLogo = "";
                if (App.settings.LiveTile)
                {
                    var lastActivity = (from a in AllActivities
                                        orderby a.StartDateTime descending
                                        select a).Take(1);

                    if (lastActivity.Count() > 0)
                    {
                        if (App.settings.DistanceMeasurement == "Miles")
                        {
                            WideContent3 = "Distance: " + lastActivity.First().Distance.ToString("0.##") + " miles";
                        }
                        else
                        {
                            WideContent3 = "Distance: " + (lastActivity.First().Distance * 1.609344).ToString("0.##") + " km";
                        }
                        WideContent2 = "Date: " + lastActivity.First().StartDateTime.ToShortDateString();
                        switch (lastActivity.First().ActivityType.ToLower())
                        {
                            case "running":
                                WideContent1 = "Last Run";
                                break;
                            case "walking":
                                WideContent1 = "Last Walk";
                                break;
                            case "cycling":
                                WideContent1 = "Last Cycle";
                                break;
                            case "swimming":
                                WideContent1 = "Last Swim";
                                break;
                        }

                        activityLogo = "/Assets/" + lastActivity.First().ActivityType + "Black-70.png";

                        if (lastActivity.First().CaloriesBurned > 0)
                        {
                            WideContent3 += " Calories: " + lastActivity.First().CaloriesBurned.ToString("0.#");
                        }

                    }

                }

                IconicTileData tileDate = new IconicTileData
                {
                    Title = "Training Buddy",
                    WideContent1 = WideContent1,
                    WideContent2 = WideContent2,
                    WideContent3 = WideContent3,
                    IconImage = new Uri("/Assets/RunningBlack-150.png", UriKind.Relative),
                    SmallIconImage = new Uri(activityLogo, UriKind.Relative)
                };

                // Update the Application Tile
                TileToFind.Update(tileDate);
            }

First I’m finding the application tile. It is possible to create additional tiles for your app which is another great feature, but if you want to just update the main tile it will be the first one returned.

Next I’m checking to see if the user has turned on the live tile or not. If they haven’t then I’m just setting the tile back to its default state.

The following lines are then getting the content to display on the tile and building up the strings on local variables.

Lastly and most importantly I’m creating a new instance of IconicTileData and setting each of its properties with the data to show. Then it’s just a case of calling Update on the tile instance and providing it with the new IconicTileData object.

The Tile

And here’s the result

Training Buddy Live Tile

Live tiles are really easy to create so if your developing an app you should definitely take the time to add one.

Advertisements

RestSharp with Async Await

RestSharp is an excellent open source project to use in a Windows Phone app if you want make http calls to a json api. However it doesn’t have any inbuilt support for the async await syntax. Thankfully with C#’s extensions methods we can add this support in our app.

namespace RestSharpEx
{
    public static class RestClientExtensions
    {
      public static Task<IRestResponse> ExecuteTaskAsync(this RestClient @this, RestRequest request)
      {
        if (@this == null)
            throw new NullReferenceException();
     
        var tcs = new TaskCompletionSource<IRestResponse>();
     
        @this.ExecuteAsync(request, (response) =>
        {
            if (response.ErrorException != null)
                tcs.TrySetException(response.ErrorException);
            else
                tcs.TrySetResult(response);
        });
     
        return tcs.Task;
      }
    }
}

This will add a new function to the RestSharp client type called ExecutreTaskAsync. Inside the method it will call the ExecuteAsync function as you normally would, but has also implemented returning a Task and setting it’s results when its complete.

To use the function would be as follows

var client = new RestClient("http://www.YOUR SITE.com/api/");
var request = new RestRequest("Products", Method.GET);
var response = await client.ExecuteTaskAsync(request);

Convert string or int to enum

Enum’s a great, but you may be wondering how you can turn an integer or string value into the corresponding enum. For example you may have an api that’s being sent XML or JSON, and then you need to turn one of the values within that into an enum to set on an object in your code.

Well it’s very simple. If you have a string do this:

YourEnum foo = (YourEnum) Enum.Parse(typeof(YourEnum), yourString);

or if you have an int do this (you could also just do the first example with a ToString() on the end.

YourEnum foo = (YourEnum)yourInt;

Back to basics string vs StringBuilder

This is simple stuff but is something I see people easily miss by just not thinking about it.

A string is an immutable object, which means once created it can not be altered. So if you want to do a replace or append some more text to the end a new object will be created.

A StringBuilder however is a buffer of characters that can be altered without the need for a new object to be created.

In the majority of situations a string is a perfectly reasonable choice and creating an extra 1 or 2 objects when you appened a couple of other strings isn’t going to make a significant impact on the performance of your program. But what happens when you are using strings in a loop.

A few weeks ago one of my developers had written some code that went through a loop building up some text. It looked a little like this:

string foo = "";

foreach (string baa in someSortOfList)
{
    foo += " Value for " + baa + " is: ";

    var aValue = from x in anotherList
                 where x.name == baa
                 select x;

    foo += aValue.FirstOrDefault().value;
}

Everything worked apart from the fact it took 30seconds to execute!

He was searching through convinced that the linq expressions in the middle was what was taking the time, and was at the point of deciding it could not go any faster without a new approach.

I pointed out not only had he used strings rather than a StringBuilder, but the loop also created around 10 string objects within it. The loop which repeated a couple thousand times was therefore creating 20000 objects that weren’t needed. After we switched froms strings to a StringBuilders the loop executed in milliseconds.

So remember when your trying to work out why your code may be slow, remember the basic stuff.