快速构建Windows 8风格应用32-构建辅助磁贴

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

时间： 2024-08-28 08:10:06

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

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

原文:快速构建Windows 8风格应用13-SearchContract构建 本篇博文主要介绍如何在应用中构建SearchContract,相应的原理已经在博文<快速构建Windows 8风格应用12-SearchContract概述及原理>中阐述清楚. 如何在应用中构建SearchContract 这里以常见的构建Search Contract功能为例,具体如下: 设置应用Search权限: 我们在应用中构建SearchContract之前,需要确认应用程序具有相应的Search能力,可以

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

原文:快速构建Windows 8风格应用15-ShareContract构建 本篇博文主要介绍共享数据包.如何构建共享源.如何构建共享目标.DataTransferManager类. 共享数据包 DataPackage(数据包)是共享数据标准. 共享数据格式可以是多种的,包括文本.URI.HTML.图像等,以及更多可扩展的格式. 我们可以通过以下方法设置需要的分享数据类型: 1)  SetText():设置共享文本,例如: 可以实现效果: 2)  SetUri():设置共享Uri; 3)  Se

快速构建Windows 8风格应用35-触控输入

原文:快速构建Windows 8风格应用35-触控输入 引用 Windows 8设备通常具有多点触摸屏,用户可以同时使用多个手指来进行不同的输入交互,如点击.拖动或收缩等手势操作.另外Windows 8中将触摸.鼠标和笔/触笔交互是作为指针输入进行接收.处理和管理. 一.手势处理 首先我们来汇总一下Windows 8中常用的手势都有哪些. 1,点击:用一个手指触摸屏幕,然后抬起手指. 2,长按:用一个手指触摸屏幕并保持不动. 3,滑动:用一个或多个手指触摸屏幕并向着同一方向移动. 4,轻扫:用一

快速构建Windows 8风格应用22-MessageDialog

原文:快速构建Windows 8风格应用22-MessageDialog 本篇博文主要介绍MessageDialog概述.MessageDialog常用属性和方法.如何构建MessageDialog   MessageDialog概述 MessageDialog指的就是对话框. 对话框的命令栏中最多包含三个命令.如果我们指定任何命令,将会有一个默认命令添加到对话框中,目的是关闭对话框. 对话框弹出后界面中所有元素将在对话框下面显示,并且将会阻塞任何触摸事件直到用户进行响应对话框. 另外对话框应该

快速构建Windows 8风格应用36-商店应用发布流程

原文:快速构建Windows 8风格应用36-商店应用发布流程 引言 在发布应用之前,我们需要注册开发者账号才能够发布应用.我们可以登录https://appdev.microsoft.com/StorePortals/ 该网址进行注册开发者账号,同时我们也可以点击这里来浏览MSDN给到的开发者账号注册的详细步骤.那么注册完成开发者账号后,如何发布Windows Store 应用程序呢? Windows Store App 发布流程 1,使用Visual Studio 2012打开要上传的应用,

快速构建Windows 8风格应用23-App Bar概述及使用规范

原文:快速构建Windows 8风格应用23-App Bar概述及使用规范 本篇博文主要介绍App Bar概述.App Bar命令组织步骤.App Bar最佳实践.   App Bar概述 Windows 8 Store应用中的App Bar(应用程序工具栏)起到的作用和Windows Phone中AppBar一样.我们可以向用户提供各种操作接口,实现导航或者触发命令等. AppBar一般默认是隐藏的,也可以设置为始终可见.我们可以通过清扫屏幕上边缘或下边缘时显示AppBar,AppBar被点击

快速构建Windows 8风格应用26-本地应用数据

原文:快速构建Windows 8风格应用26-本地应用数据 本篇博文主要介绍如何获取应用的设置和文件容器.如何将数据写入设置.如何从设置中获取数据.如何删除设置中数据.如何将数据写入文件.如何从文件中获取数据. 当应用安装时,系统会为设置和文件等应用数据提供它自己的每用户数据存储.我们不需要知道这些数据存在哪里或如何存储,因为系统会负责管理物理存储工作.我们只需使用应用数据API就可以了. 本地应用数据一般用于当前设备数据的持久化,并且本地数据没有限制大小,通常情况使用本地数据存储大型数据集.

快速构建Windows 8风格应用2-创建调试应用

原文:快速构建Windows 8风格应用2-创建调试应用 本篇博文主要介绍的是创建应用时可以选择哪些模版,生成默认的Windows 8风格应用解决方案中含哪些文件,最后是如何调试Windows 8风格应用. 我们如何使用Visual Studio 2012创建Windows 8风格应用呢?可归结为以下几步: 1.选择我们要使用的开发语言,例如:JavaScript.C++.C#.Visual Basic. 2.选择项目模版,可以选择以下常用的项目模版: 1)拆分应用(Split App)模版 可

快速构建Windows 8风格应用30-应用生命周期管理

原文:快速构建Windows 8风格应用30-应用生命周期管理 引言 Windows 8 中可以启动多个应用并在其中切换,我们没有必要担心降低系统速度或消耗电池电量. 因为系统会自动挂起(有时会终止)在后台正在运行的应用.设计良好的应用可以由系统挂起.终止以及重新启动,并且这些过程看起来该应用一直在运行中. 一.原理 1.当激活了应用时,无论任何原因,系统都会发送 Activated 事件 2.每当用户切换到桌面或其他应用时,系统都会挂起你的应用,系统会发送Suspending事件 3.每当用户