选择和使用交互控件

Microsoft Expression Blend 提供了一个控件的扩充列表,通过这些控件可以为 Windows Presentation Foundation (WPF) 和 Microsoft Silverlight 应用程序设计具有多种功能的用户界面。

通过使用 Expression Blend,您能做到的远不止是简单地使用默认控件或系统控件,而是能够真正按照自己的喜好自定义控件并设置控件样式,令其达到所需的使用效果。通过使用 Expression Blend 中的资源,还可以为自定义控件设计极具吸引力的独特外观,使您的应用程序与其他应用程序区分开来,从而创建令人印象深刻的用户体验,或者在所有应用程序之间创建一致的用户界面 (UI)。借助 Expression Blend 所提供的控件编辑模式,设计人员和开发人员可以齐头并进地开展应用程序外观的设计工作和编程逻辑的编写工作,这恰恰是这种模式的一大优点。由于设计人员可以直接设计方案,因此所设计的方案在从模型到实现的转换过程中丝毫不会走样。

什么是控件?

控件(或 UI 设计元素)是应用程序中的可视组件。控件(如按钮或可选择项列表)使用户能够与应用程序交互。了解 Expression Blend 中提供的控件以及如何对其进行自定义后,就可以让应用程序的外观和行为达到预期效果。

通过使用 Expression Blend,既可以在美工板上直观地对控件进行相关操作,也可以在“属性”面板和“对象和时间线”面板中配置其外观和行为。例如,可以向美工板上添加 Button 控件,通过在“属性”面板中修改值来更改其外观,然后通过“资产”面板添加行为,使得在单击该按钮时开始运行动画时间线。

有关详细信息,请参阅“属性”面板“对象和时间线”面板

除了这些简单的操作以外,还可以对控件执行下列操作:

控件的类别

在 Expression Blend 中,可以使用很多不同类型的控件来快速设计外观独特的应用程序。

通过单击“工具”面板底部的“资产”Cc294749.0d8b8d29-1af9-418f-8741-be3097d76eab(zh-cn,Expression.40).png,可以从“资产”面板使用所有控件。“工具”面板位于 Expression Blend 的左侧。从“资产”面板中选择一个 UI 元素后,该元素的图标将显示在“资产”按钮下方,以便将来能够轻松地再次选择该元素。最常用的 UI 元素已显示在“资产”按钮下方,以便您可以迅速找到它们。

有关详细信息,请参阅“资产”面板“工具”面板

下图显示的美工板上已按对象的方式添加了某些常用 UI 元素。“笔”工具 Cc294749.894f8612-e0ed-4e00-84cf-a9bc8f38fc54(zh-cn,Expression.40).png 将生成 Path 对象 Cc294749.e1882d38-c773-4abe-a2b9-10abd293e119(zh-cn,Expression.40).png。从“资产”面板中选择 Image 控件之后, Image 图标 Cc294749.adb61060-da5f-4279-8c0d-3681bfeb145c(zh-cn,Expression.40).png 将显示在“工具”面板中。

从“工具”面板到美工板

Cc294749.abd88d9d-ab6c-444e-8037-469cdcb5586a(zh-cn,Expression.40).png

Cc294749.25182a96-9a69-478a-9cfe-5b360e6a9bea(zh-cn,Expression.40).png

名为“Path_40”的路径对象,表示橙色样本的形状。

Cc294749.eb6fad93-f17e-4f62-a926-8c8651862891(zh-cn,Expression.40).png

未命名的按钮对象,表示应用程序中带有“重置图像”标签的按钮。在“对象和时间线”面板中,下划线字符 (_) 用于标识按钮的访问键。

Cc294749.05fe4b1d-f584-4bd2-99b6-8bc2d735a89d(zh-cn,Expression.40).png

名为“Rectangle_44”的矩形对象,表示颜色样本上的一个色条。

Cc294749.a5d608f2-bba2-48c5-8b15-2c115db86acc(zh-cn,Expression.40).png

名为“photo_bathroom”的图像对象,表示房间的背景图像。

Cc294749.f0c1ff71-7814-42ba-806b-7ea92d616e69(zh-cn,Expression.40).png

未命名的文本块(由其中包含的文本进行标识),表示应用程序标题“Color Swatch Sample Pack 1”。

请根据下列控件类别来确定所要使用的控件:

类别 用途 示例

形状

通过使用椭圆形、线和矩形来创建丰富的可视元素。根据需要,其外观既可以简单明了,也可以繁复多彩。

有关详细信息,请参阅绘制形状和路径

在 Expression Blend 中,可以通过使用“属性”面板或者仅使用样式(而不使用模板),自定义这些元素的外观和行为。

