WP8 Cycletile - 将图像和文本渲染成可写位图图像

Question

我目前正在尝试在计划任务代理中实现 CycleTile。我需要像这样的大图块图像：

（左侧图片，自定义背景，右侧文字） http://s7.directupload.net/file/d/3361/54hbvlby_png.htm

我认为我必须将所有内容渲染为一个图像并将其设置为 CycleTile 的“CycleImages”...

我当前的代码如下所示：

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

CycleTile 读取IsolatedStore。

我不知道如何开始...通过渲染 UI 对象或其他方式？！网络并没有为我提供令人满意的结果...

编辑：

运行代码：

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

您将渲染 UI 控件。

下面是一些创建简单“Hello world”磁贴的示例代码：

1。实例化控件

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。将控件呈现为 WriteableBitmap

var bitmap = new WriteableBitmap(173, 173);

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

bitmap.Invalidate();

如果您的布局很复杂，我的建议是首先使用 Blend 等设计器工具创建 XAML，然后在 C# 中执行相同的操作。

编辑：如果要渲染Grid 控件，则需要将Children 元素添加到网格中：

grid.Children.Add(textTextBlock);

并调用以下方法确保Controls定位正确：

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