21、磁贴和磁贴通知（tile）（下）

1、Preview all tile notification templates ：

本示例展示了 NotificationsExtensions 类库中的所有 tile 的展示方式, 具体自行参考 App tiles and badges sample 工程的

第五个示例:

2、Enable notification queue and tags :

windows 系统最多可以保存 5 个 notification，前提是应用被设置为 enabled, 并且这些它们会循环播放。 Notifications 会根据放入的时间被保存在一个 FIFO （first in ，first out）队列中。应用程序是不可以控制这些 notification

的显示顺序和动作时间的。一个新的 notification 总是会被立即显示。

当用户处于离线状态时,最多 5 个推送通知会被微软保存, 当用户处于联网状态时会被送达。这些未送达的通知也符合上面描述的FIFO队列和下面描述的关于 tag 的逻辑。

Tags ( 应用指定的一些字符串) 可以用来替换指定的 notifications。如果 notification 队列可以使用，未加标签的通知将以 FIFO 顺序放入队列。一个被标记的通知将取代排队中有相同标签的通知。在队列中, 处于同一时刻时,不会有两个相同的 tag。

标签是被从云端限于用文字-数字式的字符集。

下图两个按钮是设置启用/禁用 notification queue ：

xaml ：

// 启用  notification que 
<Button x:Name="EnableQueue" Content="Enable notification queue" Click="EnableNotificationQueue_Click"/>

//禁用  notification que           
 <Button x:Name="DisableQueue" Content="Disable notification queue" Click="DisableNotificationQueue_Click"/>

对应的 C# ：

       //启用 
        void EnableNotificationQueue_Click(object sender, RoutedEventArgs e)
        {
            // 启用通知队列——在你的应用程序的生命周期中，这只需要调用一次
            TileUpdateManager.CreateTileUpdaterForApplication().EnableNotificationQueue(true);            
        }

       //禁用
        void DisableNotificationQueue_Click(object sender, RoutedEventArgs e)
        {
            TileUpdateManager.CreateTileUpdaterForApplication().EnableNotificationQueue(false);            
        }

下图是指定一个 tile 的 tag 为 a ，并对该 tile 进行更新：

点击更新 tile 按钮（Send tile notification with a tag） :

xaml ：

// 更新 tile
 <Button x:Name="UpdateTile" Content="Send tile notification 
                           with a tag" Click="UpdateTile_Click"/>

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

对应的 C# ：

      //更新 tile 。 本示例引用了 NotificationsExtensions  类库
        void UpdateTile_Click(object sender, RoutedEventArgs e)
        {
            ITileWideText03 tileContent = TileContentFactory.CreateTileWideText03();
            tileContent.TextHeadingWrap.Text = TextContent.Text;

            ITileSquareText04 squareTileContent = TileContentFactory.CreateTileSquareText04();
            squareTileContent.TextBodyWrap.Text = TextContent.Text;
            tileContent.SquareContent = squareTileContent;

            TileNotification tileNotification = tileContent.CreateNotification();

          // 如果在文本框中没有输入 tag ，则默认为 “TestTag01”
            string tag = "TestTag01";  
            if (!Id.Text.Equals(String.Empty))
            {
                tag = Id.Text;
            }
            
            // 把 tag 的值赋值给该 tile
            tileNotification.Tag = tag;
            TileUpdateManager.CreateTileUpdaterForApplication().Update(tileNotification);
            
        }

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

3、Use notification expiration ：

本示例演示的是，给 notifications 设置一定的时间（expiration），只有经过了指定的时间后，相应的信息才会显示在 tile 上面。

推送的、周期的、指定日期的 notifications 有一个默认的 3天的过期时间。从你的应用程序本地发送的 notification 在默认情况下不会过期。你可以使用任意的合法的时间和日期重写默认的。你的应用程序应该设置过期时间给每个通知相对应的有效生命周期。例如，一个设置过期时间为一天的 notification ，在一天后将被移除从而用户不会再看到这个通知。如果应用程序在一个 notification 过期后，没有其它的 notification ，则应用程序会显示在程序清单文件中指定的默认的图片。

