Developing for Microsoft Band with WinRT : Band Tiles

In this post, I am going to cover the basics of getting a new 3rd-party tile for your application onto the Microsoft Band with WinRT using the SDK.

In this post, I'm going to cover the basics of getting a new 3rd-party tile for your application onto the Microsoft Band with WinRT using the SDK.

 

If you'd like to see how to get started with Band development, you can check out my previous posts on getting connected and accessing sensors!

 

We're going to carry on from those previous posts so if you're unsure of where you're at, go back and have a quick look and we will carry on from there.

 

So, now we've got ourselves connected with the Band and have learned how to access the sensors. The next logical step is getting your tile onto the Band. If you're familiar with the Band by now, you'll be very familiar with it's Windows style app tiles which reside to the right of your 'Me Tile'. This tutorial will walk you through how to get your app tile into that area.

How many tiles remain?

One of the first things we need to do before we can put our tile onto the Band however is to check if we have enough space for it. Unfortunately, the Band doesn't allow for tens of apps on it at one time and this limitation means that if there isn't enough space, you can't activate your own tile on it.

 

Luckily the BandClient exposes the TileManager which has a nifty method called GetRemainingTileCapacityAsync.

The method returns an integer value which you can use when you're ready to add a new tile as follows:

private async void GetTileCapacity()
{
    this.RemainingSpace = await this.BandClient.TileManager.GetRemainingTileCapacityAsync();
}

Adding a tile

If we have space, now is the perfect time to register your tile with the Band. We do this by creating a new BandTile and calling the AddTileAsync method on the TileManager from our BandClient.

 

Before we do that however, we'll need to create two icons. These two icons are for if we decided that we want to use Badging on the Band tile itself.

 

Badging, basically, allows the tile on the Band to show the number of notifications that haven't been looked at by the wearer, usually when the Band is in it's sleep or locked state.

 

These icons will need to be in two sizes, one that is 46 x 46 pixels and another that is 24 x 24. The reason for using two is that when the tile shows the number of notifications unread, it decreases the size of the icon and pushes it up.

 

Now when we've done that, we need to create our tile as follows:

private async void AddTile()
{
    var tileId = Guid.NewGuid();

    var tile = new BandTile(tileId)
    {
        Name = "Your tile name",
        IsBadgingEnabled = true,
        TileIcon = (await this.GetBitmapFromFile("ms-appx:///your-tile-location.png")).ToBandIcon(),
        SmallIcon = (await this.GetBitmapFromFile("ms-appx:///your-small-tile-location.png")).ToBandIcon)
    }

    await this.BandClient.TileManager.AddTileAsync(tile);
}

private async Task<WriteableBitmap> GetBitmapFromFile(string uri)
{
    var file = await StorageFile.GetFileFromApplicationUriAsync(new Uri(uri));
    using(var fileStream = await file.OpenAsync(FileAccessMode.Read)
    {
        var bitmap = new WriteableBitmap(1, 1);
        await bitmap.SetSourceAsync(fileStream);
        return bitmap;
    }
}

This will happily add a new tile to the connected Microsoft Band.

 

The ToBandIcon method is an extension method that is provided within the Microsoft Band SDK.

 

You'll also need to keep a track of the identifier you provided for the Band tile. This will be used for sending notifications to the Band and will need to be stored in local storage if the user closes the app so we can reuse it later.

 

If you have any questions on adding tiles to your Band, leave a comment in the section down below and I'll get back in touch as soon as possible!