重新想象 Windows 8 Store Apps (36) - 通知: Tile 详解

<Page
    x:Class="XamlDemo.Notification.Tile.AllTemplates"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XamlDemo.Notification.Tile"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="Transparent">
        <Grid.Resources>
            <Style x:Key="ItemTitleStyle" TargetType="TextBlock">
                <Setter Property="FontSize" Value="14.667"/>
            </Style>
            
            <ItemsPanelTemplate x:Key="StoreFrontGridItemsPanelTemplate">
                <WrapGrid MaximumRowsOrColumns="3" VerticalChildrenAlignment="Top" HorizontalChildrenAlignment="Left"/>
            </ItemsPanelTemplate>

            <Style x:Key="StoreFrontTileStyle"  TargetType="GridViewItem">
                <Setter Property="FontFamily" Value="Segoe UI" />
                <Setter Property="Height" Value="300" />
                <Setter Property="Width" Value="260" />
                <Setter Property="Padding" Value="0" />
                <Setter Property="Margin" Value="0" />
                <Setter Property="HorizontalContentAlignment" Value="Left" />
                <Setter Property="VerticalContentAlignment" Value="Top" />
                <Setter Property="BorderThickness" Value="0"/>
                <Setter Property="TabNavigation" Value="Local" />
            </Style>

            <DataTemplate x:Key="StoreFrontTileTemplate">
                <Grid HorizontalAlignment="Left" Background="Transparent">
                    <StackPanel Orientation="Vertical">
                        <TextBlock TextWrapping="Wrap" VerticalAlignment="Center" Text="{Binding FileName}" HorizontalAlignment="Left" />
                        <Image Source="{Binding Path}" Stretch="None" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="0,10,0,0"/>
                    </StackPanel>
                </Grid>
            </DataTemplate>
        </Grid.Resources>
        
        <!--显示 46 种不同的 Tile 模板-->
        <GridView x:Name="gridView" Margin="120 0 0 0"
            ItemTemplate="{StaticResource StoreFrontTileTemplate}"
            ItemContainerStyle="{StaticResource StoreFrontTileStyle}"
            ItemsPanel="{StaticResource StoreFrontGridItemsPanelTemplate}"
            BorderBrush="LightGray" VerticalAlignment="Top"
            ScrollViewer.VerticalScrollBarVisibility="Auto"
            ScrollViewer.HorizontalScrollBarVisibility="Auto" 
            SelectionMode="None" />
    </Grid>
</Page>

/*
 * 显示 Tile 的全部 46 种模板
 */

using System;
using System.Linq;
using Windows.ApplicationModel;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Navigation;

namespace XamlDemo.Notification.Tile
{
    public sealed partial class AllTemplates : Page
    {
        public AllTemplates()
        {
            this.InitializeComponent();
        }

        protected async override void OnNavigatedTo(NavigationEventArgs e)
        {
            // XamlDemo/Notification/Tile/TemplateDemo 文件夹内 46 张图片分别用于演示 Tile 的 46 种模板

            var folder = await Package.Current.InstalledLocation.GetFolderAsync(@"Notification\Tile\TemplateDemo");
            var files = await folder.GetFilesAsync();

            var dataSource = from p in files
                             select new
                             {
                                 FileName = p.DisplayName,
                                 Path = "ms-appx:///Notification/Tile/TemplateDemo/" + p.Name
                             };

            gridView.ItemsSource = dataSource;
        }
    }
}

<Page
    x:Class="XamlDemo.Notification.Tile.Queue"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XamlDemo.Notification.Tile"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="Transparent">
        <StackPanel Margin="120 0 0 0">

            <TextBox Name="lblMsg" Height="100" TextWrapping="Wrap" AcceptsReturn="True" FontSize="14.667" Margin="0 0 10 0" />

            <Button Name="btnSendNewTile" Content="发送一个新的 Tile 通知" Click="btnSendNewTile_Click_1" Margin="0 10 0 0" />

        </StackPanel>
    </Grid>
</Page>

/*
 * 演示 Tile 通知队列的应用，每个 Tile 最多可循环显示 5 个不同的 TileNotification，队列中的 TileNotification 按先进先出的原则维护
 * 
 * TileNotification - Tile 通知
 *     Tag - Tile 通知的标识，同一个标识代表同一个通知，不同的标识代表不同的通知，最大 16 个字符
 *     
 * TileUpdater - Tile 更新器
 *     EnableNotificationQueue() - 是否启用 Tile 的队列功能，默认是禁用的
 */

using NotificationsExtensions.TileContent;
using System;
using Windows.UI.Notifications;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Navigation;

