20、磁贴和磁贴通知（tile）（上）

      win8 中的磁铁操作要比 windows phone 中的复杂一些，不过原理大同小异，都是一些固定内容模型。

      参考文档： 

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

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

      Tiles 在系统的开始菜单中代表着应用，并且应用可以使用 tile 和 badge 通知来向用户显示 新的、重大的、定制的内容。

      Tile 通知是一种固定格式的 XML，其中包含文字和图片内容。在应用程序清单中，必须包含一张正方形的的 logo，如果

 应用程序也想使用宽模版 logo，也需要在清单中注明。如果你的应用中同样支持宽 tile，强烈建议你预加载 方形和宽形 在预加

 载的 xml 中，从而无论开始菜单中的 tile 是方形或者 宽形的 都可以接收通知。

        因为通知（notifications） 仅仅是一些 XML，你可以通过很多种方法进行创建。可以使用本示例中包含的 NotificationsExtensions 类库，也可以使用一些字符串。

位于 Windows.UI.Notifications 命名空间下的 TileUpdateManager 类：

     // 创建用于更改和更新启动菜单图块的 TileUpdater 对象。此类还提供对系统提供的平铺模板 XML 内容的访问，以便您可以自定义用于更新您平铺的内容。
     public static class TileUpdateManager
    {
        
        // 创建并初始化 TileUpdater 的新实例，此操作可让您更改调用应用程序图块的外观。
         // 返回结果:
        //  用于将更改发送到应用程序的平铺的对象。
      public static TileUpdater CreateTileUpdaterForApplication();
        // 创建并初始化图块 TileUpdater 的新实例，该图块属于和调用应用程序位于同一包中的另一应用程序。TileUpdater 允许开发人员更改该平铺外观。
        
         //  applicationId:
        //  标题的唯一 ID。
       
         // 返回结果:
        //     用于通过 applicationId 将更改发送到平铺标识的对象。
      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);
    }

1、Send tile notification with text：

    NotificationsExtensions 类库同样的包含在了源代码文件中，所有源代码文件在 前言 中可以下载。

//使用 NotificationsExtensions 类库
<Button x:Name="UpdateTileWithText" Content="Send tile 
notification with text" Click="UpdateTileWithText_Click"/>

//使用模版自定义字的符串
 <Button x:Name="UpdateTileWithTextWithStringManipulation" 
           Content="Send tile notification created with strings" Click="UpdateTileWithTextWithStringManipulation_Click"/>

//清除 tile 
<Button x:Name="ClearTile" Content="Clear tile" Click="ClearTile_Click"/>

三个按钮相应的单击事件：

  //使用 NotificationsExtensions 类库
  private void UpdateTileWithText_Click(object sender, RoutedEventArgs e)
        {
            // 创建一个宽模版          
             ITileWideText03 tileContent = TileContentFactory.CreateTileWideText03();
            tileContent.TextHeadingWrap.Text = "Hello World! My very own tile notification";

            //因为用户可能把桌面上的宽 tile 设置为 正方形的，所以在这里
           //把 方形的 模版附加到 宽形的模版上面
              ITileSquareText04 squareContent = TileContentFactory.CreateTileSquareText04();
            squareContent.TextBodyWrap.Text = "Hello World! My very own tile notification";
            tileContent.SquareContent = squareContent;

            //发送这个 notification            
           TileUpdateManager.CreateTileUpdaterForApplication().Update(tileContent.CreateNotification());

         }

 
