重新想象 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(, ).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(, ).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()); string tileId = new Random().Next(, ).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 = ; i < tileCount; i++)
{
ScheduledTileNotification tile = scheduledTiles[i]; dataSource.Add(new MyScheduledTile()
{
TileId = tile.Id,
Text = tile.Content.GetElementsByTagName("text")[].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 = ; 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
[源码下载]