Over a million developers have joined DZone.

Windows 8 Store Apps: Secondary Tiles

· Mobile Zone

Visually compose APIs with easy-to-use tooling. Learn how IBM API Connect provides near-universal access to data and services both on-premises and in the cloud, brought to you in partnership with IBM.

The call to pin a secondary tile looks like this:

SecondaryTile(string tileId, string shortName, string displayName, string arguments, TileOptions tileOptions, Uri logoReference);

The important part for this post is the last parameter: Uri logoReference. This is the the path to the image you want to show on the tile – but I had a problem, I didn’t want to show an image! I just had some text I wanted to show on the tile. After a lot of digging the solution was non trivial – generate an image at runtime. This was made even harder as the Render method in WPF does not exist in the XAML implementation used in WinRT.

WinRT does include a WritableBitmap class which allows you to create a in memory bitmap, manipulate the pixels and save to a file format with the BitmapEncoder classes. The problem for me is I do not want to fiddle with pixels manually – this lead me to WritableBitmapEx which is a great library for having primitives (fill, line, circle etc…), the only down side was that I wanted text, not graphic primitives. 

titleMore searching lead to two posts on StackOverflow from XXX (post 1, post 2) which provided a solution:

  1. Create a sprite map using a free tool called  SpriteFont201
  2. Use the code provided in the answers with WritableBitmapEx to extract the sprites and combine them with a WritableBitmap.

I took the code and adjusted it slightly so text would always be centred and allowed me to play with font scaling. I’ve attached the modified code to the post below.

In the end the code I used looks like this:

public async Task<StorageFile> CreateImage()
    uint width = 512;
    uint height = 512;
    var writableBitmap = BitmapFactory.New((int)width, (int)height);
    writableBitmap.Clear((App.Current.Resources["SecondTileColour"] as SolidColorBrush).Color);
    writableBitmap.DrawStringHoriztonallyCentred(this.DisplayPostalCode, 50, "title", Colors.White, 4);
    writableBitmap.DrawStringHoriztonallyCentred(this.Town, 175, "title", Colors.White, 2);
    writableBitmap.DrawStringHoriztonallyCentred(this.City, 275, "title", Colors.White, 2);
    writableBitmap.DrawStringHoriztonallyCentred(string.Format("box code: {0}", this.BoxCode), 375, "title", Colors.White, 2);
    writableBitmap.DrawStringHoriztonallyCentred(string.Format("street code: {0}", this.StreetCode), 450, "title", Colors.White, 2);

    var file = await Windows.Storage.ApplicationData.Current.LocalFolder.CreateFileAsync(Guid.NewGuid().ToString("N"), Windows.Storage.CreationCollisionOption.ReplaceExisting);
    using (var fileStream = await file.OpenAsync(Windows.Storage.FileAccessMode.ReadWrite))
        var encoder = await BitmapEncoder.CreateAsync(BitmapEncoder.PngEncoderId, fileStream);

        encoder.SetPixelData(BitmapPixelFormat.Bgra8, BitmapAlphaMode.Straight, width, height, 96, 96, writableBitmap.ToByteArray());

        await encoder.FlushAsync();

    return file;

The Mobile Zone is brought to you in partnership with Strongloop and IBM.  Visually compose APIs with easy-to-use tooling. Learn how IBM API Connect provides near-universal access to data and services both on-premises and in the cloud.


The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}