namespace XamlDemo.Notification.Tile
{
    public sealed partial class Queue : Page
    {
        public Queue()
        {
            this.InitializeComponent();
        }

        private void btnSendNewTile_Click_1(object sender, RoutedEventArgs e)
        {
            // 生成一个随机数
            string randomString = new Random().Next(1000, 10000).ToString();

            // 构造小 tile 数据
            ITileSquareText04 squareTileContent = TileContentFactory.CreateTileSquareText04();
            squareTileContent.TextBodyWrap.Text = randomString;

            // 构造 tile 数据（包括大 tile 数据和小 tile 数据）
            ITileWideText03 tileContent = TileContentFactory.CreateTileWideText03();
            tileContent.TextHeadingWrap.Text = randomString;
            tileContent.SquareContent = squareTileContent;

            string tag = randomString;

            // 创建 TileNotification，并指定其 Tag
            TileNotification tileNotification = tileContent.CreateNotification();
            tileNotification.Tag = tag;

            // 更新指定的 TileNotification（不同的标识代表不同的通知，多个不同的通知会放到 Tile 队列循环显示，队列最多支持 5 个 TileNotification）
            TileUpdater tileUpdater = TileUpdateManager.CreateTileUpdaterForApplication();
            tileUpdater.EnableNotificationQueue(true);
            tileUpdater.Update(tileNotification);

            lblMsg.Text = "Tag: " + tag;
            lblMsg.Text += Environment.NewLine;
            lblMsg.Text += tileContent.GetContent();
        }
    }
}

<Page
    x:Class="XamlDemo.Notification.Tile.MultipleTiles"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XamlDemo.Notification.Tile"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="Transparent">
        <StackPanel Margin="120 0 0 0">

            <TextBlock Name="lblMsg" FontSize="14.667" />

            <Button Name="btnPinSecondaryTile" Content="固定一个新的 SecondaryTile" Click="btnPinSecondaryTile_Click_1" Margin="0 10 0 0" />

            <Button Name="btnUpdateAllSecondaryTiles" Content="更新全部 SecondaryTile（不包括主 Tile）" Click="btnUpdateAllSecondaryTiles_Click_1" Margin="0 10 0 0" />

            <Button Name="btnUpdateAllSecondaryTilesNotification" Content="更新全部 SecondaryTile 的 Tile 通知（不包括主 Tile）" Click="btnUpdateAllSecondaryTilesNotification_Click_1" Margin="0 10 0 0" />

            <Button Name="btnClearAllSecondaryTiles" Content="清除全部 SecondaryTile（不包括主 Tile）" Click="btnClearAllSecondaryTiles_Click_1" Margin="0 10 0 0" />

        </StackPanel>
    </Grid>
</Page>

/*
 * 演示如何固定多个 Tile，即 SecondaryTile 的应用
 * 当由 SecondaryTile 启动 app 时，相关参数的获取详见：App.xaml.cs 中的 OnLaunched() 方法
 * 
 * SecondaryTile - App 的其它 Tile
 *     TileId - SecondaryTile 的标识
 *     Arguments - 用户单击图块后，会启动应用程序，同时带着此参数
 *     ShortName - 在图块上显示的名称，其显示在整个图块的左下角
 *     DisplayName - 在所有应用程序列表中显示的名称，图块的 ToolTip 也使用此值
 *     BackgroundColor - 背景色
 *     ForegroundText - 在图块上显示的文字的颜色（Windows.UI.StartScreen.ForegroundText 枚举）
 *         ForegroundText.Dark 或 ForegroundText.Light(默认值)
 *     Logo - 徽标
 *     WideLogo - 宽徽标
 *     SmallLogo - 小徽标
 *     TileOptions - 选项（flag 枚举）
 *         None, ShowNameOnLogo, ShowNameOnWideLogo, CopyOnDeployment（用户使用同一帐户在另一台终端安装此 app 时，会自动固定此 SecondaryTile）
 *     
 *     RequestCreateAsync(), RequestCreateForSelectionAsync() - 请求固定此 SecondaryTile，将会弹出一个确认框（可以指定此确认框的显示位置）
 *     RequestDeleteAsync(), RequestDeleteForSelectionAsync() - 请求取消固定此 SecondaryTile，将会弹出一个确认框（可以指定此确认框的显示位置）
 *     UpdateAsync() - 更新此 SecondaryTile（这里不是更新 Tile 通知，而只是更新 SecondaryTile 对象的相关信息）
 *     
 *     Exists(string tileId) - 是否存在指定的 Tile（静态方法）
 *     FindAllAsync() - 获取此 app 固定到开始屏幕的所有 SecondaryTile 集合（静态方法）
 *     FindAllAsync(string applicationId) - 获取指定 app 的所有 SecondaryTile 集合（这里指定的是同一 package 内的其他 app 。注：一个 package 中可以有多个 app，但是目前无法通过商店审核）
 *     FindAllForPackageAsync() - 获取此 app 所在 package 内的所有 SecondaryTile 集合（一个 package 中可以有多个 app，但是目前无法通过商店审核）
 *     
 * 
 * TileUpdateManager - Tile 更新管理器
 *     CreateTileUpdaterForSecondaryTile(string tileId) - 为指定的 SecondaryTile 创建一个 Tile 更新器，返回 TileUpdater 类型的数据
 */