有关详细信息,请参阅编辑样式

Rectangle  Cc294749.ae750268-92e8-403a-9e07-b662da4e9e1e(zh-cn,Expression.40).png

Ellipse  Cc294749.d7a04618-e35a-44f9-b78c-1f22e38016c1(zh-cn,Expression.40).png

Path (由“线”Cc294749.eb618397-5283-48be-8396-3449be7b6fbf(zh-cn,Expression.40).png、“笔”Cc294749.894f8612-e0ed-4e00-84cf-a9bc8f38fc54(zh-cn,Expression.40).png 和“铅笔”Cc294749.509dc167-734f-46c9-b012-987ee63450cd(zh-cn,Expression.40).png 绘图工具生成)

版式面板

用作其他 UI 元素的容器,以指定它们的位置以及调整窗口大小的行为。

与大多数 UI 元素不同,某些版式面板(如网格)可以包含多个子元素。这对组织和布置应用程序设计方案的布局非常有用。

有关详细信息,请参阅排列对象

在 Expression Blend 中,可以通过使用“属性”面板或者使用样式(而不使用模板),自定义这些元素的外观和行为。

有关详细信息,请参阅编辑样式

Canvas  Cc294749.95e40288-f7a6-4ddc-9d6a-68d0aa46d621(zh-cn,Expression.40).png

Dock  Cc294749.db9f1ff5-6bca-441d-b289-c6781a478a5b(zh-cn,Expression.40).png

Grid  Cc294749.a87ee957-7fbf-4135-a6ab-6de7e63160aa(zh-cn,Expression.40).png

Stack  Cc294749.ec58af86-cc2a-4e1f-91c0-883c5406fdfb(zh-cn,Expression.40).png

Wrap  Cc294749.91486eda-6173-4ce8-9610-4f296dcb83d7(zh-cn,Expression.40).png

文档/文本

用于定义文档显示和文本格式设置。

有关详细信息,请参阅绘制文本

在 Expression Blend 中,可以通过使用“属性”面板或者使用样式和模板,自定义这些元素的外观和行为。

有关详细信息,请参阅创建或修改模板编辑样式

TextBox  Cc294749.343296b4-5c7d-4145-84cc-91b08ba67a1b(zh-cn,Expression.40).png

TextBlock  Cc294749.42165963-00f7-4a33-abcd-b0849edebada(zh-cn,Expression.40).png

RichTextBox  Cc294749.0ee48635-456b-4ebd-b8e4-ce3658417b8e(zh-cn,Expression.40).png

Label  Cc294749.a27042f1-4067-4239-b99a-8b2e4c223de0(zh-cn,Expression.40).png

PasswordBox  Cc294749.31e4dc7e-8cf4-4014-83e4-9b50ec6ee663(zh-cn,Expression.40).png

控件

为用户提供与应用程序实现交互的途径。

在 Expression Blend 中,可以通过使用“属性”面板或者使用样式和模板,自定义这些元素的外观和行为。

有关详细信息,请参阅创建或修改模板编辑样式

Button  Cc294749.05df1779-a68f-436b-b834-a91b7995a3ec(zh-cn,Expression.40).png

ListBox  Cc294749.ffd7a7c3-6bcd-4ed3-a59e-1f28d06ec4ae(zh-cn,Expression.40).png

Menu  Cc294749.015a263c-0b2b-4253-ac57-b86fcb8c9591(zh-cn,Expression.40).png

RadioButton  Cc294749.33646a24-f5a1-4b74-9496-e0aaddb922c6(zh-cn,Expression.40).png

CheckBox  Cc294749.91bc7bff-27d2-4dfe-93ab-844f2952186f(zh-cn,Expression.40).png

装饰器

用于向其他元素应用效果。装饰器可包含单个子元素,该子元素的外观通常受装饰器影响。

通常这些元素在应用于其他控件的模板中使用,例如, ButtonChrome 元素在按钮的模板中使用。可以通过使用“属性”面板或者仅使用样式(而不使用模板),自定义 Decorator 元素的外观和行为。

有关详细信息,请参阅编辑样式

Border  Cc294749.be354518-c54c-4f86-9c57-0b4a9d384b3e(zh-cn,Expression.40).png

ButtonChrome

Viewbox

有关这些控件类型的特性的详细信息,请参阅 MSDN 上 Windows Presentation Foundation Cc294749.xtlink_newWindow(zh-cn,Expression.40).png 部分中的主题 Type Families Cc294749.xtlink_newWindow(zh-cn,Expression.40).png(类型系列)。

创建和修改控件

通过在“工具”面板中双击控件图标,或者通过在“工具”面板中选择控件图标之后再用鼠标在美工板上绘制元素,可在美工板上添加控件。

