Windows Phone 8.1 AppBarButton icon with 2 rows of text

Question

I would like to know how to make AppBarButton Icon to has 2 rows of text. I want to make it like in Windows Calendar:

Answer 1

On WP 8.1 Silverlight, you can useWriteableBitmap(FrameworkElement element, Transform transform) constructor of WriteableBitmap (which is derived from ImageSource) to generate a 'screenshot of memory-rendered framework element'. Then you can set it to Bitmap Icon.

Answer 2

The AppBarButton doesn't display text or arbitrary Xaml in its Icon. It needs to be a symbol from a font, bitmap, or path. For a calendar display like that you'll be best off with a bitmap.

Since you probably don't want to pregenerate 366 icons you can use RenderTargetBitmap to create them on the fly. Assuming "ButtonImageMaster" is a Xaml snippet with the day and month and calendarButton is the AppBarButton:

RenderTargetBitmap rtb = new RenderTargetBitmap();
await rtb.RenderAsync(ButtonImageMaster);
IBuffer pixelBuffer = await rtb.GetPixelsAsync();
string fileName = "calIcon.png";
StorageFile calIconFile = await ApplicationData.Current.TemporaryFolder.CreateFileAsync(fileName,CreationCollisionOption.ReplaceExisting);
using (IRandomAccessStream stream = await calIconFile.OpenAsync(FileAccessMode.ReadWrite))
{
    BitmapEncoder encoder = await BitmapEncoder.CreateAsync(BitmapEncoder.PngEncoderId, stream);
    encoder.SetPixelData(
          BitmapPixelFormat.Bgra8,
          BitmapAlphaMode.Straight,
          (uint)rtb.PixelWidth,
          (uint)rtb.PixelHeight,
          DisplayInformation.GetForCurrentView().LogicalDpi,
          DisplayInformation.GetForCurrentView().LogicalDpi,
          pixelBuffer.ToArray());

    await encoder.FlushAsync(); 
}

BitmapIcon icon = new BitmapIcon();
icon.UriSource = new Uri("ms-appdata:///temp/"+fileName);
calendarButton.Icon = icon;