How to create Microsoft Band Custom Icons within Pages - Windows UWP

Question

I've been trying to add a custom icon into a Filled Panel.

In the documentation there is some information on this in section 8.5 and the examples in the SDK's demonstrate that a developer can customise the Large and small icon of the tile. However there is no clear example of how to do this for a custom icon within the tile on a page.

Searching further, I found that there was a new Microsoft Band Tile Design Plugin for Visual Studio. This seems to demostrate what I wanted to do however when trying to use the code specified in the Code Generation section (Half way down the page), I failed to load a simple custom layout that I had created using the designer:

Here is the code that is linking the custom layout as described on the Tile Design Plugin Page:

try
            {
                // create a new Guid for the tile
                tileGuid = Guid.NewGuid();
                // create a new tile with a new Guid
                WriteableBitmap smallIconBitmap = new WriteableBitmap(24, 24);
                BandIcon smallIcon = smallIconBitmap.ToBandIcon();
                WriteableBitmap tileIconBitmap = new WriteableBitmap(48, 48);
                BandIcon tileIcon = tileIconBitmap.ToBandIcon();
                BandTile tile = new BandTile(tileGuid)
                {
                    // Name of the Tile
                    Name = "MyTile",
                    // Create the small and tile icons from writable bitmaps.
                    // Small icons are 24x24 pixels.
                    SmallIcon = smallIcon,
                    // Tile icons are 46x46 pixels for Microsoft Band 1, and 48x48 pixels
                    // for Microsoft Band 2.
                    TileIcon = tileIcon
                };
                var customtiledesign = new SentimentFeedbackLayout();
                tile.PageLayouts.Add(customtiledesign.Layout);
                await customtiledesign.LoadIconsAsync(tile);

                if (await bandClient.TileManager.AddTileAsync(tile))
                {
                    Debug.WriteLine("New tile added | GUID: " + tileGuid);
                }

                PageData pd = new PageData(tileGuid, 1, customtiledesign.Data.All);

                if (await bandClient.TileManager.SetPagesAsync(tileGuid, pd))
                {
                    Debug.WriteLine("Added pages");
                }
            }
            catch (Exception ex)
            {
                Debug.WriteLine(ex);
            }

The error log is as follows:

Band Connected : MSFT Band 2 bb:bc
Version: 2.0.4215.0, Hardware: 26
Band - Removing all Tiles
Removed tile: MyTile
New tile added | GUID: 4803e0fe-2da2-4efb-9389-bde3a9289d30
Exception thrown: 'Microsoft.Band.BandOperationException' in mscorlib.ni.dll
Error Device status code: 0xA0CC006A received.

I couldn't find any details of the error online but I think its because I've used:

 PageData pd = new PageData(tileGuid, 1, customtiledesign.Data.All);

Instead of passing the customtiledesign.Data.All into the ...SetPagesAsync() method.

This was because there was no overloaded form of SetPageAsync that took PageElementData[] as an argument.

Answer 1

The reason why the icon is not visible on the tile layout is because of index 1 passed to the constructor here: PageData pd = new PageData(tileGuid, 1, customtiledesign.Data.All);. It should be 0.

I.e. your tile could have several layouts and your call was setting the data for the 2nd non-existing layout. For the only layout you added the index is 0.

When you succeed with this you will likely notice that your tile will have no good icons. This is because smallIconBitmap and tileIconBitmap need some good source before the call ToBandIcon. Samples provide the following code for loading icons.

    private async Task<BandIcon> LoadIcon(string uri)
    {
        StorageFile imageFile = await StorageFile.GetFileFromApplicationUriAsync(new Uri(uri));

        using (IRandomAccessStream fileStream = await imageFile.OpenAsync(FileAccessMode.Read))
        {
            WriteableBitmap bitmap = new WriteableBitmap(1, 1);
            await bitmap.SetSourceAsync(fileStream);
            return bitmap.ToBandIcon();
        }
    }

Answer 2

Please try calling LoadIconsAsync before the call to AddTileAsync (flip the lines shown in the code piece below). This is most likely the cause and I have just verified that. In our documentation for the designer there are 2 sample pieces of code. The first one is incorrect. It calls the way you have tried it in the version of the code posted to MSDN forum. The second example is correct. We will fix the documentation ASAP. Sorry about that.

The code piece presented in this particular question had it right but the code piece presented on MSDN question had the lines flipped. The AddTilesAsync was before LoadIconsAsync

1.if (await bandClient.TileManager.AddTileAsync(tile))

2. {

3. ...

4. }

5. await customLayout.LoadIconsAsync(tile);

Please also note that the usage of GetBandsAsync with argument True was recommended for Windows Phone 10 development in case of writing application services implementing IBackgroundTask objects. This is not the same as calling the async code from non-UI worker thread.