//使用自定义的 xml
private void UpdateTileWithTextWithStringManipulation_Click(object sender, RoutedEventArgs e)
        {
            // create a string with the tile template xml
            string tileXmlString = "<tile>"
                              + "<visual>"
                              + "<binding template='TileWideText03'>"
                              + "<text id='1'>Hello World! My very own tile notification</text>"
                              + "</binding>"
                              + "<binding template='TileSquareText04'>"
                              + "<text id='1'>Hello World! My very own tile notification</text>"
                              + "</binding>"
                              + "</visual>"
                              + "</tile>";

            // 创建一个  DOM 对象
            Windows.Data.Xml.Dom.XmlDocument tileDOM = new Windows.Data.Xml.Dom.XmlDocument();
            // 加载 xml 字符串到 DOM ,捕获任何无效的 xml 字符
 
            tileDOM.LoadXml(tileXmlString);

            // 创建一个 tile notification
            TileNotification tile = new TileNotification(tileDOM);

            // 发送这个 notification 到这个应用的 application tile  
          TileUpdateManager.CreateTileUpdaterForApplication().Update(tile);


           //返回 XML 表示形式及其所有子代。
            string xmlStr = tileDOM.GetXml();
        }

 
      // 清除桌面通知
       private void ClearTile_Click(object sender, RoutedEventArgs e)
        {
            // 删除所有更新并将平铺还原为其默认内容（如应用程序清单所声明）。
              TileUpdateManager.CreateTileUpdaterForApplication().Clear();            
        }

桌面显示的宽屏通知：

2、Send tile notification with local images ：

     Tile notifications 可以指定本地的图片。这些图片可以引用应用程序包 （使用 ms-appx:///   协议），或者引用本地的

存储空间（local storage）（程序运行时下载的图片）使用 （ms-appdata:///local/   协议）。图片的格式必须是 .png,

.jpg, .jpeg 或者 gif。图片的最大为 200 KB， 尺寸最大为 1024 x 1024。

 //使用 NotificationsExtensions 类库
  <Button x:Name="UpdateTileWithImage" Content="Send tile notification with local images" 
               Click="UpdateTileWithImage_Click"/>


//使用模版自定义字的符串                   
 <Button x:Name="UpdateTileWithImageWithStringManipulation" 
             Content="Send tile notification created with strings" Click="UpdateTileWithImageWithStringManipulation_Click"/>


//清除 tile
 <Button x:Name="ClearTile" Content="Clear tile" Click="ClearTile_Click"/>
               

        //使用 NotificationsExtensions 类库
         void UpdateTileWithImage_Click(object sender, RoutedEventArgs e)
        {
            ITileWideImageAndText01 tileContent = TileContentFactory.CreateTileWideImageAndText01();

            tileContent.TextCaptionWrap.Text = "This tile notification uses ms-appx images";
            
           //tile 上的图片
             tileContent.Image.Src = "ms-appx:///images/redWide.png";
          
           //图片的描述文字       
             tileContent.Image.Alt = "Red image";

         
            ITileSquareImage squareContent = TileContentFactory.CreateTileSquareImage();
            squareContent.Image.Src = "ms-appx:///images/graySquare.png";
            squareContent.Image.Alt = "Gray image";
            tileContent.SquareContent = squareContent;

           
            TileUpdateManager.CreateTileUpdaterForApplication().Update(tileContent.CreateNotification());

       }

       //使用模版自定义字的符串
         void UpdateTileWithImageWithStringManipulation_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);

       }

     //清除 tile
      private void ClearTile_Click(object sender, RoutedEventArgs e)
        {
            TileUpdateManager.CreateTileUpdaterForApplication().Clear();
            
        }

显示效果（上面为一张红色的 png 图片）：

3、Send tile notification with web images ：

     本示例讲述如果使用 web 服务中的图片。

     Tile notifications 也可以指定 web 服务端的图片。这些图片可以通过使用  http://  或者 https://   协议进行传输。图片的格式必须是 .png,

