Windows Phone Developer Tools RTW 新特性-Panorama控件

    昨天实践了一下Pivot控件,今天就趁热打铁,继续来看看Windows Phone Developer Tools RTW 中加入的新特性-Panorama控件。关于Panorama控件的介绍,大家可以参考MSDN上的文档:“Panorama Control for Windows Phone”,也可以浏览浏览WPMind上的中文版:《Windows Phone 7 UI设计及人机交互指南》第一版,第二版的pdf文件可以在这里下载:《UI Design and Interaction Guide for Windows Phone 7》 v2.0

Panorama控件简介

    全景视图是Windows Phone 7核心体验的一部分。标准应用(standard applications)受手机屏幕界限的局限,与标准应用不同,全景视图应用利用一个超出手机屏幕局限的长水平画布提供一种独特的方式来浏览控件、数据和服务。这些内在的动态应用利用分层的动画和内容,实现了层与层之间以不同速度平滑过渡,就和视差效果类似。当前,没有一个全景应用模板或者控件是作为标准应用平台的一部分来提供的。但是,开发者们可以利用Silverlight来创建类似的应用体验。

    全景应用的用户接口由4层类型组成:背景图片、全景标题、全景区域和全景区域标题,它们有各自独立的动作逻辑。

背景图片

    背景图片位于全景应用的最底层,由它来给出类似于杂志的体验。背景图片通常是一张全景图,它可能是应用程序最直观的部分。如何创建一个好的应用体验,我们在设计过程中,必须牢记以下因素:

  • 利用单色的背景,或者是跨度为整个全景的图片。如果你决定使用图片,从大小来考虑,你可能会使用JPG图片,但是Silverlight支持的任何UI图片类型都是可以接受的。
  • 可以使用多个图片作为背景,但是在任一时刻,只能显示其中一张。
  • 为了确保良好的程序性能,最少的加载时间,并且无需剪裁,图片大小应该在800 x 480和800 x 1024像素(高x宽)中选择。
  • 对于一个具备4个全景区域的应用,使用16 x 9的屏幕高宽比。
  • 为了提高文本的易读性,使用一个透明的黑色或者白色过滤器。
  • 在动态UI元素上,避免使用下拉阴影效果(drop-shadow effects)。
  • 使用一定比例的与panning手势相关的动作,该panning手势和顶层内容宽度与背景图片的宽度比例有关。
  • 只有背景艺术出现在应用中时,才使用动画。
  • 当用户的pan手势超出图片的宽度时,关闭并且返回可见区域。

全景标题(Panorama Title)

    全景标题是整个全景应用的标题。其目的是让用户识别该应用,无论是以何种方式进入应用,它都必须是可见的。下面是全景标题的设计建议:

  • 使用简洁的文字或者图片,例如一个logo作为全景标题。使用多个UI元素,例如一个logo加文字(或者其他UI元素)也是可以接受的。
  • 确保字体或者图片的颜色与整个背景相匹配,而且,标题的可视性不依赖于背景图片。
  • 为了保持一致性体验,在Start菜单中的应用程序名称和该标题一致。
  • 避免标题动画,或者动态改变标题的字体。
  • 使用一定比例的动作,相对于最顶层内容来说较慢,而相对于底层图片来说较快。
  • 当用户的pan手势超出图片的宽度时,关闭并且返回可见区域。

全景区域(Panorama Sections)

    全景区域是全景应用的组成部分,它封装了其他控件和内容。以下是全景区域的设计建议:

  • 最大化利用四个全景区域,确保全景应用的平滑性能。
  • 在列表或者网格内使用垂直滚动是可以接受的,但前提是它处于全景区域内,并且不同时与水平滚动出现。
  • 只要全景区域的宽度小于屏幕的宽度,垂直滚动是可以接受的。
  • 支持所有自定义控件和标准控件。
  • 与手指拖拽的移动比例相同。
  • 当用户导向到一个新的区域时,开启屏幕动画。
  • 设计全景区域的布局,使得少量的下一个全景区域可见。提供轻微的重叠,使得用户直觉地利用Pan手势来切换应用。
  • 直到该全景区域有内容要表示时,才显示该全景区域。

全景区域标题(Panorama Section Titles)

    全景区域标题是全景区域的可选部分。如果你提供标题,考虑下面的设计建议:

  • 尽管可以使用图片,最好使用简洁的文本。使用多个元素,例如一个图片加文字(或者其他UI元素)也是可以的。
  • 确保全景区域标题不依赖于背景图片。
  • 避免使用标题动画,因为标题可以移动。
  • 跨越整个区域,即使存在多个控件。
  • 当用户导向到一个新的区域时,开启屏幕动画。

Panorama控件实践

1. 开启Visual Studio 2010 Express for Windows Phone,新建C#项目,选择Windows Phone Application模板,项目名为PanoramaDemo。

2. 为项目添加新的项目,选择Windows Phone Panorama Page,命名为PanoramaPage1.xaml,如下图所示:

3.在MainPage.xaml文件中,为ContentPanel加入新的元素,代码如下:

<HyperlinkButton Content="Panorama Application Example" Height="57" HorizontalAlignment="Left" Margin="49,116,0,0" Name="hyperlinkButton1" VerticalAlignment="Top" Width="383" NavigateUri="/PanoramaPage1.xaml"/>

