Windows 8 開發之動態磁貼和輔助磁貼(二級磁貼)

　　磁貼在系統的開始菜單中代表着應用，動態磁貼可以向用戶顯示新的、重大的、定制的內容。 Tile 通知是一種固定格式的 XML，其中包含文字和圖片內容。在應用程序清單中，必須包含一張正方形的的 logo，如果 應用程序也想使用寬模版 logo，也需要在清單中注明。如果你的應用中同樣支持寬 tile，強烈建議你預加載 方形和寬形 在預加 載的 xml 中，從而無論開始菜單中的 tile 是方形或者 寬形的 都可以接收通知。

以下是微軟提供的磁貼模版：

 磁貼和磁貼通知 ： http://msdn.microsoft.com/zh-cn/library/windows/apps/hh779724.aspx

 磁貼模板目錄 ：    http://msdn.microsoft.com/zh-cn/library/windows/apps/hh761491.aspx

　　1.動態磁貼

　　使用 Windows.UI.Notifications 命名空間下的 TileUpdateManager 類， 創建用於更改和更新啟動菜單圖塊的 TileUpdater對象。此類提供對系統提供的平鋪模板 XML 內容的訪問，以便您可以自定義用於更新您平鋪的內容。 具體模版的XML內容，可以根據微軟的模版，進行修改。

 public static class TileUpdateManager
    {
        // 摘要:
        //     創建並初始化 TileUpdater 的新實例，此操作可讓您更改調用應用程序圖塊的外觀。
        //
        // 返回結果:
        //     用於將更改發送到應用程序的平鋪的對象。
        [Overload("CreateTileUpdaterForApplication")]
        public static TileUpdater CreateTileUpdaterForApplication();
        //
        // 摘要:
        //     創建並初始化圖塊 TileUpdater 的新實例，該圖塊屬於和調用應用程序位於同一包中的另一應用程序。TileUpdater 允許開發人員更改該平鋪外觀。
        //
        // 參數:
        //   applicationId:
        //     標題的唯一 ID。
        //
        // 返回結果:
        //     用於通過 applicationId 將更改發送到平鋪標識的對象。
        [Overload("CreateTileUpdaterForApplicationWithId")]
        public static TileUpdater CreateTileUpdaterForApplication(string applicationId);
        //
        // 摘要:
        //     創建並初始化 TileUpdater 的新實例，此操作可讓您更改 secondary tile 的外觀。平鋪可屬於調用應用程序或相同包中的其他任何應用程序。
        //
        // 參數:
        //   tileId:
        //     標題的唯一 ID。
        //
        // 返回結果:
        //     用於通過 tileID 將更新發送到平鋪標識的對象。
        public static TileUpdater CreateTileUpdaterForSecondaryTile(string tileId);
        //
        // 摘要:
        //     獲取預定義的圖塊模板之一的 XML 內容，這樣您可以自定義該內容以進行圖塊更新。
        //
        // 參數:
        //   type:
        //     模板的名稱。
        //
        // 返回結果:
        //     包含 XML 的對象。
        public static XmlDocument GetTemplateContent(TileTemplateType type);
    }

　　

        //使用模版自定義字的符串
        void UpdateTileButton_Click(object sender, RoutedEventArgs e)
        {
            string tileXmlString = "<tile>"
                              + "<visual>"
                              + "<binding template='TileWideImageAndText01'>"
                              + "<text id='1'>This tile notification uses ms-appx images</text>"
                              + "<image id='1' src='ms-appx:///images/redWide.png' alt='Red image'/>"
                              + "</binding>"
                              + "<binding template='TileSquareImage'>"
                              + "<image id='1' src='ms-appx:///images/graySquare.png' alt='Gray image'/>"
                              + "</binding>"
                              + "</visual>"
                              + "</tile>";

            Windows.Data.Xml.Dom.XmlDocument tileDOM = new Windows.Data.Xml.Dom.XmlDocument();

            tileDOM.LoadXml(tileXmlString);

            TileNotification tile = new TileNotification(tileDOM);

            TileUpdateManager.CreateTileUpdaterForApplication().Update(tile);

        }

 

　　另外我們可以下載NotificationsExtensions文件，將該文件引用到我們的項目中，使用該文件中提供的類和方法來創建我們的動態磁貼，這個和前面不同的地方是，我們可以不使用XML模版進行設置磁貼的模版，而是通過具體的模版類，給模版類的屬性賦值，實現動態磁貼。下面的代碼實現了，最近五個動態磁貼之間的切換，該模版顯示的樣式為：

寬磁貼：左側是一個較小的圖像，右側上面是第一行上較大文本的標題字符串，下面是四行四個常規文本的字符串。文本不自動換行。