如图，在文本框中输入 3 ，点击按钮后，三秒后 tile 的信息则被移除：

三秒钟后，恢复默认。

页面中的 xaml ：

//文本框中输入过期时间
 <TextBox x:Name="Time" Text="" Margin="5,0,0,0" Width="200"/>


// 更新 tile 
<Button x:Name="UpdateTileExpiring" Content="Send tile notification with an expiration date" 
                              Click="UpdateTileExpiring_Click"/>

对应的 C# ：

       void UpdateTileExpiring_Click(object sender, RoutedEventArgs e)
        {
            int seconds;
           //如果文本框中没有输入合法的数字 则默认为 10
            if (!Int32.TryParse(Time.Text, out seconds))
            {
                seconds = 10;
            }

           // 操作给定日历和时钟内的日期和时间的表示。
            Windows.Globalization.Calendar cal = new Windows.Globalization.Calendar();
           
          // 将此 Calendar 对象的组件设置为当前日期和时间。
            cal.SetToNow();
            
            // 递增或递减秒。
             cal.AddSeconds(seconds);

            var longTime = new Windows.Globalization.DateTimeFormatting.DateTimeFormatter("longtime");

           // 生成日期和时间，给出此 Calendar 对象的组件。
            DateTimeOffset expiryTime = cal.GetDateTime();
            string expiryTimeString = longTime.Format(expiryTime);

            ITileWideText04 tileContent = TileContentFactory.CreateTileWideText04();
            tileContent.TextBodyWrap.Text = "This notification will expire at " + expiryTimeString;

            ITileSquareText04 squareTileContent = TileContentFactory.CreateTileSquareText04();
            squareTileContent.TextBodyWrap.Text = "This notification will expire at " + expiryTimeString;
            tileContent.SquareContent = squareTileContent;

            TileNotification tileNotification = tileContent.CreateNotification();

            //  应移除通知的日期和时间。
            tileNotification.ExpirationTime = expiryTime;
            TileUpdateManager.CreateTileUpdaterForApplication().Update(tileNotification);

   }

4、Image protocols and baseUri ：

本示例讲述引用图片的一些方法。 windows 操作系统支持多种引用图片的协议，包括本地的 pc 、远处的服务。一个

baseUri 也可以提供给使用相对 uris 用于 web 图像。并且图片必须是 .png, .jpg, .jpeg 或者 .gif 格式的。最大的尺寸是

200 kb，大小在 1024 x 1024 px 以内。

ms-appx:/// :

使用 ms-appx 协议引用应用程序包（.appx package）中的图片。如果提供了本地化的、缩放的、和高对比度的资源，这些资源可以自动显示。

ms-appdata://local :

使用 ms-appdata 协议引用存储在本地文件夹 ( Windows.Storage.ApplicationData.current.localFolder)中的图片。

http:// 和 https:// :

使用 http \ https 协议，程序会下载 web 的图片。web 端的图片可以附加上查询字符串，从而可以从服务器端返回本地化的、正确缩放比的图片。一个 baseUri 可以指定在一个通知 web 图像。不完全 baseUri 将结合图像的相对路径,形成一个完整的绝对路径。

xaml ：

                 //协议选择下拉框
                      <ComboBox x:Name="ProtocolList" Width="300" SelectionChanged="ProtocolList_SelectionChanged" >
                        <ComboBoxItem x:Name="package">ms-appx:///</ComboBoxItem>
                        <ComboBoxItem x:Name="appdata">ms-appdata:///local/</ComboBoxItem>
                        <ComboBoxItem x:Name="http">http://</ComboBoxItem>
                    </ComboBox>

                  // 更新 tile 
                  <Button x:Name="SendTileNotification" Content="Send Tile 
                                Notification" Click="SendTileNotification_Click" />

