Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Windows 8 Store Apps: Secondary Tiles

DZone's Guide to

Windows 8 Store Apps: Secondary Tiles

· Mobile Zone
Free Resource

Get gorgeous, multi-touch charts for your iOS application with just a few lines of code.

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;
}

.Net developers: use Highcharts, the industry's leading interactive charting library, without writing a single line of JavaScript.

Topics:

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

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

X

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

{{ parent.tldr }}

{{ parent.urlSource.name }}