现在的位置: 首页 > 综合 > 正文

【译】Silverlight for Windows Phone Toolkit In Depth(五)

2012年12月27日 ⁄ 综合 ⁄ 共 2648字 ⁄ 字号 评论关闭

开篇: Silverlight for Windows Phone Toolkit In Depth(一)

上一篇:Silverlight for Windows Phone Toolkit In Depth(四)

 

DatePicker

 

概述

Windows Phone Toolkit的DatePicker是一个能为你自动提供一个输入框的UI元素,当你在选择它时,选择器会显示一个表单你可以使用无限滑动的方式选择另一个日期,DatePicker 是符合Windows Phone设计规范的 UX控件。

wps_clip_image-9628

 

准备

开始使用DatePicker必须先在你的项目中添加引用Microsoft.Phone.Controls.Toolkit.dll

Note:在安装完Toolkit后你可以在下面路径找到Microsoft.Phone.Controls.Toolkit.dll

For 32-bit systems:

C:\Program Files\Microsoft SDKs\Windows

Phone\v7.1\Toolkit\Oct11\Bin\Microsoft.Phone.Controls.Toolkit.dll 

For 64-bit systems:

C:\Program Files (x86)\Microsoft SDKs\Windows

Phone\v7.1\Toolkit\Oct11\Bin\Microsoft.Phone.Controls.Toolkit.dll  

或者如果你下载了“Silverlight for Windows Phone Toolkit Source & Sample - Nov 2011.zip”,可以直接从“...\Source and Sample\Bin\”目录下找到

你可以在XAML或C#/VB中创建DatePicker实例

  • 在XAML中定义DatePicker:你需要添加如下命名空间

wps_clip_image-1183

注意:确保在你的页面声明中包含“toolkit”命名空间!你可以通过Visual Studio Toolbox, Expression Blend Designer或者手动添加。

  • 在C#/VB中创建DatePicker控件实例

wps_clip_image-12786

NOTE:如果你选择通过C#代码的方式添加DatePicker控件,不要忘记将DatePicker添加到页面容器中,如: this.ContentPanel.Children.Add(datePicker);

IMPORTANT:在DatePicker和TimePicker中正确使用ApplicationBar的图标,需要在项目的根目录下创建一个名为"Toolkit.Content"的文件夹,将图标文件复制到该文件夹。Toolkit提供了一些基本的图标文件,你可以在PhoneToolkitSample项目中找到,复制到你的项目中,它们必须命名为 "ApplicationBar.Cancel.png" 和"ApplicationBar.Check.png",并且build action 必须设置为"Content"!

wps_clip_image-12434

 

主要属性

Header

Header Object类型属性,它用来获取或设置控件的头部

示例:

wps_clip_image-12253

HeaderTemplate

HeaderTemplate DataTemplate类型属性,获取或设置控件头部显示的模板

PickerPageUri

PickerPageUri Uri类型属性,它用来获取或设置一个Uri(用在当点击控件加载IDateTimePickerPage实例),参考下文“定制全屏幕的选择页面”,获取更多信息和示例。

Value

Value  DateTime?类型属性,获取或设置时间值

示例:

wps_clip_image-21417

ValueString

ValueString  string类型属性,获取当前选中值的字符形式

示例:

wps_clip_image-2472

ValueStringFormat

ValueStringFormat string类型属性,获取或设置当将 Value属性转换为string类型的格式化字符,获取更多关于格式化文本的信息,可以访问MSDN文档。

NOTE:格式化字符需要包含"{" 和 "}",所以在XAML中使用时,需要规避特殊字符进行转义,如ValueStringFormat="{}{0:d}" .

NOTE: DatePicker默认的ValueStringFormat是"{}{0:d}",这意味着在美国文化里将显示为15/12/2010.

 

主要事件

ValueChanged

在Value属性发生改变时触发

示例:

wps_clip_image-12338

 

定制全屏幕的选择页面

你可以这样来定制全屏幕的选择页面,设置DatePicker.PickerPageUri或者TimePicker.PickerPageUri属性,导航到一个实现了IDateTimePickerPage接口的 PhoneApplicationPage。IDateTimePickerPage是为DatePicker/TimePicker 设计的接口,用来与选择页面进行交互。它仅包含一个属性:

wps_clip_image-7411

我们来创建一个简单的方案,使用自定义页面重置DatePicker的选中值为DateTime.Now。下面是步骤:

第一步:在你的项目添加Windows Phone Partial Page,并且重命名为"CustomPage".

第二步:在后台代码中实现IDateTimePickerPage接口,代码如下:

wps_clip_image-18373

第三步:然后在"CustomPage"中添加一个按钮

wps_clip_image-32132

第四步:下一步是添加一些代码实现将DatePicker当前选中值设置为 DateTime.Now.

wps_clip_image-23894

第五步:设置PickerPageUri为"/DatePickerDemo;component/CustomPage.xaml"

wps_clip_image-4000

第六步:运行结果

wps_clip_image-17589

上面就是实现一个定制的全屏选择页面。如果你运行这个示例,你将会发现当你选择DatePicker时,我们新建的CustomPage就会出现。然后如果你点击按钮,NavigationService.GoBack()将被执行,DatePicker的值将被更新为当前时间。如此简单的你就实现了定制的全屏幕选择页面,当然你可以添加任何你喜欢的方式。

声明:本人英语水平有限,翻译有不当的地方还望指正,所有翻译均是理解性翻译,与原文不一定相符,出现错误翻译不当,以原文为准,英文好的建议直接阅读英文原版(也不是太难),版权归原作者所有。转载此文请注明文章出处和作者。

英文原版(第二版)下载地址:http://www.windowsphonegeek.com/WPToolkitBook2nd

抱歉!评论已关闭.