对应的 C#：

  
      //使用 NotificationsExtensions 类库
       async  void SendTileNotification_Click(object sender, RoutedEventArgs e)
        {
            IWideTileNotificationContent tileContent = null;
            if (ProtocolList.SelectedItem == package) //使用  ms-appx:/// 协议
            {
                ITileWideImageAndText01 wideContent = TileContentFactory.CreateTileWideImageAndText01();

                wideContent.RequireSquareContent = false;
                wideContent.TextCaptionWrap.Text = "The image is in the appx package";
                wideContent.Image.Src = "ms-appx:///images/redWide.png";
                wideContent.Image.Alt = "Red image";

                tileContent = wideContent;
            }
            else if (ProtocolList.SelectedItem == appdata) //使用 appdata:///local/ 协议          
            {
                ITileWideImage wideContent = TileContentFactory.CreateTileWideImage();

                wideContent.RequireSquareContent = false;

                await CopyImageToLocalFolderAsync();  //把电脑上面的图片拷贝到程序路径下，并且获得其文件的路径
                wideContent.Image.Src = "ms-appdata:///local/" + this.imageRelativePath;
                wideContent.Image.Alt = "App data";

                tileContent = wideContent;
            }
            else if (ProtocolList.SelectedItem == http) //使用  http:// 协议
            {
                //注意--在程序清单文件中 需要选择 Internet(Client) 选项       
                ITileWidePeekImageCollection04 wideContent = TileContentFactory.CreateTileWidePeekImageCollection04();

                wideContent.RequireSquareContent = false;
                try
                {
                    wideContent.BaseUri = "http://www.YourWebsite.com/" ;
                }
                catch (ArgumentException exception)
                {
                   
return;
                }
                wideContent.TextBodyWrap.Text = "The base URI is " + HTTPBaseURI.Text;
                wideContent.ImageMain.Src = HTTPImage1.Text;  //图片的路径
                wideContent.ImageSmallColumn1Row1.Src = HTTPImage2.Text; //图片的路径
                wideContent.ImageSmallColumn1Row2.Src = HTTPImage3.Text; //图片的路径
                wideContent.ImageSmallColumn2Row1.Src = HTTPImage4.Text; //图片的路径
                wideContent.ImageSmallColumn2Row2.Src = HTTPImage5.Text; //图片的路径

                tileContent = wideContent;
            }

            tileContent.RequireSquareContent = false;
            TileUpdateManager.CreateTileUpdaterForApplication().Update(tileContent.CreateNotification());

            OutputTextBlock.Text = MainPage.PrettyPrint(tileContent.GetContent());
        }

        //用来把电脑中的图片拷贝到应用程序的本地存储中（localstorage）
        string imageRelativePath = String.Empty; 
        async Task CopyImageToLocalFolderAsync()
        {
                 FileOpenPicker picker = new Windows.Storage.Pickers.FileOpenPicker();
                picker.ViewMode = PickerViewMode.Thumbnail;
                picker.SuggestedStartLocation = PickerLocationId.PicturesLibrary;
                picker.FileTypeFilter.Add(".jpg");
                picker.FileTypeFilter.Add(".jpeg");
                picker.FileTypeFilter.Add(".png");
                picker.FileTypeFilter.Add(".gif");
                picker.CommitButtonText = "Copy";
                StorageFile file = await picker.PickSingleFileAsync();
                if (file != null)
                {
                    StorageFile newFile = await Windows.Storage.ApplicationData.Current.LocalFolder.CreateFileAsync(file.Name, 
                               Windows.Storage.CreationCollisionOption.GenerateUniqueName); //用为新的文件或文件夹自动生成的唯一名称创建新文件或文件夹。

                    //将指定文件替换为当前文件的副本。
                       await file.CopyAndReplaceAsync(newFile);
                    this.imageRelativePath = newFile.Path.Substring(newFile.Path.LastIndexOf("\\") + 1);
                  
                }
                else
                {
                   //  用户没有选择图片
                   }
            
           }

5、Globalization，localization,scale,and accessibility ：

这个示例演示了如何显示一个不同的图像资源基于用户的当前的定位、规模和可访问性的设置。

Windows完全支持本地化、规模和可访问性。对 web 图像和打包在程序中的文本和图像。Web 图像可以利用这些特性通过一

个查询查询字符串返回特定的图像。打包的图像和文本使用资源管理系统和不需要进一步的改变,你的应用程序已经确实对定位、规

模和可访问性。（位于 App tiles and badges sample 工程下的 Globalization.xaml 文件中，暂略）