快速构建Windows 8风格应用32-构建辅助磁贴
引言
Windows Phone中，我们开发者可能会开发的一个功能点是将数据列表中某一项“Pin To Start(固定到开始屏幕)”，大家都知道这种固定到开始屏幕的磁贴叫做辅助磁贴（也叫二级磁贴），用户可以通过该辅助磁贴启动应用程序并导航到应用程序中某一个页面或某一位置。
其实Windows 8 Store风格应用程序也引入了辅助磁贴的概念，用户在使用Windows 8 Store应用的辅助磁贴和Windows Phone 辅助磁贴的体验几乎一样，但是对于开发者来说实现方式完全不一样了。
一、辅助磁贴概览
- 由应用中某些元素的“固定（Pin）”操作生成
- 应用通过简单的运行时调用启动“固定” 操作
- 用户通过系统 UI 确认“固定”操作
- 展示应用的个性化界面
- 与应用磁贴具备相同功能
- 点击磁贴则启动应用并导航到相应内容页面
另外辅助磁贴常用场景包括：
- 天气应用中特定城市的天气更新
- 日历应用中有关近期活动的摘要
- 社交应用中重要联系人的状态和更新
- RSS 阅读器中的特定源
- 音乐播放列表
- 博客
更多关于辅助磁贴介绍可参考：辅助磁贴概述（Windows 应用商店应用） (Windows)
二、辅助磁贴构建
上面对辅助磁贴进行了简单的介绍，那么我们开发者该如何在应用程序内添加构建辅助磁贴的功能呢？
1.添加Windows.UI.StartScreen 命名空间
2.添加样式资源（该步骤可根据自己实际情况是否执行）
通常我们会使用应用程序中提供StandardStyles.xaml 文件中的“固定”和“取消固定图标”样式资源。当然我们也可以自己定义相应的样式资源。
StandardStyles.xaml 文件提供的标准样式资源如下：
1: <Page.Resources>
2: <Style x:Key="PinAppBarButtonStyle" TargetType="Button" BasedOn="{StaticResource AppBarButtonStyle}">
3: <Setter Property="AutomationProperties.AutomationId" Value="PinAppBarButton"/>
4: <Setter Property="AutomationProperties.Name" Value="Pin to Start"/>
5: <Setter Property="Content" Value=""/>
6: </Style>
7: <Style x:Key="UnpinAppBarButtonStyle" TargetType="Button" BasedOn="{StaticResource AppBarButtonStyle}">
8: <Setter Property="AutomationProperties.AutomationId" Value="UnpinAppBarButton"/>
9: <Setter Property="AutomationProperties.Name" Value="Unpin from Start"/>
10: <Setter Property="Content" Value=""/>
11: </Style>
12: </Page.Resources>
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
3.添加应用栏
通常我们会在应用栏中添加“固定到开始屏幕”按钮，用户通过该按钮进行辅助磁贴的创建。
1: <Page.BottomAppBar>
2: <AppBar x:Name="SecondaryTileAppBar" Padding="10,0,10,0" >
3: <Grid>
4: <Grid.ColumnDefinitions>
5: <ColumnDefinition Width="30*"/>
6: </Grid.ColumnDefinitions>
7: <StackPanel x:Name="RightPanel" Orientation="Horizontal" Grid.Column="1" HorizontalAlignment="Right">
8: <Button x:Name="PinButton" HorizontalAlignment="Left" Click="OnPinButtonClicked" />
9: </StackPanel>
10: </Grid>
11: </AppBar>
12: </Page.BottomAppBar>
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
4.在页面的.cs文件中添加标识辅助磁贴的唯一ID变量
1: public const string appbarTileId = "SecondaryTile.AppBar";
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
5.创建判断是否存在相关辅助磁贴的方法，若存在显示UnpinAppBarButtonStyle样式资源，若不存在显示PinAppBarButtonStyle样式资源。
1: private void ToggleAppBarButton(bool showPinButton)
2: {
3: PinButton.Style = (showPinButton) ? (this.Resources["PinAppBarButtonStyle"] as Style) : (this.Resources["UnpinAppBarButtonStyle"] as Style);
4: }
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
6.创建“固定到开始”按钮点击事件
1: private async void OnPinButtonClicked(object sender, RoutedEventArgs e)
2: {
3: //当用户选择应用栏上的按钮时，会显示一个要求用户进行确认的弹出窗口。
4: //若要确保在显示弹出窗口时不取消应用栏，必须设置应用栏的 IsSticky 属性。
5: this.BottomAppBar.IsSticky = true;
6: if (SecondaryTile.Exists(appbarTileId))
7: {
8: //取消相应的辅助磁贴
9: SecondaryTile secondaryTile = new SecondaryTile(appbarTileId);
10: bool isUnpinned = await secondaryTile.RequestDeleteForSelectionAsync(GetElementRect((FrameworkElement)sender), Windows.UI.Popups.Placement.Above);
11:
12: ToggleAppBarButton(isUnpinned);
13: }
14: else
15: {
16: //辅助磁贴的一些属性才能固定辅助磁贴.
17: //•磁贴的唯一 ID
18: //•短名称
19: //•显示名称
20: //•磁贴选项
21: //•徽标图像
22: //•激活辅助磁贴时将传递到父应用程序的参数字符串
23: Uri logo = new Uri("ms-appx:///Assets/1.jpg");
24: string tileActivationArguments = appbarTileId + " was pinned at " + DateTime.Now.ToLocalTime().ToString();
25:
26: SecondaryTile secondaryTile = new SecondaryTile(appbarTileId,
27: "Secondary tile pinned via AppBar",
28: "SDK Sample Secondary Tile pinned from AppBar",
29: tileActivationArguments,
30: TileOptions.ShowNameOnLogo,
31: logo);
32: //指定前景文本颜色和小徽标。
33: secondaryTile.ForegroundText = ForegroundText.Dark;
34: secondaryTile.SmallLogo = new Uri("ms-appx:///Assets/1.jpg");
35: //调用异步方法将辅助磁贴固定。
36: //实际上这种方法不是将磁贴直接固定到“开始”屏幕，而是会显示一个要求用户允许这样做的确认提示框。
37: bool isPinned = await secondaryTile.RequestCreateForSelectionAsync(GetElementRect((FrameworkElement)sender), Windows.UI.Popups.Placement.Above);
38:
39: ToggleAppBarButton(!isPinned);
40: }
41: this.BottomAppBar.IsSticky = false;
42: }
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
7.检索之前定义的pin按钮的边界矩形，因为在固定辅助磁贴前，用户必须确认，要求对此进行确认的弹出窗口应当显示在调用固定请求的按钮旁边。
1: public Rect GetElementRect(FrameworkElement element)
2: {
3: GeneralTransform buttonTransform = element.TransformToVisual(null);
4: Point point = buttonTransform.TransformPoint(new Point());
5: return new Rect(point, new Size(element.ActualWidth, element.ActualHeight));
6: }
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
到此为止我们可以通过以上步骤实现一个辅助磁贴的构建了。
三、示例的运行效果
运行应用程序，弹出应用栏，点击“Pin To Start”按钮弹出窗口。
点击“固定到‘开始’屏幕”按钮之后，我们在开始屏幕上就可以看到相应创建的辅助磁贴。
当我们在回到应用程序，就看到应用栏按钮发生了变化。
点击“Unpin form Start”按钮之后，弹出“从‘开始’屏幕取消固定”的窗口，我们点击按钮之后就把相应的辅助磁贴取消了。
更多关于辅助磁贴开发资料可参考：
1.辅助磁贴概述（Windows 应用商店应用） (Windows)
2.快速入门：固定辅助磁贴（使用 C#/VB/C++ 和 XAML 的 Windows 应用商店应用） (Windows)
3.快速入门：如何向辅助磁贴发送通知（使用 C#/VB/C++ 和 XAML 的 Windows 应用商店应用） (Windows)
快速构建Windows 8风格应用32-构建辅助磁贴的更多相关文章
- 快速构建Windows 8风格应用15-ShareContract构建
原文:快速构建Windows 8风格应用15-ShareContract构建 本篇博文主要介绍共享数据包.如何构建共享源.如何构建共享目标.DataTransferManager类. 共享数据包 Da ...
- 快速构建Windows 8风格应用13-SearchContract构建
原文:快速构建Windows 8风格应用13-SearchContract构建 本篇博文主要介绍如何在应用中构建SearchContract,相应的原理已经在博文<快速构建Windows 8风格 ...
- 快速构建Windows 8风格应用17-布局控件
原文:快速构建Windows 8风格应用17-布局控件 本篇博文主要介绍三种常用的布局控件:Canvas.Grid.StackPanel. Panel类是开发Windows 8 Store应用中一个重 ...
- 快速构建Windows 8风格应用14-ShareContract概述及原理
原文:快速构建Windows 8风格应用14-ShareContract概述及原理 本篇博文主要介绍Share Contract概述.Share Contract实现原理.实现Share Contra ...
- 快速构建Windows 8风格应用9-竖直视图
原文:快速构建Windows 8风格应用9-竖直视图 本篇博文主要介绍竖直视图概览.关于竖直视图设计.如何构建竖直视图 竖直视图概览 Windows 8为了支持旋转的设备提供了竖屏视图,我们开发的应用 ...
- 快速构建Windows 8风格应用10-设备方向
原文:快速构建Windows 8风格应用10-设备方向 本篇博文主要介绍常用支持Windows 8操作系统设备的方向.如何获取当前设备方向.DisplayProperties类. 常用支持Window ...
- 快速构建Windows 8风格应用11-语义缩放
原文:快速构建Windows 8风格应用11-语义缩放 本篇博文主要介绍为什么需要语义缩放.什么是语义缩放.如何构建语义缩放. 为什么需要语义缩放 如果用过Windows 8系统的开发者都知道在Win ...
- 快速构建Windows 8风格应用12-SearchContract概述及原理
原文:快速构建Windows 8风格应用12-SearchContract概述及原理 本篇博文主要介绍Search Contract概述.Search Contract面板结构剖析.Search Co ...
- 快速构建Windows 8风格应用7-页面视图概览
原文:快速构建Windows 8风格应用7-页面视图概览 本篇博文主要介绍Windows 8风格应用中包含哪些视图.Visual Studio 2012和模拟器中如何开发和调试不同的页面视图.页面视图 ...
随机推荐
- Notes系统安全日志
最近出现了一些不正常的操作系统,但到目前为止,只有一个粗略的验证,然而,彻底清除.对于安全日志系统中的一些总结. 1.系统登录必须先登录 该日志必须包含:登录时间.注销时间.登录ip.主机名.MAC住 ...
- C# WinForm中实现CheckBox全选反选功能
今天一群里有人问到这个功能,其实应该挺简单,但提问题的人问题的出发点并没有描述清楚.因此,一个简简单单的需求,就引起了群内热烈的讨论.下面看看这个功能如何去实现,先上效果: 下面直接上代码,请不要在意 ...
- 解决IE下Ajax请求无效
在做web开发是,大多时候都会使用FireFox作为调试的浏览器.上面携带的FireBug用来调试JavaScript实在是太方便了,绝大多数的问题都能够通过它跟踪调试出来.但是,当项目发布时,不能仅 ...
- FPGA图案--数字表示(代码+波形)
在数字逻辑系统,仅仅存在高低.所以用它只代表一个整数数字.并且有3代表性的种类.这是:原码表示(符号加绝对值值).反码表示(加-minus标志)而补码(符号加补).这三个在FPGA中都有着广泛的应用. ...
- C++ Primer 学习笔记_38_STL实践与分析（12）--集成的应用程序容器：文本查询程序
STL实践与分析 --容器的综合应用:文本查询程序 引言: 本章中最重点的实例.由于不须要用到multiset与multimap的内容.于是将这一小节提到了前面.通过这个实例程序,大师分析问题的智慧, ...
- swift新手入门视频教程-08-枚举
我自己录制的swift菜鸟入门,大家拍砖,有什么问题能够在这里留言. 主要内容: 枚举语法(Enumeration Syntax) 匹配枚举值与Swith语句(Matching Enumeration ...
- JS匿名函数&闭包
<html> <head> <title> test </title> </head> <body> <script ty ...
- 使用reserve要再次避免不必要的分配
关于STL容器,最了不起的一点是,它们会自己主动增长以便容纳下你放入当中的数据,仅仅要没有超出它们的最大限制就能够.对于vector和string,增长过程是这样来实现的:每当须要很多其它空间时 ...
- 【UVA】11137-Ingenuous Cubrency
DP问题,须要打表. dp[i][j]代表利用大小不超过i的数字组成j的方法. 状态方程是 dp[i][j] = d[i - 1][j] + sum{dp[i - 1][j - k * i * i * ...
- LevelDB初体验
近期工作须要找一个能使用磁盘存储数据,对写要求比較苛刻,须要每秒达100000TPS,读的时候须要能10000TPS左右,不能占用太多内存.单节点满足这个要求的常见有Redis.Memcached等, ...