窄磁貼：上面是一個較大文本的標題字符串，下面是一個最多可包含三行自動換行常規文本的字符串。

        private void UpdateTileText(string key,string[] array)  //array數組有4個元素，分別顯示四行數據
        {
            try
            {
                if (array != null && array.Length > 1)
                {
                    //創建方形磁帖模板，ITileSquareText02上面是一個較大文本的標題字符串，下面是一個最多可包含三行自動換行常規文本的字符串。     
                    ITileSquareText02 squareContent = TileContentFactory.CreateTileSquareText02();
                    squareContent.TextHeading.Text = key;
                    squareContent.TextBodyWrap.Text = array[0];
                    //創建寬模板，ITileWideSmallImageAndText02左側是一個較小的圖像，右側上面是第一行上較大文本的標題字符串，下面是四行四個常規文本的字符串。文本不自動換行。    
                    ITileWideSmallImageAndText02 tileContent = TileContentFactory.CreateTileWideSmallImageAndText02();
                    tileContent.Image.Src = "ms-appx:///Assets/Logo.png";
                    tileContent.TextHeading.Text = word;
                    for (int i = 0; i < array.Length; i++)
                    {
                        switch (i)
                        {
                            case 0:
                                tileContent.TextBody1.Text = array[i];  //第一行數據
                                break;
                            case 1:
                                tileContent.TextBody2.Text = array[i];  //第二行數據
                                break;
                            case 2:
                                tileContent.TextBody3.Text = array[i];  //第三行數據
                                break;
                            case 3:
                                tileContent.TextBody4.Text = array[i];  //第四行數據
                                break;
                        }
                    }
                    tileContent.SquareContent = squareContent;
                    TileUpdateManager.CreateTileUpdaterForApplication().Update(tileContent.CreateNotification());
                    TileUpdateManager.CreateTileUpdaterForApplication().EnableNotificationQueue(true);               
                }
            }
            catch
            {
 
            }

    }

注意：動態磁貼必須要在實體機器上，在模擬器中是無法顯示動態磁貼的效果。

　　2.輔助磁貼(二級磁貼)

　　輔助磁貼使用戶能夠將 Windows 應用商店應用的特定內容和深層鏈接—對固定應用內部一個特定位置的引用—發送到“開始”屏幕上。輔助磁貼使用戶能夠使用好友、新聞源、股票報價和其他對其很重要的內容來個性化“開始”屏幕體驗。創建輔助磁貼的選項最常在 UI 中顯示為“附到開始菜單”選項。固定內容也就是為它創建輔助磁貼。此選項常常顯示為應用欄上的一個標志符號。通過觸摸或單擊來選擇輔助磁貼，會啟動到父應用，以突出一種以固定內容或聯系人為中心的體驗。只有用戶才可以固定輔助磁貼；應用不能在未獲得用戶許可的情況下以編程方式固定輔助磁貼。用戶還可以通過“開始”屏幕或通過父應用，對輔助磁貼進行顯式刪除控制。

　　1).在固定輔助磁貼前，用戶必須確認，要求對此進行確認的彈出窗口應當顯示在調用固定請求的按鈕旁邊。

public Rect GetElementRect(FrameworkElement element)  
{  
   GeneralTransform buttonTransform = element.TransformToVisual(null);  
   Point point = buttonTransform.TransformPoint(new Point());  
   return new Rect(point, new Size(element.ActualWidth, element.ActualHeight));  
 } 

　　2).添加輔助磁貼。首先需要設置輔助磁貼的ID

　　public const string appbarTileId = "SecondaryTile.AppBar";

 

 private async void AddButtonClicked(object sender, RoutedEventArgs e)  
{  
   //當用戶選擇應用欄上的按鈕時，會顯示一個要求用戶進行確認的彈出窗口。  
   //若要確保在顯示彈出窗口時不取消應用欄，必須設置應用欄的 IsSticky 屬性。  
   this.BottomAppBar.IsSticky = true;  
   if(SecondaryTile.Exists(appbarTileId))  
   {  
     //取消相應的輔助磁貼  
      SecondaryTile secondaryTile = new SecondaryTile(appbarTileId);  
      bool isUnpinned = await secondaryTile.RequestDeleteForSelectionAsync(GetElementRect((FrameworkElement)sender), Windows.UI.Popups.Placement.Above);  
      ToggleAppBarButton(isUnpinned);  
   }  
    else 
   {  
        //輔助磁貼的一些屬性需要設置后才能固定輔助磁貼.  
        //•磁貼的唯一 ID  
        //•短名稱  
        //•顯示名稱  
        //•磁貼選項  
        //•徽標圖像  
        //•激活輔助磁貼時將傳遞到父應用程序的參數字符串  
        Uri logo = new Uri("ms-appx:///Assets/logo.jpg");  
       string tileActivationArguments = appbarTileId + " was pinned at " + DateTime.Now.ToLocalTime().ToString();  
       SecondaryTile secondaryTile = new SecondaryTile(appbarTileId,  
                                                           "Secondary tile pinned via AppBar",  
                                                             "SDK Sample Secondary Tile pinned from AppBar",  
                                                           tileActivationArguments,  
                                                             TileOptions.ShowNameOnLogo,  
                                                             logo);  
            //指定前景文本顏色和小徽標。  
              secondaryTile.ForegroundText = ForegroundText.Dark;  
              secondaryTile.SmallLogo = new Uri("ms-appx:///Assets/small.jpg");  
             //調用異步方法將輔助磁貼固定。  
             //實際上這種方法不是將磁貼直接固定到“開始”屏幕，而是會顯示一個要求用戶允許這樣做的確認提示框。  
              bool isPinned = await secondaryTile.RequestCreateForSelectionAsync(GetElementRect((FrameworkElement)sender), Windows.UI.Popups.Placement.Above);  
              ToggleAppBarButton(!isPinned);  
          }  
         this.BottomAppBar.IsSticky = false;  
     }

　　以上就完成了，輔助磁貼的添加和顯示。