有关详细信息,请参阅选择和使用交互控件下列出的操作方法主题。

通过在“资产”面板中双击某个控件,可将该控件以默认大小插入到当前的活动元素中。由于在许多情况下,控件的默认大小都设置为“自动”,以便控件能够在添加内容后适当地调整大小,因此这项功能非常有用。

在将控件添加到 Expression Blend 中的美工板上后,所添加控件将成为应用程序中的对象。可以采用多种方式修改对象:使用对象上的图柄来调整对象的大小、移动、旋转、翻转或倾斜对象,或者在“属性”面板中输入准确的大小、位置和旋转角度等值。

有关详细信息,请参阅添加或修改对象,或参阅使用对象和属性中列出的操作方法主题。

Expression Blend 对控件的操作方式非常独特。可以在控件内放入任何其他控件、面板或形状元素。这对组合使用多个控件非常有用。例如,如果要创建一个包含图像和文本的按钮,只需向按钮中拖入一个 StackPanel 版式面板,然后在 StackPanel 版式面板中添加图像和文本控件即可。

控件遵循一定的继承规则。例如,有些控件用作父元素,可在其中嵌套子元素(内容);而其他控件则不支持子元素。Expression Blend 始终尝试向文档中的根元素(或最顶端的面板)添加子元素。这意味着当您开始使用 Expression Blend 进行操作时, LayoutRoot 元素会被视为根元素。默认情况下,该元素就是向文档中插入的所有子元素的目标。如果要向文档中的不同控件添加子元素,需要在“对象和时间线”面板中双击控件名称将其激活。激活的元素周围会显示黄色的突出显示框,以指明新控件的添加位置。

Expression Blend 支持下列不同类型的控件,这些控件按其支持的继承类型进行了分类:

类别 描述 示例

简单控件

简单控件由控件本身以及为其设置的属性组成。简单控件不能包含内容。也就是说,它们不能包含子元素。

Image  Cc294749.adb61060-da5f-4279-8c0d-3681bfeb145c(zh-cn,Expression.40).png

ScrollBar  Cc294749.6513a026-499e-4296-8a67-7558b466bd33(zh-cn,Expression.40).png

内容控件

内容控件可以包含其他元素(即在简单的应用方案中,可以将字符串作为文本加以显示)。内容控件具有 Content 属性。这意味着它们可以包含单一内容(例如字符串),也可以包含其他元素(例如版式面板)。

有关示例,请参阅绘制内容控件主题。

CheckBox  Cc294749.91bc7bff-27d2-4dfe-93ab-844f2952186f(zh-cn,Expression.40).png

RadioButton  Cc294749.33646a24-f5a1-4b74-9496-e0aaddb922c6(zh-cn,Expression.40).png

项控件

项控件包含子元素集合。可以手动向 Items 集合属性中添加项,也可以将数据集合绑定到 ItemsSource 属性。项控件可公开项集合,但没有 Content 属性和 Header 属性。

有关示例,请参阅绘制项目控件主题。

ComboBox  Cc294749.b174a511-dd12-4a45-a986-034de7693de9(zh-cn,Expression.40).png

ListBox  Cc294749.ffd7a7c3-6bcd-4ed3-a59e-1f28d06ec4ae(zh-cn,Expression.40).png

带标题控件

带标题控件包含一个标题子元素,该子元素可为此控件添加标签。带标题控件可以包含内容(带标题内容控件)或项集合(带标题的项目控件)。

有关示例,请参阅绘制带标题控件主题。

TabControl  Cc294749.f13847cd-7fdf-4757-a648-d5ece98fcaea(zh-cn,Expression.40).png

TabItem

MenuItem  Cc294749.82c89430-1209-4aa1-b534-cf1cedac74c7(zh-cn,Expression.40).png

有关这些控件类型的特性的详细信息,请参阅 MSDN Cc294749.xtlink_newWindow(zh-cn,Expression.40).png(此链接可能指向英文页面)上的“Windows Presentation Foundation”部分中的“内容模型”主题。

样式和模板

如前文中所述,可以通过多种方式(包括为控件创建模板和样式)自定义控件,使应用程序的外观独具特色,而且从整体上保持统一。模板和样式分别定义了组成控件的各个组件以及控件的默认行为。可以通过生成控件的默认系统样式和模板的副本,来创建模板和样式,这是因为用户不能修改系统样式和模板。修改模板和样式使用户能够轻松创建模板和样式,其实质是在 Expression Blend 的“设计”视图中生成新控件,而无需使用代码。

有关详细信息,请参阅设置支持模板的控件的样式

Microsoft Corporation 版权所有 ⓒ 2011。保留所有权利。