原文:
重新想象 Windows 8 Store Apps (36) - 通知: Tile 详解
重新想象 Windows 8 Store Apps (36) - 通知: Tile 详解
作者:webabcd
介绍
重新想象 Windows 8 Store Apps 之 通知
- Tile - 基本应用参见 http://www.cnblogs.com/webabcd/archive/2013/06/17/3139740.html
- Tile - 全部 Tile 模板
- Tile - 在一个 Tile 上循环显示多个 TileNotification
- Tile - 一个 app 多个 Tile
- Tile - 按计划更新 Tile 通知, 轮询服务端以更新 Tile 通知
示例
1、显示 Tile 的全部 46 种模板
Notification/Tile/AllTemplates.xaml
<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>
Notification/Tile/AllTemplates.xaml.cs
/* * 显示 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; } } }
2、演示 Tile 通知队列的应用,每个 Tile 最多可循环显示 5 个不同的 TileNotification
Notification/Tile/Queue.xaml
<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>
Notification/Tile/Queue.xaml.cs
/* * 演示 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(); } } }
3、演示如何固定多个 Tile,即 SecondaryTile 的应用
Notification/Tile/MultipleTiles.xaml
<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>
Notification/Tile/MultipleTiles.xaml.cs
/* * 演示如何固定多个 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 + " "; } } } }
App.xaml.cs
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(); } }
4、演示如何按计划显示 Tile 通知,以及如何轮询服务端以更新 Tile 通知
Notification/Tile/ScheduledTile.xaml
<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>
Notification/Tile/ScheduledTile.xaml.cs
/* * 演示如何按计划显示 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 内容通常是变化的 } } }
OK
[源码下载]