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, , , 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, "", "/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")[];
         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")[];
         imageElement.Attributes.GetNamedItem("src").NodeValue = "ms-appdata:///local/Tile310x150b.jpg";
         notification = new Windows.UI.Notifications.TileNotification(tile310x150b);
         updator.Update(notification);
     }
 }