原文:快速构建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)

4.Secondary tiles sample

快速构建Windows 8风格应用32-构建辅助磁贴的更多相关文章

  1. 快速构建Windows 8风格应用15-ShareContract构建

    原文:快速构建Windows 8风格应用15-ShareContract构建 本篇博文主要介绍共享数据包.如何构建共享源.如何构建共享目标.DataTransferManager类. 共享数据包 Da ...

  2. 快速构建Windows 8风格应用13-SearchContract构建

    原文:快速构建Windows 8风格应用13-SearchContract构建 本篇博文主要介绍如何在应用中构建SearchContract,相应的原理已经在博文<快速构建Windows 8风格 ...

  3. 快速构建Windows 8风格应用17-布局控件

    原文:快速构建Windows 8风格应用17-布局控件 本篇博文主要介绍三种常用的布局控件:Canvas.Grid.StackPanel. Panel类是开发Windows 8 Store应用中一个重 ...

  4. 快速构建Windows 8风格应用14-ShareContract概述及原理

    原文:快速构建Windows 8风格应用14-ShareContract概述及原理 本篇博文主要介绍Share Contract概述.Share Contract实现原理.实现Share Contra ...

  5. 快速构建Windows 8风格应用9-竖直视图

    原文:快速构建Windows 8风格应用9-竖直视图 本篇博文主要介绍竖直视图概览.关于竖直视图设计.如何构建竖直视图 竖直视图概览 Windows 8为了支持旋转的设备提供了竖屏视图,我们开发的应用 ...

  6. 快速构建Windows 8风格应用10-设备方向

    原文:快速构建Windows 8风格应用10-设备方向 本篇博文主要介绍常用支持Windows 8操作系统设备的方向.如何获取当前设备方向.DisplayProperties类. 常用支持Window ...

  7. 快速构建Windows 8风格应用11-语义缩放

    原文:快速构建Windows 8风格应用11-语义缩放 本篇博文主要介绍为什么需要语义缩放.什么是语义缩放.如何构建语义缩放. 为什么需要语义缩放 如果用过Windows 8系统的开发者都知道在Win ...

  8. 快速构建Windows 8风格应用12-SearchContract概述及原理

    原文:快速构建Windows 8风格应用12-SearchContract概述及原理 本篇博文主要介绍Search Contract概述.Search Contract面板结构剖析.Search Co ...

  9. 快速构建Windows 8风格应用7-页面视图概览

    原文:快速构建Windows 8风格应用7-页面视图概览 本篇博文主要介绍Windows 8风格应用中包含哪些视图.Visual Studio 2012和模拟器中如何开发和调试不同的页面视图.页面视图 ...

随机推荐

  1. 利用Ring Buffer在SQL Server 2008中进行连接故障排除

    原文:利用Ring Buffer在SQL Server 2008中进行连接故障排除 出自:http://blogs.msdn.com/b/apgcdsd/archive/2011/11/21/ring ...

  2. Android.9图片评论(一个)

    什么是.9图片 至于什么是.9图片这里就简单提一下,即图片后缀名前有.9的图片,如pic.9.png.pic1.9.jgp,诸如此类的图片就称为.9图片. .9图片的作用 ①.9图片的作用是在图片拉伸 ...

  3. hadoop-mapreduce在maptask执行分析

    MapTask执行通过执行.run方法: 1.生成TaskAttemptContextImpl实例,此实例中的Configuration就是job本身. 2.得到用户定义的Mapper实现类,也就是m ...

  4. 使用python+flask让你自己api(教程源代码)

    1.背景 ok,这可能是很多朋友和我一样经常使用的各种api,例facebook的.github的.甚至微信api.因此,很多人都想使自己的api.在线教程在这方面它是非常小的,今天,我做了一个平稳, ...

  5. Andio Studio

    坑一:layout文件中提示(见图):(关键词检索:因为百度和google的时候都没看到这个东东,只在stackoverflow上看到这个提问,但是还没人回答.希望大家可以百度到我这条) ①:Chec ...

  6. 阿里云ECSserver部署django

    highlight=uwsgi%20django">參考 server安装的是Centos 系统. uwsgi是使用pip安装的. nginx是使用yum install nginx安 ...

  7. Ansible@一个有效的配置管理工具--Ansible configure management--翻译(十)

    未经书面许可,.请勿转载 Custom Modules Until now we have been working solely with the tools provided to us by A ...

  8. hdu 4975 最大流问题解决队伍和矩阵,利用矩阵dp优化

    //刚開始乱搞. //网络流求解,假设最大流=全部元素的和则有解:利用残留网络推断是否唯一, //方法有两种,第一种是深搜看看是否存在正边权的环.见上一篇4888 //至少四个点构成的环,另外一种是用 ...

  9. thinkphp学习笔记5—模块化设计

    原文:thinkphp学习笔记5-模块化设计 1.模块结构 完整的ThinkPHP用用围绕模块/控制器/操作设计,并支持多个入口文件盒多级控制.ThinkPHP默认PATHINFO模式,如下: htt ...

  10. 现代JVM内存管理方法的发展历程,GC的实现及相关设计概述(转)

    JVM区域总体分两类,heap区和非heap区.heap区又分:Eden Space(伊甸园).Survivor Space(幸存者区).Tenured Gen(老年代-养老区). 非heap区又分: ...