wp8.1 創建動態磁貼應用 - yuefei－IT工程師數位筆記本

文章出處

目前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即可。

 1 public static async System.Threading.Tasks.Task RenderImage(Windows.UI.Xaml.UIElement element, string filename)
 2 {
 3     Windows.UI.Xaml.Media.Imaging.RenderTargetBitmap renderTargetBitmap = new Windows.UI.Xaml.Media.Imaging.RenderTargetBitmap();
 4     await renderTargetBitmap.RenderAsync(element, (int)element.DesiredSize.Width, (int)element.DesiredSize.Height);
 5     Windows.Storage.Streams.IBuffer pixelBuffer = await renderTargetBitmap.GetPixelsAsync();
 6     var width = renderTargetBitmap.PixelWidth;
 7     var height = renderTargetBitmap.PixelHeight;
 8 
 9     Windows.Storage.StorageFile storageFile = await Windows.Storage.ApplicationData.Current.LocalFolder.CreateFileAsync(filename, Windows.Storage.CreationCollisionOption.ReplaceExisting);
10     using (var stream = await storageFile.OpenAsync(Windows.Storage.FileAccessMode.ReadWrite))
11     {
12         var encoder = await Windows.Graphics.Imaging.BitmapEncoder.CreateAsync(Windows.Graphics.Imaging.BitmapEncoder.JpegEncoderId, stream);
13         encoder.SetPixelData(Windows.Graphics.Imaging.BitmapPixelFormat.Bgra8, Windows.Graphics.Imaging.BitmapAlphaMode.Ignore,
14             (uint)width, (uint)height, 96, 96, pixelBuffer.ToArray());
15         await encoder.FlushAsync();
16     }
17 }

那么在xaml我們可以這樣做。

1 <Grid Opacity="0">
2     <Grid x:Name="Tile310x150f" Width="310" Height="150">
3         <!--內容-->
4     </Grid>
5     <Grid x:Name="Tile310x150b" Width="310" Height="150">
6         <!--內容-->
7     </Grid>
8 </Grid>

現在我們在后臺來刷新圖像。

1 public async Task RefreshImage()
2 {
3     Grid render310x150f = this.ViewControl.FindName("Tile310x150f") as Grid;
4     await Common.Common.RenderImage(render310x150f, "Tile310x150f.jpg");
5 
6     Grid render310x150b = this.ViewControl.FindName("Tile310x150b") as Grid;
7     await Common.Common.RenderImage(render310x150b, "Tile310x150b.jpg");
8 }

然后pin到桌面。這里提醒一點，RefreshImage要在RequestCreateAsync前執行完成，因為當啟用磁貼pin時，頁面會跳轉到桌面，否則會發生截圖空白。

 1 public async void PinTile(string tileId)
 2 {
 3     Uri uri = new Uri("ms-appdata:///local/Tile71x71f.jpg");
 4     Windows.UI.StartScreen.SecondaryTile tile = new Windows.UI.StartScreen.SecondaryTile(tileId, "123", "/MainPage.xaml", uri, Windows.UI.StartScreen.TileSize.Default);
 5     tile.VisualElements.Wide310x150Logo = uri;
 6     tile.DisplayName = " ";
 7 
 8     await RefreshImage();
 9 
10     this.isPin = await tile.RequestCreateAsync();
11     this.PinVisible = Visibility.Collapsed;
12     this.UnpinVisible = Visibility.Visible;
13 
14     this.UpdateTile();
15 }

接下來是update tile的方法，這里的GetTemplateContent就是為了獲取微軟磁貼預制的模板，update其實是即時信息展示，并不是刻意為了磁貼動態的效果。

 1 public void UpdateTile()
 2 {
 3     if (isPin)
 4     {
 5         var updator = Windows.UI.Notifications.TileUpdateManager.CreateTileUpdaterForSecondaryTile(this.tileId);
 6         updator.Clear();
 7         updator.EnableNotificationQueue(true);
 8         
 9         var tile310x150f = Windows.UI.Notifications.TileUpdateManager.GetTemplateContent(Windows.UI.Notifications.TileTemplateType.TileWide310x150Image);
10         var tile310x150b = Windows.UI.Notifications.TileUpdateManager.GetTemplateContent(Windows.UI.Notifications.TileTemplateType.TileWide310x150Image);
11 
12         var imageElement = tile310x150f.GetElementsByTagName("image")[0];
13         imageElement.Attributes.GetNamedItem("src").NodeValue = "ms-appdata:///local/Tile310x150f.jpg";
14         var notification = new Windows.UI.Notifications.TileNotification(tile310x150f);
15         updator.Update(notification);
16 
17         imageElement = tile310x150b.GetElementsByTagName("image")[0];
18         imageElement.Attributes.GetNamedItem("src").NodeValue = "ms-appdata:///local/Tile310x150b.jpg";
19         notification = new Windows.UI.Notifications.TileNotification(tile310x150b);
20         updator.Update(notification);
21     }
22 }