开篇: Silverlight for Windows Phone Toolkit In Depth(一)
上一篇:Silverlight for Windows Phone Toolkit In Depth(五)
ExpanderView
概述
ExpanderView是由头部和可折叠的下拉项组成的控件。当用户点击头部时,ExpanderView将折叠或者打开。ExpanderView本身是一个简单的HeaderedItemsControl,提供了大量的属性和事件用于控制下拉项的打开和折叠功能。
准备
开始使用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:你需要添加如下命名空间
注意:确保在你的页面声明中包含“toolkit”命名空间!你可以通过Visual Studio Toolbox, Expression Blend Designer或者手动添加。
- 在C#/VB中创建ExpanderView控件实例:只需要添加如下代码
主要属性
Expander
Expander Object类型属性,获取或设置expander对象
示例:
左边为折叠状态,后边为打开状态
ExpanderTemplate
ExpanderTemplate DataTemplate类型属性,获取或设置该控件expander的模板
HasItems
HasItems bool类型属性,获取或设置一个bool值,该值表示ExpanderView是否包含子项目
IsExpanded
IsExpanded bool类型属性,获取或设置一个bool值,该值表示ExpanderView是否打开。
IsNonExpandable
IsNonExpandable bool类型属性,获取或设置一个bool值,该值表示ExpanderView是否是非扩展的。
NonExpandableHeader
NonExpandableHeader object类型属性,获取或设置当ExpanderView为非扩展的,头部显示的对象。
示例:
NonExpandableHeaderTemplate
NonExpandableHeaderTemplate DataTemplate类型属性,获取或设置当ExpanderView为非扩展时,头部的数据模板。
主要事件
Expanded
在ExpanderView打开显示内容时触发
Collapsed
在ExpanderView折叠并隐藏内容时触发
示例:
ExpanderView数据绑定
下面的示例将演示如何使用数据绑定填充ExpanderView,我们将为比萨店实现一个很简单的可折叠菜单,在折叠状态下显示不同种类的比萨饼,在打开状态显示详细的配料信息
定义数据源
下面是创建数据源的步骤:
第一步:定义数据/业务类
首先定义一个名为“CustomPizza"的数据类,包含如下属性:
PizzaOption类如下:
第二步:创建一个图片文件夹并添加一些图片
第三步:创建项为CustomPizza类型的集合
ExpanderView数据绑定
首先我们需要在页面资源中添加必要的数据模板
第一步:在页面资源中定义RelativeTimeConverter,我们用它将“AddedDate”值转换为合适的字符(如:08/08/2011将转换为“one month ago”)
第二步:在页面资源中定义一个自定义HeaderTemplate
第三步:在页面资源中定义一个自定义的ExpanderTemplate
第四步:在页面资源中定义一个自定义的ItemTemplate
第五步:在页面资源中定义一个自定义的NonExpandableHeaderTemplate
第六步:在XAML中添加一个ListBox,用来使用ExpanderView控件显示CustomPizza对象的集合。在ItemTemplate中将 “CustomPizza”绑定到ExpanderView,代码如下:
第七步:设置ListBox的ItemsSource属性
下面是最终运行结果:
打开/折叠全部示例
这个示例将演示如何打开/折叠上面示例中所有的ExpanderViews,注意ListBox的每一项都是ExpanderViews。
第一步:添加两个用于打开/折叠全部项的按钮
第二步:添加如下方法,用于打开/折叠ExpanderViews
第三步:在后台代码中,添加 “btnExpand”单击事件
第四步:在后台代码中,添加 “btnCollapse”单击事件
声明:本人英语水平有限,翻译有不当的地方还望指正,所有翻译均是理解性翻译,与原文不一定相符,出现错误翻译不当,以原文为准,英文好的建议直接阅读英文原版(也不是太难),版权归原作者所有。转载此文请注明文章出处和作者。
英文原版(第二版)下载地址:http://www.windowsphonegeek.com/WPToolkitBook2nd
致谢:在翻译过程中园内的许多朋友给予了鼓励与支持,在此衷心的感谢!您的鼓励与支持是我翻译的最大动力,如您有任何意见可以直接在评论中发表,我会认真回复!再次感谢大家!