Windows phone 8 WP8 Cycletile-将图像和文本呈现为可写的位图图像

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

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

（左侧为图像，自定义背景，右侧为文本）

我想我必须把所有的东西都渲染成一个图像，并将其设置为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读取隔离存储

我不知道如何开始这个。。。通过呈现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;
        }

private WriteableBitmap CreateLargeBookImage（位图位图）
{
WriteableBitmap wb=新的WriteableBitmap（（int）宽度，（int）高度）；
//
//    
//        
//            
//            
//        
//        
//        
//    
//
var backgroundColor=新的SolidColorBrush（Colors.White）；
网格=新网格（）
{
背景=背景色，
};
ColumnDefinition columnDef1=新ColumnDefinition（）；
ColumnDefinition columnDef2=新ColumnDefinition（）；
grid.ColumnDefinitions.Add（columnDef1）；
grid.ColumnDefinitions.Add（columnDef2）；
图像img=新图像（）
{
最大高度=200，
源=位图，
水平对齐=水平对齐。对，
垂直对齐=垂直对齐。中心
};
img.SetValue（Grid.ColumnProperty，0）；
var fontColor=新的SolidColorBrush（Colors.Black）；
TextBlock txt1=新的TextBlock（）
{
Text=“tetsteet”，
FontSize=24，
余量=新厚度（15,0,0,0），
前景=fontColor，
垂直对齐=垂直对齐。中心
};
txt1.SetValue（Grid.ColumnProperty，1）；
grid.Children.Add（img）；
grid.Children.Add（txt1）；
grid.UpdateLayout（）；
网格测量（新尺寸（宽度、高度）；
网格排列（新的矩形（0，0，宽度，高度））；
Render（网格，新TranslateTransform（）
{
X=0，
Y=0
});
wb.Invalidate（）；
返回wb；
}

您必须对UI控件进行渲染

下面是一些创建简单“Hello world”互动程序的示例代码：

1.实例化控件 2.将控件渲染为可写位图 如果您的布局很复杂，我的建议是首先使用诸如Blend之类的设计器工具创建XAML，完成后，您可以在C#中执行相同的操作

编辑：如果要渲染

网格

控件，需要将子元素添加到网格：

grid.Children.Add(textTextBlock);

并调用以下方法以确保控件的位置正确：

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

---

感谢您的回复，不幸的是渲染网格不起作用。。。（没有例外，只有黑人）知道为什么吗？我更新了问题您正在渲染一个空网格…您需要添加图像和文本块作为网格的子元素（Grid.children.add）先生，您为我拯救了这一天！很好用！我用运行的代码编辑我的问题。@OlivierPayen非常感谢您分享这个！我花了好几个小时的研究才最终找到了你的代码片段，我所需要的只是.Measure&.Arrange！再次感谢！

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