WP8 Cycletile - Rendering Image and text into Writable BitmapImage

Question

Im currently trying to implement a CycleTile within a scheduled task agent. I need Large-Tile-Images like this:

(image on the left side, custom Background, text on the right side) http://s7.directupload.net/file/d/3361/54hbvlby_png.htm

I think I must render everything to one Image and set it as "CycleImages" to the CycleTile...

My current code looks like this:

void SavetoIsoStore(BitmapImage image)
{
        //(...)
        WriteableBitmap wb = CreateLargeBookImage(image);

        using (IsolatedStorageFileStream imageStream = new IsolatedStorageFileStream("/Shared/ShellContent/" + tempJPEG, System.IO.FileMode.Create, myIsolatedStorage))
        {
            wb.SaveJpeg(imageStream, wb.PixelWidth, wb.PixelHeight, 0, 100);
        }

        IsolatedStorageFileStream fileStream = myIsolatedStorage.CreateFile(tempJPEG);

        fileStream.Close();
    }
    imageNameCounter++;
}

private WriteableBitmap CreateLargeBookImage(BitmapImage bitmap)
{
    WriteableBitmap wb = new WriteableBitmap(691, 336);//Large TileSize  

    //Magic filling, changing and rendering here   

    return wb;
}

The CycleTile reads the IsolatedStore.

I dont know how to start this... By rendering an UI object or another way?! The web doesnt provide me with satisfactory results...

edit:

Running Code:

private WriteableBitmap CreateLargeBookImage(BitmapImage bitmap)
        {
            WriteableBitmap wb = new WriteableBitmap((int)widthL, (int)heightL);

            //<Grid x:Name="LayoutRoot"  Height="336" Width="691">
            //    <Grid Background="White">
            //        <Grid.ColumnDefinitions>
            //            <ColumnDefinition/>
            //            <ColumnDefinition/>
            //        </Grid.ColumnDefinitions>
            //        <Image Grid.Column="0"
            //                   Source="Images\35.jpg"
            //                   MaxHeight="200"/>
            //        <TextBlock Grid.Column="1"
            //                       Text="Testassdaseasdf"
            //                       Foreground="Black"
            //                       FontSize="24"
            //                       Margin="15,0,0,0"
            //                       VerticalAlignment="Center"
            //                       HorizontalAlignment="Left"/>
            //    </Grid>
            //</Grid>


            var backgroundColor = new SolidColorBrush(Colors.White);
            Grid grid = new Grid()
            {
                Background = backgroundColor,
            };
            ColumnDefinition columnDef1 = new ColumnDefinition();
            ColumnDefinition columnDef2 = new ColumnDefinition();
            grid.ColumnDefinitions.Add(columnDef1);
            grid.ColumnDefinitions.Add(columnDef2);

            Image img = new Image()
            {
                MaxHeight = 200,
                Source = bitmap,
                HorizontalAlignment = HorizontalAlignment.Right,
                VerticalAlignment = VerticalAlignment.Center
            };
            img.SetValue(Grid.ColumnProperty, 0);

            var fontColor = new SolidColorBrush(Colors.Black);
            TextBlock txt1 = new TextBlock()
            {
                Text = "TETSTETSTETET",
                FontSize = 24,
                Margin = new Thickness(15, 0, 0, 0),
                Foreground = fontColor,
                VerticalAlignment = VerticalAlignment.Center
            };
            txt1.SetValue(Grid.ColumnProperty, 1);

            grid.Children.Add(img);
            grid.Children.Add(txt1);

            grid.UpdateLayout();
            grid.Measure(new Size(widthL, heightL));
            grid.Arrange(new Rect(0, 0, widthL, heightL));

            wb.Render(grid, new TranslateTransform()
            {
                X = 0,
                Y = 0
            });

            wb.Invalidate();
            return wb;
        }

Answer 1

You'll have make a render of UI controls.

Here is some sample code that creates a simple "Hello world" tile:

1. Instantiate the controls

var fontFamily = new FontFamily("Segoe WP SemiLight");
var fontColor = new SolidColorBrush(Colors.White);
var textTextBlock = new TextBlock()
{
    Text = "Hello world!",
    FontSize = 40,
    Foreground = fontColor,
    FontFamily = fontFamily
};

2. Render the controls as a WriteableBitmap

var bitmap = new WriteableBitmap(173, 173);

bitmap.Render(textTextBlock, new TranslateTransform()
{
    X = 9,
    Y = 9
});

bitmap.Invalidate();

If your layout is complex, my advice is to create the XAML first with a designer tool like Blend, and when it's done you do the same thing in C#.

EDIT: if you want to render a Grid control, you need to add the Children elements to the grid:

grid.Children.Add(textTextBlock);

and call the following methods to ensure that the Controls are positionned correctly:

grid.UpdateLayout();
grid.Measure(new Size(tileWidth, tileHeight));
grid.Arrange(new Rect(0, 0, tileWidth, tileHeight));