Adding Text to Cycle Tiles (Windows Phone 8)

Question

I'm writing an app whose sole purpose is to periodically download some images and display them in a live tile. I want to be able to update the tile with 4-8 images every thirty minutes or so, so I need to use a CycleTile. Downloading the images and getting them into a live tile is pretty straight forward. The real kicker is adding text on each image.

If it was just two images, I would use a flip tile, displaying one on the front and one on the back. Then I would add the text by assigning a different tile title to the front and back. However, since I need to display more than 2 images, I need to use the CycleTile. And this approach won't work with the CycleTile. (but please, correct me if I'm wrong!)

So my next thought was to overlay a TextBlock on a WriteableBitmap. This could work, but i think it would get complicated quickly taking into account factors like: different image resolutions, medium/large tile layouts, and varying screen PPIs. I'm sure I could figure it out, but it seems... messy.

Is there a better way to do this? Are there some Tile features I'm overlooking?

To sum it up my requirements are:

1. Display 4-8 images using a live tile.
2. Each image needs to have some text associated with it.
3. Update the images every thirty minutes or so.
4. Needs to scale to wide tiles.
5. Needs to scale to phones with higher PPI screens.

Answer 1

For item one, you should be able to merge as many images together using the Blit method from the WriteableBitmapEx project. Since you can merge your images together in any way you want, you can ensure they cover wide tile widths and any ppi you need.

To cover the second item, the following will overlay text on an image:

private static ImageSource createBitmapImageWithImage(string text, int x, int y, Color textColor, BitmapSource bitmapSource)
{
    using(var mem = new MemoryStream())
    {
        //Create Formatted Text
        var textBlock = new TextBlock
            {
                Text = text,
                Foreground = new SolidColorBrush(textColor),
                FontFamily = new FontFamily("Courier New"),
                FontSize = 40
            };

        //Moves an object two dimensionally
        var tf = new TranslateTransform
            {
                X = x,
                Y = y
            };

        //Overlay text on existing image
        var bmpImage = new WriteableBitmap(bitmapSource);
        bmpImage.Render(textBlock, tf);
        bmpImage.Invalidate();

        //Convert back into bitmap
        bmpImage.SaveJpeg(mem, bmpImage.PixelWidth, bmpImage.PixelHeight, 0, 100);
        mem.Seek(0, SeekOrigin.Begin);
        var image = new BitmapImage();
        image.SetSource(mem);

        return image;
    }
}

Of course you can pass in the text block too, or the options to configure the text block. But I wanted to show how you can format the text however you want.

Your third request is covered by background tasks. In your phone solution, add a new project and you can select background task. It is fairly straightforward to have this call your code to update the images. Nokia even created a walk through on how to add one with code examples.