.jpg, .jpeg 或者 gif。图片的最大为 200 KB， 尺寸最大为 1024 x 1024。

 
//图片的 uri 地址
<TextBox x:Name="ImageUrl" Text="http://" />

  
//使用 NotificationsExtensions 类库
<Button x:Name="UpdateTileWithWebImage" Content="Send tile notification with web images" Click="UpdateTileWithWebImage_Click" />           

             
//使用模版自定义字的符串
 <Button x:Name="UpdateTileWithWebImageWithStringManipulation" Content="Send tile notification created with strings" 
                                Click="UpdateTileWithWebImageWithStringManipulation_Click"/>

 //清除 tile
 <Button x:Name="ClearTile" Content="Clear tile" Click="ClearTile_Click"/>

 
       //使用 NotificationsExtensions 类库
       void UpdateTileWithWebImage_Click(object sender, RoutedEventArgs e)
        {
            ITileWideImageAndText01 tileContent = TileContentFactory.CreateTileWideImageAndText01();

            tileContent.TextCaptionWrap.Text = "This tile notification uses web images.";

            //重要:
            //在工程清单中，Internet (Client) 功能必须选中（在 Capabilities 选择卡中），从而
            //可以显示服务器端的图片（通过  http:// 或者 https://  协议）
              tileContent.Image.Src = ImageUrl.Text;
            tileContent.Image.Alt = "Web image";

           ITileSquareImage squareContent = TileContentFactory.CreateTileSquareImage();

            squareContent.Image.Src = ImageUrl.Text;
            squareContent.Image.Alt = "Web image";

             tileContent.SquareContent = squareContent;
            
            TileUpdateManager.CreateTileUpdaterForApplication().Update(tileContent.CreateNotification());

      }

 4、Send badge notification :

    本示例是讲述如何发送 badge 通知。

    Badge notifications 使用一个数字 或者 系统提供的图形 来更新你的应用的 tile。Badges 通知可以同时在 方形或者 宽形

 的 tile 上面显示。

      三个按钮:

   更新接收更新,输入的数字 的文本框:

    显示结果：

更新接收更新,选择输入的图案 的下拉框:

显示结果：

     

  前端的 xaml ：

// 用 数字 更新 tile
  <TextBox x:Name="NumberInput" Text="1" />

// 用 图案 更新 tile
<ComboBox x:Name="GlyphList">
                            <ComboBoxItem x:Name="none">none</ComboBoxItem>
                            <ComboBoxItem x:Name="activity">activity</ComboBoxItem>
                            <ComboBoxItem x:Name="alert">alert</ComboBoxItem>
                            <ComboBoxItem x:Name="available">available</ComboBoxItem>
                            <ComboBoxItem x:Name="away">away</ComboBoxItem>
                            <ComboBoxItem x:Name="busy">busy</ComboBoxItem>
                            <ComboBoxItem x:Name="newMessage">newMessage</ComboBoxItem>
                            <ComboBoxItem x:Name="paused">paused</ComboBoxItem>
                            <ComboBoxItem x:Name="playing">playing</ComboBoxItem>
                            <ComboBoxItem x:Name="unavailable">unavailable</ComboBoxItem>
                            <ComboBoxItem x:Name="error">error</ComboBoxItem>
                            <ComboBoxItem x:Name="attention">attention</ComboBoxItem>
                        </ComboBox>


//使用 NotificationsExtensions 类库 
 <Button x:Name="UpdateBadge" Content="Send badge 
           notification" Click="UpdateBadge_Click" />
                   
//使用模版自定义字的符串
 <Button x:Name="UpdateBadgeWithStringManipulation" 
           Content="Send badge notification created with strings" Click="UpdateBadge_Click" /> 

//清除 tile
<Button x:Name="ClearBadge" Content="Clear badge" 
           Click="ClearBadge_Click" />

