wp8.1 创建动态磁贴应用

目前Windows Phone 8.1所支持磁贴像素大小有71x71、150x150和310x150，分为大中小三种模式，对于桌面磁贴微软提供的诸多模板http://msdn.microsoft.com/zh-cn/library/windows/apps/hh761491.aspx，模板功能比较简单，就是图像和文字的结合，如果要实现复杂的磁贴组合，比较天气预报那样的磁贴，那就要微软RenderTargetBitmap类事先生成图像，再更新到磁贴。

我们写一个静态方法。在使用RenderTargetBitmap类的同时，建议去看一下微软的关于此类的用法，参数中的element元素也有所限制。

1.一些视频无法生成图像。

2.自定义一些第三方插件无法生成图像。

3.元素visibility必须要为visible。

4.元素必须要在屏幕元素的视觉树中，比如动态创建一个元素，那么就无法生成该元素的图像，出现空白。建议预先将元素写在xaml中并设置opacity为0即可。

public static async System.Threading.Tasks.Task RenderImage(Windows.UI.Xaml.UIElement element, string filename)
{
    Windows.UI.Xaml.Media.Imaging.RenderTargetBitmap renderTargetBitmap = new Windows.UI.Xaml.Media.Imaging.RenderTargetBitmap();
    await renderTargetBitmap.RenderAsync(element, (int)element.DesiredSize.Width, (int)element.DesiredSize.Height);
    Windows.Storage.Streams.IBuffer pixelBuffer = await renderTargetBitmap.GetPixelsAsync();
    var width = renderTargetBitmap.PixelWidth;
    var height = renderTargetBitmap.PixelHeight;

    Windows.Storage.StorageFile storageFile = await Windows.Storage.ApplicationData.Current.LocalFolder.CreateFileAsync(filename, Windows.Storage.CreationCollisionOption.ReplaceExisting);
    using (var stream = await storageFile.OpenAsync(Windows.Storage.FileAccessMode.ReadWrite))
    {
        var encoder = await Windows.Graphics.Imaging.BitmapEncoder.CreateAsync(Windows.Graphics.Imaging.BitmapEncoder.JpegEncoderId, stream);
        encoder.SetPixelData(Windows.Graphics.Imaging.BitmapPixelFormat.Bgra8, Windows.Graphics.Imaging.BitmapAlphaMode.Ignore,
            (uint)width, (uint)height, 96, 96, pixelBuffer.ToArray());
        await encoder.FlushAsync();
    }
}

那么在xaml我们可以这样做。

<Grid Opacity="0">
    <Grid x:Name="Tile310x150f" Width="310" Height="150">
        <!--内容-->
    </Grid>
    <Grid x:Name="Tile310x150b" Width="310" Height="150">
        <!--内容-->
    </Grid>
</Grid>

现在我们在后台来刷新图像。

public async Task RefreshImage()
{
    Grid render310x150f = this.ViewControl.FindName("Tile310x150f") as Grid;
    await Common.Common.RenderImage(render310x150f, "Tile310x150f.jpg");

    Grid render310x150b = this.ViewControl.FindName("Tile310x150b") as Grid;
    await Common.Common.RenderImage(render310x150b, "Tile310x150b.jpg");
}

然后pin到桌面。这里提醒一点，RefreshImage要在RequestCreateAsync前执行完成，因为当启用磁贴pin时，页面会跳转到桌面，否则会发生截图空白。

public async void PinTile(string tileId)
{
    Uri uri = new Uri("ms-appdata:///local/Tile71x71f.jpg");
    Windows.UI.StartScreen.SecondaryTile tile = new Windows.UI.StartScreen.SecondaryTile(tileId, "123", "/MainPage.xaml", uri, Windows.UI.StartScreen.TileSize.Default);
    tile.VisualElements.Wide310x150Logo = uri;
    tile.DisplayName = " ";

    await RefreshImage();

    this.isPin = await tile.RequestCreateAsync();
    this.PinVisible = Visibility.Collapsed;
    this.UnpinVisible = Visibility.Visible;

    this.UpdateTile();
}

接下来是update tile的方法，这里的GetTemplateContent就是为了获取微软磁贴预制的模板，update其实是即时信息展示，并不是刻意为了磁贴动态的效果。

public void UpdateTile()
{
    if (isPin)
    {
        var updator = Windows.UI.Notifications.TileUpdateManager.CreateTileUpdaterForSecondaryTile(this.tileId);
        updator.Clear();
        updator.EnableNotificationQueue(true);
        
        var tile310x150f = Windows.UI.Notifications.TileUpdateManager.GetTemplateContent(Windows.UI.Notifications.TileTemplateType.TileWide310x150Image);
        var tile310x150b = Windows.UI.Notifications.TileUpdateManager.GetTemplateContent(Windows.UI.Notifications.TileTemplateType.TileWide310x150Image);

        var imageElement = tile310x150f.GetElementsByTagName("image")[0];
        imageElement.Attributes.GetNamedItem("src").NodeValue = "ms-appdata:///local/Tile310x150f.jpg";
        var notification = new Windows.UI.Notifications.TileNotification(tile310x150f);
        updator.Update(notification);

        imageElement = tile310x150b.GetElementsByTagName("image")[0];
        imageElement.Attributes.GetNamedItem("src").NodeValue = "ms-appdata:///local/Tile310x150b.jpg";
        notification = new Windows.UI.Notifications.TileNotification(tile310x150b);
        updator.Update(notification);
    }
}