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

    IE9 Beta发布了,Windows Phone Developer Tools RTW也来了,开发者和发烧友又有得忙活了。园子里好多朋友已经开始了研究,包括马宁、张欣、Jake、randylee、chenkai等等,我也来加入吧。

    刚刚安装了Windows Phone Developer Tools RTW,其中UI方面一些新特性,包括Bing Maps Silverlight Control for Windows PhonePanorama Control for Windows PhonePivot Control for Windows Phone。这次就来实践一下Pivot控件。

    首先,关于Pivot控件的介绍,大家可以参考《UI Design and Interaction Guide for Windows Phone 7-v2.0》这个文档。之前,园子里的几个朋友在WPMind站长小指的撮合下,对该文档的第一版联合进行了翻译,大家可以去http://www.wpmind.com/上下载。

枢轴(Pivot)控件提供了一种快速的方式来管理应用中的视图或页面。枢轴可以用来过滤大的数据集,浏览多个数据集,或者切换应用视图。枢轴控件水平并且相邻放置独立的视图,同时管理左侧和右侧的导航。可以通过Flick或者Pan手势来推动枢轴控件。

    程序设计时,对于的Pivot考虑:

  • 应用程序应该使得pivot页最少。
  • pivot页面的内容由应用程序定义。
  • pivot页面是循环的。
  • pivot页面不能覆盖水平pan和水平flick功能,因为它与枢轴控件的交互设计相冲突。
  • pivot标题文字的长度没有限制。显示文字的数量受制于枢轴控件的宽度。
  • pivot标题高度固定,不能改变。
  • 枢轴控件应该只用来显示相同类型的条目或者数据。
  • 该控件不应该用来做任务流程。不同的页面应该在外观方面具备无缝切换。页面不应该极大地改变用户的活动。
  • 枢轴控件应该少使用,在适当情况下才使用。
  • 在用户没有可能添加信息的情况下,一个空的pivot页应该被删除。

    下面我们来演示如何在应用程序中加入pivot控件。

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

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

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

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

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

<!--Pivot item three.-->      <controls:PivotItem Header="item3">         <Grid/>      </controls:PivotItem>

5.为Pivot Item添加控件和内容。为第一个PivotItem添加TextBlock control,代码如下:

<Grid>     <!--Added textbox control with formatted text.-->     <TextBlock        TextWrapping="Wrap"        Style="{StaticResource PhoneTextLargeStyle}">        <Run>This is a simple sample for the pivot control adding text.</Run>        <LineBreak/>        <LineBreak/>        <Run>You can put any content you want here...</Run>   </TextBlock> </Grid>

为第二个PivotItem添加背景图片和文字,代码如下:

<!--Added background image and text content.-->     <Border         BorderBrush="{StaticResource PhoneForegroundBrush}"         BorderThickness="{StaticResource PhoneBorderThickness}">              <Grid>                  <Image                     Source="PanoramaBG.png"                     Stretch="UniformToFill"/>                  <TextBlock                     Text="Here is some generic content to take up space."                     TextWrapping="Wrap"                     Style="{StaticResource PhoneTextExtraLargeStyle}" />             </Grid>      </Border>

为第三个PivotItem添加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"

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

附上源代码:PivotDemo.zip

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

参考链接:

Pivot Control for Windows Phone

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

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

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Hongten

python开发_tkinter_单选按钮

E | hongtenzone@foxmail.com  B | http://www.cnblogs.com/hongten

31720
来自专栏葡萄城控件技术团队

如何将GridViewEX升级到UWP(Universal Windows Platform)平台

引言 上一篇文章中,我们主要讲解了如何在保证GridView控件的用户体验基础上,扩展GridView生成GridViewEx控件,增加动态添加新分组功能等,本...

23780
来自专栏林德熙的博客

win10 uwp 改变鼠标 设置光标移动鼠标

经常在应用需要修改光标,显示点击、显示输入,但是有些元素不是系统的,那么如何设置鼠标? 本文主要:UWP 设置光标,UWP 移动鼠标

17010
来自专栏逆向技术

win32程序之子窗口编程

  在前边我们已经讲解了窗口的本质.以及如何注册窗口类跟创建窗口. 还讲了消息循环.

26720
来自专栏施炯的IoT开发专栏

《101 Windows Phone 7 Apps》读书笔记-Weight Tracker

课程内容 Ø Charts & Graphs     你平时关注自己的体重吗?Weight Tracker使得你可以随时跟踪自己的体重,并且提供几种体重发展趋...

20880
来自专栏我和未来有约会

从Flash到Silverlight进阶教程-用代码来创建动画

从Flash到Silverlight进阶教程 用代码来创建动画 这节里将要讲述一个自定义用户控件最基本的操作,就好象Flash中的MovieClips一样,动态...

38850
来自专栏王大锤

IOS开发中滑动页面时NSTimer停止的问题

41990
来自专栏Android群英传

Lottie踩坑记

类似这样的组件,我们应该用的很多,比如一些开关Switch,一些状态切换,比如Toggle button,这些组件我们要设置动画,就可以借助Lottie来做一些...

32710
来自专栏张善友的专栏

JQuery相关资料

将SEO,WEB标准与AJAX进行到底 - JQuery(翻译+学习总结) jQuery——JavaScript冲击波 《15天漫游jQuery》 小试牛刀——...

22480
来自专栏跟着阿笨一起玩NET

C#自定义开关按钮控件--附带第一个私活项目截图

进入智能手机时代以来,各种各样的APP大行其道,手机上面的APP有很多流行的元素,开关按钮个人非常喜欢,手机QQ、360卫士、金山毒霸等,都有很多开关控制一些操...

31210

扫码关注云+社区

领取腾讯云代金券