1）用数字更新 ：

    //使用 NotificationsExtensions 类库       
      void UpdateBadge_Click(object sender, RoutedEventArgs e)
        {
                int number;
                if (Int32.TryParse(NumberInput.Text, out number))
                {
                    //使用 NotificationsExtensions 类库
                       BadgeNumericNotificationContent badgeContent = 
                                   new BadgeNumericNotificationContent((uint)number);

                     // 用 数字 更新 tile            
                     BadgeUpdateManager.CreateBadgeUpdaterForApplication().Update(badgeContent.CreateNotification());                      
                  }
                  else
                  {
                    //用户输入的不是数字  不会更新
                    }
            
           }

       //使用模版自定义字的符串
       void UpdateBadge_Click(object sender, RoutedEventArgs e)
        {          
           int number;
           if (Int32.TryParse(NumberInput.Text, out number))
          {
               // 用 badge 的 xml 模版创建字符串                  
               string badgeXmlString = "<badge value='" + number + "'/>";
               Windows.Data.Xml.Dom.XmlDocument badgeDOM = new Windows.Data.Xml.Dom.XmlDocument();
               try
               {
                   // 创建 DOM
                   badgeDOM.LoadXml(badgeXmlString);

                   //  定义图块徽标覆盖的更新的内容、关联元数据和事件以及过期时间。
                   //徽章可以显示从 1 到 99 的数字或 状态标志符号。
                      BadgeNotification badge = new BadgeNotification(badgeDOM);


                  // CreateBadgeUpdaterForApplication() : 创建并初始化 BadgeUpdater 的新实例，此操作可让您更改调用应用程序图块上的徽章外观或内容。  
                   BadgeUpdateManager.CreateBadgeUpdaterForApplication().Update(badge);               
            
                  // 返回 XML 表示形式及其所有子代。
                    string strXML =  badgeDOM.GetXml();
                 }
                 catch (Exception)
                 {
                    //输入的不是有效的 badge 的 xml 模版
                    }
            }
            else
            {
                 // 用户输入的不是数字  不会更新
              }
        }

       //清除 badge
        void ClearBadge_Click(object sender, RoutedEventArgs e)
        {
            BadgeUpdateManager.CreateBadgeUpdaterForApplication().Clear();
         }

2） 用符号更新 badge ：

  
   //使用 NotificationsExtensions 类库
   void UpdateBadge_Click(object sender, RoutedEventArgs e)
   {
        //注意:这通常会创建新的BadgeGlyphNotificationContent(GlyphValue.Alert)或任何GlyphValue的值(GlyphValue.Alert) or any of the values of GlyphValue
       BadgeGlyphNotificationContent badgeContent = new BadgeGlyphNotificationContent((GlyphValue)GlyphList.SelectedIndex);

      BadgeUpdateManager.CreateBadgeUpdaterForApplication().Update(badgeContent.CreateNotification());
   }

    //使用模版自定义字的符串
     void UpdateBadge_Click(object sender, RoutedEventArgs e)
        {
           // 用 badge 的 xml 模版创建字符串
            string badgeXmlString = "<badge value='" + ((ComboBoxItem)GlyphList.SelectedItem).Content.ToString() + "'/>";
            Windows.Data.Xml.Dom.XmlDocument badgeDOM = new Windows.Data.Xml.Dom.XmlDocument();
            try
            {
                // 创建 DOM
                badgeDOM.LoadXml(badgeXmlString);

                //把 xml 字符串 加载到 xml 中,并且捕捉非法的 xml 字符
                  BadgeNotification badge = new BadgeNotification(badgeDOM);

               BadgeUpdateManager.CreateBadgeUpdaterForApplication().Update(badge);

            }
            catch (Exception)
            {
               //  输入的不是有效的 badge 的 xml 模版
              }
         }

注: badge 中图形的值 :

      // 在  NotificationsExtensions  的扩展库中

       /// <summary>
        /// The types of glyphs that can be placed on a badge.
        /// </summary>
        public enum GlyphValue
        {
            /// <summary>
            /// No glyph.  If there is a numeric badge, or a glyph currently on the badge,
            /// it will be removed.
            /// </summary>
            None = 0,
            /// <summary>
            /// A glyph representing application activity.
            /// </summary>
            Activity,
            /// <summary>
            /// A glyph representing an alert.
            /// </summary>
            Alert,
            /// <summary>
            /// A glyph representing availability status.
            /// </summary>
            Available,
            /// <summary>
            /// A glyph representing away status
            /// </summary>
            Away,
            /// <summary>
            /// A glyph representing busy status.
            /// </summary>
            Busy,
            /// <summary>
            /// A glyph representing that a new message is available.
            /// </summary>
            NewMessage,
            /// <summary>
            /// A glyph representing that media is paused.
            /// </summary>
            Paused,
            /// <summary>
            /// A glyph representing that media is playing.
            /// </summary>
            Playing,
            /// <summary>
            /// A glyph representing unavailable status.
            /// </summary>
            Unavailable,
            /// <summary>
            /// A glyph representing an error.
            /// </summary>
            Error,
            /// <summary>
            /// A glyph representing attention status.
            /// </summary>
            Attention
        }