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

     }

 }