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

开篇： 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

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

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




在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

 

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