4.在PanoramaPage1.xaml文件中,为其加入一个新的PanoramaItem,代码如下:

<!--Panorama item three.-->        <controls:PanoramaItem Header="item3">            <Grid/>       </controls:PanoramaItem>

5.为Panorama添加背景图片,代码如下:

<!--Assigns a background image to the Panorama control.-->      <controls:Panorama.Background>         <ImageBrush ImageSource="samplePhoto.jpg"/>      </controls:Panorama.Background>

6.为Panorama Item添加控件和内容。为第一个PanoramaItem添加TextBlock control,代码如下:

<Grid> <!--This code creates two TextBlock controls and places them in a StackPanel control.-->    <StackPanel>        <TextBlock            Text="This is a text added to the first panorama item control"            Style="{StaticResource PhoneTextLargeStyle}"            TextWrapping="Wrap"/>        <TextBlock Text=" "/>        <TextBlock            Text="You can put any content you want here..."            Style="{StaticResource PhoneTextLargeStyle}"            TextWrapping="Wrap"/>    </StackPanel> </Grid>

为第二个PanoramaItem添加文字,并把方向置为水平,代码如下:

<controls:PanoramaItem       Header="item2"       Orientation="Horizontal">

<!--Assigns a border to the PanoramaItem control and background for the content section.-->      <Grid>          <Border              BorderBrush="{StaticResource PhoneForegroundBrush}"              BorderThickness="{StaticResource PhoneBorderThickness}"              Background="#80808080">              <TextBlock                  Text="This content is very wide and can be panned horizontally."                  Style="{StaticResource PhoneTextExtraLargeStyle}"                  HorizontalAlignment="Center"                  VerticalAlignment="Center" >                               </TextBlock>          </Border>       </Grid>

为第三个PanoramaItem添加ListBox,向其中写入一些string,支持垂直滚屏,代码如下:

<!--This code adds a series of string text values.--> <Grid>             <ListBox FontSize="{StaticResource PhoneFontSizeLarge}">                 <sys:String>This</sys:String>                 <sys:String>item</sys:String>                 <sys:String>has</sys:String>                 <sys:String>a</sys:String>                 <sys:String>short</sys:String>                 <sys:String>list</sys:String>                 <sys:String>of</sys:String>                 <sys:String>strings</sys:String>                 <sys:String>that</sys:String>                 <sys:String>you</sys:String>                 <sys:String>can</sys:String>                 <sys:String>scroll</sys:String>                 <sys:String>up</sys:String>                 <sys:String>and</sys:String>                 <sys:String>down</sys:String>                 <sys:String>and</sys:String>                 <sys:String>back</sys:String>                 <sys:String>again.</sys:String>                     </ListBox> </Grid>

另外,为了使ListBox控件支持多行的string,必须添加引用:

xmlns:sys="clr-namespace:System;assembly=mscorlib"

7. 编译代码,进行模拟器调试,如下图所示:

附上源代码:PanoramaDemo.rar

视频演示地址:http://v.youku.com/v_show/id_XMjA4MTk3NDQ0.html

参考链接:

Panorama Control for Windows Phone

《Windows Phone 7 UI设计及人机交互指南》第一版

《UI Design and Interaction Guide for Windows Phone 7》 v2.0

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏IMWeb前端团队

关于移动端百分比宽度的几种实现

由于移动端的设备宽度各不相同,而且因为竖屏宽度都比较小,所以一般都采用满屏的方式布局,而不像PC端的使用固定宽度居中的技术布局。既然要使用满屏,那么各种百分比技...

29990
来自专栏Android群英传

不怕搞事,自定义View云扩散效果

11120
来自专栏Coco的专栏

盒子端 CSS 动画性能提升研究

对于 Web 动画的性能问题,仅仅停留在感觉已经优化的OK之上,是不够的,想要在盒子端跑出高性能接近 60 FPS 的流畅动画,就必须要刨根问底,深挖每一处可以...

528130
来自专栏web前端教室

【0827】web零基础课-周总结(0827-0903)

- 在产品导航栏部分再次熟悉了弹出导航的设置。(position+display)

11330
来自专栏IMWeb前端团队

移动端动画方案

前言 花样直播项目客服端的动画基本已都使用web来做,总结分享一下 方案列表 css3动画 canvas 动画 播图片 gif图片 各个方案的优缺点 css3动...

21290
来自专栏纪俊的专栏

Reactjs vs. Vuejs

对于近期关注度最高的 React 和 Vue,想在这里谈谈两个框架在开发风格上的差异。Vue 升级到 2.0 之后新增了很多 React 原有的特性,我的理解是...

4K00
来自专栏Hongten

pygame系列_游戏中的事件

当玩家按下键盘上的:上,下,左,右键的时候,后台会打印出玩家所按键的数字值,而图形会随之移动

18130
来自专栏项勇

笔记59 | Android管理音频焦点的学习

32390
来自专栏Material Design组件

一些iOS知识

35280
来自专栏MixLab科技+设计实验室

App之可点击元素的设计

hi,这是系列文章:App之xxx的第3篇,前2篇我总结了 App之“文字”的设计技巧 App之底部导航栏的设计 直接点击可以查阅以上2篇文章。 我为什么写这个...

34270

扫码关注云+社区

领取腾讯云代金券