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

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

2012年02月20日 ⁄ 综合 ⁄ 共 3124字 ⁄ 字号 评论关闭

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

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

 

说明:由于原书的第二版已经发布,所以后续章节均是基于原书第二版进行翻译的,前期翻译的与第二版区别不大,已经对部分进行了更正且用红色标注了修改的部分。

 

ContextMenu

 

概述

ContextMenu 是当用户点击并且按住某一项不放弹出的动态控件。它常被用在像应用程序列表这样的场合,正如你点击并且长按某一应用程序后看到的“固定到开始屏幕”、“卸载”等选项一样。

 

准备

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

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

wps_clip_image-4744

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

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

wps_clip_image-9265

 

主要属性

 

IsOpen

IsOpen  bool类型属性,获取或设置表明ContextMenu是否可见的值

 

IsFadeEnabled

IsFadeEnabled  bool类型属性,它用来获取或设置当ContextMenu打开时,背景是否渐入。IsZoomEnabled必须设置为true时,此项才会生效。

示例:

wps_clip_image-22788

 

IsZoomEnabled

IsZoomEnabled bool类型属性,它用来获取或设置当ContextMenu打开时背景是否缩小。

示例:
wps_clip_image-16274

 

ItemContainerStyle

ItemContainerStyle Style类型属性,它用来获取或设置每一项的容器元素样式。

示例:

wps_clip_image-30085

 

RegionOfInterest

RegionOfInterest Rect?类型的属性,它用来获取或设置使用根视图坐标系的感兴趣区域,ContextMenu会努力地将自己定位在感兴趣区域之外。如果为空,则由所属的绑定控件决定感兴趣区域

 

VerticalOffset

VerticalOffset double类型属性,它用来获取或设置目标原与弹出层的垂直距离

示例:

wps_clip_image-27846

 

主要事件

Closed

在ContextMenu实例关闭后触发

示例:

wps_clip_image-31206

Opened

在ContextMenu实例打开后触发

示例:

wps_clip_image-32589

 

MenuItem

MenuItem是ContextMenu中可选择的项

NOTE:ContextMenu包含MenuItem对象的集合,在ContextMenu中选择一个MenuItem,将设置IsSelected属性为true,通过绑定数据源到ContextMenu的ItemsSource属性实现将MenuItem绑定数据.

 

MenuItem主要属性

 

Command 

Command  ICommand类型属性,获取或设置与菜单项关联的命令。

CommandParameter

CommandParameter Object类型属性,获取或设置传递到MenuItem命令的参数。

Header

Header Object类型属性,获取或设置标识控件的项。默认值为空。注意,该属性在你未使用数据绑定而是使用菜单项集合填充ContextMenu时使用。

示例:

wps_clip_image-6256

HeaderTemplate

HeaderTemplate DataTemplate类型属性,获取或设置控件头部内容的数据模板

ItemContainerStyle

ItemContainerStyle Style类型属性,它用来获取或设置每一项的容器元素样式。

Owner

Owner DependencyObject类型属性,获取或设置ContextMenu所属对象

 

MenuItem 主要事件

 

Click

当点击某一项MenuItem时触发

示例

wps_clip_image-498

 

使用MenuItems填充ContextMenu

下面这个示例将演示最简单的方法,使用MenuItems将数据填充到ContextMenu

wps_clip_image-21469

wps_clip_image-27443

当用户点击并按住"OpenContextMenu"按钮,将有三个选项弹出。在你选择某一项后,关于选中项信息的MessageBox弹出。

结果如下:

wps_clip_image-5279

 

ContextMenu数据绑定

下面的示例将演示通过数据绑定的方式为ContextMenu填充数据。我们需要 一个ItemContainerStyle,为了改变菜单项的背景颜色。

  • 定义数据源

我们创建一个string类型的简单集合

wps_clip_image-17921

  • ContextMenu数据绑定

我们将添加一个Button控件,包含数据绑定的ContextMenu

第一步:在Button控件中定义ContextMenu实例,然后添加如下ItemContainerStyle

wps_clip_image-29979

第二步:通过ItemsSource属性填充示例数据到ContextMenu

wps_clip_image-31102

运行结果如下:

wps_clip_image-25845

 

在ListBox ItemTemplate之中使用 ContextMenu(DataTemplate)

下面的示例将演示如何在ListBox ItemTemplate添加ContextMenu(当有数据需要绑定ListBox时)

  • 定义数据源

下面是创建数据源步骤:

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

首先需要定义数据类,我们定义了包含如下属性的“SampleData”类

wps_clip_image-28573

第二步:创建一个新的Images文件夹,并为之添加需要的图片(图片的build action设置为Content)

wps_clip_image-941

第三步:创建类型为 “SampleData”的集合

wps_clip_image-6611

  • ListBox控件数据绑定

第一步:定义一个ListBox,并且在它的ItemTemplate中放置ContextMenu。ContextMenu是由两个MenuItem( “Click”响应事件为“MenuItem_Click”)组成。

wps_clip_image-21777

wps_clip_image-3127

第二步:通过ItemsSource属性为ListBox填充数据

wps_clip_image-18003

第三步:在后台代码中,添加 “MenuItem_Click”处理函数

通过下面ContextMenu的Click处理方法,你可以突出的显示ListBox的选中项,也可以获取被点击项的引用

wps_clip_image-27335

第四步:编译运行项目

运行结果如下:

wps_clip_image-28870

 

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

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

抱歉!评论已关闭.