原文:快速构建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. Visual Studio 原生开发的10个调试技巧(二)

    原文:Visual Studio 原生开发的10个调试技巧(二) 我以前关于 Visual Studio 调试技巧的文章引起了大家很大的兴趣,以至于我决定分享更多调试的知识.以下的列表中你可以看到写原 ...

  2. IOS总结_IOS经常使用的方法集合、调用系统电话、设备区分、APP内永不锁屏

    调用系统打电话的功能 打电话功能仅仅有iPhone支持,对于其它设备相应button应该禁用. //直接调用系统电话呼叫功能,挂断电话后不能回到应用程序 [UIApplication sharedAp ...

  3. 三种字符编码:ASCII、Unicode和UTF-8

    原文:三种字符编码:ASCII.Unicode和UTF-8 什么是字符编码? 计算机只能处理数字,如果要处理文本,就必须先把文本转换为数字才能处理.最早的计算机在设计时采用8个比特(bit)作为一个字 ...

  4. Oracle数据表被drop后的恢复

    对于被drop的表和索引,都会存放在回收站中(所以对于生产的数据库必须设置好回收站功能) 由于本次生成环境在drop掉已有的表后,又一次创建了很多的表,全部直接还原的话会提示原有对象存在,表名反复.当 ...

  5. AndroidUI组件之TabHost

    package com.gc.tabhost; /** * @author Android将军 * * * * 1.TabHost是一种非常有用的组件,TabHost能够非常方便地在窗体上放置 * 多 ...

  6. Android的相关的源代码的方法

    这里给大家介绍一个非常方便的相关法源代码. 1.打开Android SDK Manager.把你所使用的版本号的API给下载下来,例如以下图所看到的... 2.关联源代码时,将源代码关联到相应API的 ...

  7. 开发并调试 Mail Add-in

    开发并调试 Mail Add-in (mail app for Outlook) 准备工作 如果你的邮箱搭建在 Exchange Server 上,则可以创建邮件应用程序(Mail Add-in)来扩 ...

  8. 【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 * ...

  9. ODP.NET 之访问 Oracle 数据库

    ODP.NET 之访问 Oracle 数据库 要相使用 Oracle Data Provider For .NET(ODP.NET), 必须先安装 ODP.NET 或者是 ODAC(Oracle Da ...

  10. ASP.NET MVC+EF框架+EasyUI实现权限管理系列(10)- VSS源代码管理

    原文:ASP.NET MVC+EF框架+EasyUI实现权限管理系列(10)- VSS源代码管理 ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇)   (1):框架搭建    ( ...