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

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

2012年04月11日 ⁄ 综合 ⁄ 共 2568字 ⁄ 字号 评论关闭

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

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

 

ExpanderView

 

概述

ExpanderView是由头部和可折叠的下拉项组成的控件。当用户点击头部时,ExpanderView将折叠或者打开。ExpanderView本身是一个简单的HeaderedItemsControl,提供了大量的属性和事件用于控制下拉项的打开和折叠功能。

wps_clip_image-24739

 

准备

开始使用ExpanderView必须先在你的项目中添加引用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中创建ExpanderView实例

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

wps_clip_image-29097

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

  • 在C#/VB中创建ExpanderView控件实例:只需要添加如下代码

wps_clip_image-8887

 

主要属性

Expander

Expander Object类型属性,获取或设置expander对象

示例:

wps_clip_image-32734

wps_clip_image-355

左边为折叠状态,后边为打开状态

ExpanderTemplate

ExpanderTemplate  DataTemplate类型属性,获取或设置该控件expander的模板

HasItems

HasItems bool类型属性,获取或设置一个bool值,该值表示ExpanderView是否包含子项目

IsExpanded

IsExpanded  bool类型属性,获取或设置一个bool值,该值表示ExpanderView是否打开。

IsNonExpandable

IsNonExpandable bool类型属性,获取或设置一个bool值,该值表示ExpanderView是否是非扩展的。

NonExpandableHeader

NonExpandableHeader  object类型属性,获取或设置当ExpanderView为非扩展的,头部显示的对象。

示例:

wps_clip_image-13334

wps_clip_image-12206

NonExpandableHeaderTemplate

NonExpandableHeaderTemplate DataTemplate类型属性,获取或设置当ExpanderView为非扩展时,头部的数据模板。

 

主要事件

Expanded

在ExpanderView打开显示内容时触发

示例:
wps_clip_image-5506

Collapsed

在ExpanderView折叠并隐藏内容时触发

示例:

wps_clip_image-24352

 

ExpanderView数据绑定

下面的示例将演示如何使用数据绑定填充ExpanderView,我们将为比萨店实现一个很简单的可折叠菜单,在折叠状态下显示不同种类的比萨饼,在打开状态显示详细的配料信息

定义数据源

下面是创建数据源的步骤:

第一步:定义数据/业务类

首先定义一个名为“CustomPizza"的数据类,包含如下属性:

wps_clip_image-16933

wps_clip_image-1509

PizzaOption类如下:

wps_clip_image-12010

第二步:创建一个图片文件夹并添加一些图片

wps_clip_image-26369

第三步:创建项为CustomPizza类型的集合

wps_clip_image-13689

wps_clip_image-30025

 

ExpanderView数据绑定

首先我们需要在页面资源中添加必要的数据模板

第一步:在页面资源中定义RelativeTimeConverter,我们用它将“AddedDate”值转换为合适的字符(如:08/08/2011将转换为“one month ago”)

wps_clip_image-12027

第二步:在页面资源中定义一个自定义HeaderTemplate

wps_clip_image-574

第三步:在页面资源中定义一个自定义的ExpanderTemplate

wps_clip_image-16163

第四步:在页面资源中定义一个自定义的ItemTemplate

wps_clip_image-32025

第五步:在页面资源中定义一个自定义的NonExpandableHeaderTemplate

wps_clip_image-23354

第六步:在XAML中添加一个ListBox,用来使用ExpanderView控件显示CustomPizza对象的集合。在ItemTemplate中将 “CustomPizza”绑定到ExpanderView,代码如下:

wps_clip_image-22273

wps_clip_image-18074

第七步:设置ListBox的ItemsSource属性

wps_clip_image-7855

下面是最终运行结果:

wps_clip_image-29378

打开/折叠全部示例

这个示例将演示如何打开/折叠上面示例中所有的ExpanderViews,注意ListBox的每一项都是ExpanderViews。

第一步:添加两个用于打开/折叠全部项的按钮

wps_clip_image-24742

第二步:添加如下方法,用于打开/折叠ExpanderViews

wps_clip_image-7077

第三步:在后台代码中,添加 “btnExpand”单击事件

wps_clip_image-26751

第四步:在后台代码中,添加  “btnCollapse”单击事件

wps_clip_image-24030

 

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

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

 

致谢:在翻译过程中园内的许多朋友给予了鼓励与支持,在此衷心的感谢!您的鼓励与支持是我翻译的最大动力,如您有任何意见可以直接在评论中发表,我会认真回复!再次感谢大家!

【上篇】
【下篇】

抱歉!评论已关闭.