WP8 Cycletile - 将图像和文本渲染为可写的BitmapImage

时间:2013-08-27 11:40:41

标签: windows-phone-8 live-tile writablebitmap

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

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

我认为我必须将所有内容渲染到一个图像并将其设置为“CycleImages”到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;
}

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

1 个答案:

答案 0 :(得分:3)

您将制作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);

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

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