WP8 Cycletile - Rendering Image and text into Writable BitmapImage - windows-phone-8

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