using NotificationsExtensions.TileContent;
using System;
using System.Collections.Generic;
using System.Threading.Tasks;
using Windows.UI.Notifications;
using Windows.UI.Popups;
using Windows.UI.StartScreen;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Navigation;
using XamlDemo.Common;

namespace XamlDemo.Notification.Tile
{
    public sealed partial class MultipleTiles : Page
    {
        public MultipleTiles()
        {
            this.InitializeComponent();
        }


        // 固定一个新的 SecondaryTile
        private async void btnPinSecondaryTile_Click_1(object sender, RoutedEventArgs e)
        {
            Uri logo = new Uri("ms-appx:///Assets/Logo.png"); // 方块图块的 Logo
            Uri wideLogo = new Uri("ms-appx:///Assets/WideLogo.png"); // 宽图块的 Logo
            Uri smallLogo = new Uri("ms-appx:///Assets/SmallLogo.png"); // 所有应用程序列表中的 Logo

            string tileId = new Random().Next(1000, 10000).ToString();

            // 创建一个 SecondaryTile 对象
            SecondaryTile secondaryTile = new SecondaryTile(
                tileId, 
                "ShortName",
                "DisplayName",
                "Arguments（TileId: " + tileId + "）",
                TileOptions.ShowNameOnLogo | TileOptions.ShowNameOnWideLogo | TileOptions.CopyOnDeployment,
                logo);

            // 相关属性的设置
            secondaryTile.ForegroundText = ForegroundText.Light;
            secondaryTile.SmallLogo = smallLogo;
            secondaryTile.WideLogo = wideLogo;

            // 请求固定此 SecondaryTile，并指定确认框的显示位置
            bool isPinned = await secondaryTile.RequestCreateForSelectionAsync(Helper.GetElementRect((FrameworkElement)sender), Placement.Below);

            // 显示此 App 的固定到开始屏幕的全部 SecondaryTile
            await ShowAllTilesForApplication();
        }


        // 更新全部 SecondaryTile（注：此处用于更新 SecondaryTile 对象，而不是更新 Tile 通知）
        private async void btnUpdateAllSecondaryTiles_Click_1(object sender, RoutedEventArgs e)
        {
            IReadOnlyList<SecondaryTile> tileList = await SecondaryTile.FindAllAsync();
            foreach (SecondaryTile tile in tileList)
            {
                /*
                 * 此处无法直接修改 tile 对象，只有通过 new SecondaryTile(tile.TileId) 获取到的 SecondaryTile 对象才能被修改，但是不能修改 ShortName 和 DisplayName 等参数
                 */

                SecondaryTile secondaryTile = new SecondaryTile(tile.TileId);
                secondaryTile.WideLogo = new Uri("ms-appx:///Assets/Logo.png");
                secondaryTile.Arguments = "Updated Arguments（TileId: " + tile.TileId + "）";

                // 更新此 SecondaryTile
                bool success = await secondaryTile.UpdateAsync();
            }
        }


        // 更新全部 SecondaryTile 的 Tile 通知
        private async void btnUpdateAllSecondaryTilesNotification_Click_1(object sender, RoutedEventArgs e)
        {
            IReadOnlyList<SecondaryTile> tileList = await SecondaryTile.FindAllAsync();
            foreach (var tile in tileList)
            {
                ITileWideText04 tileContent = TileContentFactory.CreateTileWideText04();
                tileContent.TextBodyWrap.Text = "hi webabcd";

                ITileSquareText04 squareContent = TileContentFactory.CreateTileSquareText04();
                squareContent.TextBodyWrap.Text = "hi webabcd";
                tileContent.SquareContent = squareContent;

                // 在指定的 SecondaryTile 上更新指定的 TileNotification
                TileNotification tileNotification = tileContent.CreateNotification();
                TileUpdater tileUpdater = TileUpdateManager.CreateTileUpdaterForApplication(tile.TileId);
                tileUpdater.Update(tileNotification);
            }
        }


        // 清除全部 SecondaryTile
        private async void btnClearAllSecondaryTiles_Click_1(object sender, RoutedEventArgs e)
        {
            IReadOnlyList<SecondaryTile> tileList = await SecondaryTile.FindAllAsync();
            foreach (var tile in tileList)
            {
                // 请求取消固定此 SecondaryTile，并指定确认框的显示位置
                bool isUnpinned = await tile.RequestDeleteForSelectionAsync(Helper.GetElementRect((FrameworkElement)sender), Placement.Below);
            }

            // 显示此 App 的固定到开始屏幕的全部 SecondaryTile
            await ShowAllTilesForApplication();
        }


        // 显示此 App 固定到开始屏幕的全部 SecondaryTile
        private async Task ShowAllTilesForApplication()
        {
            IReadOnlyList<SecondaryTile> tileList = await SecondaryTile.FindAllAsync();

            lblMsg.Text += "此 app 的全部 SecondaryTile 的 tileId 列表: ";

            foreach (var tile in tileList)
            {
                lblMsg.Text += tile.TileId + "   ";
            }
        }
    }
}

protected async override void OnLaunched(LaunchActivatedEventArgs args)
{
    /*
     * 注：当由主 Tile 启动 app 时，args.TileId 的值为 Package.appxmanifest 中 <Application Id="Win8App" /> 所配置的值
     */
    // 当由 SecondaryTile 启动 app 时，显示传递过来的参数
    if (args.TileId != "Win8App")
    {
        await new Windows.UI.Popups.MessageDialog(args.Arguments).ShowAsync();
    }
}

<Page
    x:Class="XamlDemo.Notification.Tile.ScheduledTile"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XamlDemo.Notification.Tile"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="Transparent">
        <StackPanel Margin="120 0 0 0">

            <!--显示当前 app 的全部 ScheduledTileNotification 对象列表-->
            <ListBox Name="listBox" Width="800" Height="300" HorizontalAlignment="Left">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="{Binding TileId}" VerticalAlignment="Center" />
                            <TextBlock Text="{Binding Text}" Margin="15 0 0 0" VerticalAlignment="Center" />
                            <HyperlinkButton Name="btnRemove" Content="删除此 ScheduledTileNotification" Tag="{Binding TileId}" Margin="15 0 0 0" Click="btnRemove_Click_1" />
                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>

            <Button Name="btnScheduledTile" Content="ScheduledTileNotification 的 Demo（15 秒后更新指定的 Tile 通知）" Click="btnScheduledTile_Click_1" Margin="0 10 0 0" />

            <Button Name="btnStartPeriodicUpdate" Content="启动一个“轮询服务端，而后更新 Tile”的任务" Click="btnStartPeriodicUpdate_Click_1" Margin="0 10 0 0" />

        </StackPanel>
    </Grid>
</Page>

/*
 * 演示如何按计划显示 Tile 通知，以及如何轮询服务端以更新 Tile 通知
 * 
 * ScheduledTileNotification - 按计划显示 Tile 通知
 *     Content - Tile 的内容，XmlDocument 类型的数据，只读，其需要在构造函数中指定
 *     DeliveryTime - 显示 Tile 通知的时间，只读，其需要在构造函数中指定
 *     ExpirationTime - Tile 通知的过期时间，即如果系统在此属性指定的时间到了之后还没有更新对应的 Tile 通知，那么之后也不要再更新了
 *     Id - ScheduledTileNotification 的标识
 *     Tag - Tile 通知的标识（Tile 的通知队列用），同一个标识代表同一个通知，不同的标识代表不同的通知，最大 16 个字符
 *     
 * TileUpdater - Tile 更新器
 *     AddToSchedule() - 将指定的 ScheduledTileNotification 添加到计划列表
 *     RemoveFromSchedule() - 从计划列表中移除指定的 ScheduledTileNotification
 *     GetScheduledTileNotifications() - 获取当前 app 的全部 ScheduledTileNotification 集合
 *     
 *     StartPeriodicUpdate(Uri tileContent, DateTimeOffset startTime, PeriodicUpdateRecurrence requestedInterval) - 启动一个“轮询服务端，而后更新 Tile”的任务
 *     StartPeriodicUpdateBatch(IEnumerable<Uri> tileContents, DateTimeOffset startTime, PeriodicUpdateRecurrence requestedInterval) - 启动一个“轮询服务端，而后更新 Tile”的任务
 *         tileContent - Tile 通知的内容（xml 格式数据）的 uri 地址（指定多个则会循环显示）
 *         startTime - 可以指定启动此任务的时间
 *         requestedInterval - 轮询服务端的周期（Windows.UI.Notifications.PeriodicUpdateRecurrence 枚举）
 *             HalfHour, Hour, SixHours, TwelveHours, Daily
 *     StopPeriodicUpdate() - 停止“轮询服务端，而后更新 Tile”的任务
 */

using NotificationsExtensions.TileContent;
using System;
using System.Collections.Generic;
using Windows.UI.Notifications;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Navigation;

namespace XamlDemo.Notification.Tile
{
    public sealed partial class ScheduledTile : Page
    {
        public ScheduledTile()
        {
            this.InitializeComponent();
        }

        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            ShowScheduledTiles();
        }

        // 添加指定的 ScheduledTileNotification 到计划列表中
        private void btnScheduledTile_Click_1(object sender, RoutedEventArgs e)
        {
            ITileSquareText04 squareContent = TileContentFactory.CreateTileSquareText04();
            squareContent.TextBodyWrap.Text = "ScheduledTileNotification Demo";

            ITileWideText09 tileContent = TileContentFactory.CreateTileWideText09();
            tileContent.TextHeading.Text = "ScheduledTileNotification Demo";
            tileContent.TextBodyWrap.Text = "received: " + DateTime.Now.ToString("hh:mm:ss");
            tileContent.SquareContent = squareContent;

            // 15 秒后更新指定的 Tile 通知
            ScheduledTileNotification tile = new ScheduledTileNotification(tileContent.GetXml(), DateTime.Now.AddSeconds(15));

            string tileId = new Random().Next(1000, 10000).ToString();
            tile.Id = tileId;

            // 将指定的 ScheduledTileNotification 添加进计划列表
            TileUpdater tileUpdater = TileUpdateManager.CreateTileUpdaterForApplication();
            tileUpdater.AddToSchedule(tile);

            ShowScheduledTiles();
        }

        // 显示当前 app 的全部 ScheduledTileNotification 列表
        private void ShowScheduledTiles()
        {
            List<MyScheduledTile> dataSource = new List<MyScheduledTile>();

            // 获取当前 app 计划列表中的全部 ScheduledTileNotification 对象列表
            TileUpdater tileUpdater = TileUpdateManager.CreateTileUpdaterForApplication();
            IReadOnlyList<ScheduledTileNotification> scheduledTiles = tileUpdater.GetScheduledTileNotifications();

            int tileCount = scheduledTiles.Count;
            for (int i = 0; i < tileCount; i++)
            {
                ScheduledTileNotification tile = scheduledTiles[i];

                dataSource.Add(new MyScheduledTile()
                {
                    TileId = tile.Id,
                    Text = tile.Content.GetElementsByTagName("text")[0].InnerText
                });
            }

            listBox.ItemsSource = dataSource;
        }

        // 根据 TileId 删除指定的 ScheduledTileNotification
        private void btnRemove_Click_1(object sender, RoutedEventArgs e)
        {
            string tileId = (string)(sender as FrameworkElement).Tag;

            // 获取当前 app 计划列表中的全部 ScheduledTileNotification 对象列表
            TileUpdater tileUpdater = TileUpdateManager.CreateTileUpdaterForApplication();
            IReadOnlyList<ScheduledTileNotification> scheduledTiles = tileUpdater.GetScheduledTileNotifications();

            int tileCount = scheduledTiles.Count;
            for (int i = 0; i < tileCount; i++)
            {
                if (scheduledTiles[i].Id == tileId)
                {
                    // 从计划列表中移除指定的 ScheduledTileNotification 对象
                    tileUpdater.RemoveFromSchedule(scheduledTiles[i]);

                    ShowScheduledTiles();

                    break;
                }
            }
        }

        class MyScheduledTile
        {
            public string TileId { get; set; }
            public string Text { get; set; }
        }


        // 启动一个“轮询服务端，而后更新 Tile”的任务
        private void btnStartPeriodicUpdate_Click_1(object sender, RoutedEventArgs e)
        {
            // 启动一个循环更新 Tile 的任务，并指定 Tile 内容的数据源和轮询周期
            TileUpdater tileUpdater = TileUpdateManager.CreateTileUpdaterForApplication();
            tileUpdater.StartPeriodicUpdate(new Uri("http://localhost:39629/TileContent.xml", UriKind.Absolute), PeriodicUpdateRecurrence.HalfHour);

            // Tile 内容的数据源示例参见 WebServer 项目的 TileContent.xml 文件
            // 此处仅用于演示，实际项目中此 Tile 内容通常是变化的
        }
    }
}