控件概述

此页适用于 WPF 和 Silverlight 2

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

Cc294749.alert_note(zh-cn,Expression.10).gif说明:

有关 Microsoft Silverlight 1.0 项目中提供的控件的列表,请参阅 Silverlight 1.0 概述中的“控件”部分。

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

什么是控件?

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

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

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

Cc294749.7e183f1f-37d8-4dcb-980c-19a5d61ca087(zh-cn,Expression.10).gif返回页首

控件的类别

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

通过单击工具箱底部的“资源库”Cc294749.0224cabd-5da1-4e01-bddd-4a647401a098(zh-cn,Expression.10).png 按钮,可以从资源库使用所有控件。“工具箱”位于 Expression Blend 的左侧。从“资源库”中选择一个 UI 元素后,该元素的图标将显示在“资源库”按钮上方,以便将来能够轻松地再次选择该元素。最常用的 UI 元素已显示在“资源库”按钮上方,以便您可以迅速找到它们。

下图显示的美工板上已按对象的方式添加了某些常用 UI 元素。“笔”Cc294749.894f8612-e0ed-4e00-84cf-a9bc8f38fc54(zh-cn,Expression.10).png 工具将生成 Path Cc294749.e1882d38-c773-4abe-a2b9-10abd293e119(zh-cn,Expression.10).png 对象。从“资源库”中选择“Image”控件之后,Image Cc294749.0594f05b-2193-4385-86a0-2d352cacfe55(zh-cn,Expression.10).png 图标将显示在“工具箱”中。

从工具箱到美工板

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

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

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

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

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

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

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

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

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

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

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

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

类别

用途

示例

形状(在 Silverlight 1.0 项目中可用)

通过使用椭圆形、线和矩形来创建丰富的可视元素。根据需要,其外观既可以简单明了,也可以繁复多彩。有关详细信息,请参阅绘制形状和路径

在 Expression Blend 中,可以通过使用“属性”面板或者仅使用样式(而不使用模板),自定义这些元素的外观和行为。有关详细信息,请参阅编辑样式

矩形 Cc294749.ae750268-92e8-403a-9e07-b662da4e9e1e(zh-cn,Expression.10).png

椭圆形 Cc294749.d7a04618-e35a-44f9-b78c-1f22e38016c1(zh-cn,Expression.10).png

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

版式面板

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

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

有关详细信息,请参阅版式

在 Expression Blend 中,可以通过使用“属性”面板或者使用样式(而不使用模板),自定义这些元素的外观和行为。有关详细信息,请参阅编辑样式

画布 Cc294749.95e40288-f7a6-4ddc-9d6a-68d0aa46d621(zh-cn,Expression.10).png(在 Silverlight 1.0 项目中可用)

固定 Cc294749.db9f1ff5-6bca-441d-b289-c6781a478a5b(zh-cn,Expression.10).png

网格 Cc294749.a87ee957-7fbf-4135-a6ab-6de7e63160aa(zh-cn,Expression.10).png

堆叠 Cc294749.ec58af86-cc2a-4e1f-91c0-883c5406fdfb(zh-cn,Expression.10).png

环绕 Cc294749.91486eda-6173-4ce8-9610-4f296dcb83d7(zh-cn,Expression.10).png

文档/文本

用于定义文档显示和文本格式设置。有关详细信息,请参阅文本和版式概述

在 Expression Blend 中,可以通过使用“属性”面板或者使用样式和模板,自定义这些元素的外观和行为。有关详细信息,请参阅创建或编辑控件模板编辑样式

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

TextBlock Cc294749.42165963-00f7-4a33-abcd-b0849edebada(zh-cn,Expression.10).png(在 Silverlight 1.0 项目中可用)

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

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

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

控件

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

在 Expression Blend 中,可以通过使用“属性”面板或者使用样式和模板,自定义这些元素的外观和行为。有关详细信息,请参阅创建或编辑控件模板编辑样式

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

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

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

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

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

装饰器

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

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

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

ButtonChrome

Viewbox

有关这些控件类型的特性的详细信息,请参阅 MSDN 上的 Windows Presentation Foundation 部分中的类型系列主题(此链接可能指向英文页面)。

Cc294749.7e183f1f-37d8-4dcb-980c-19a5d61ca087(zh-cn,Expression.10).gif返回页首

创建和修改控件

通过在“工具箱”中双击控件图标,或者通过在“工具箱”中选择控件图标之后再用鼠标在美工板上绘制元素,可在美工板上添加控件。有关详细信息,请参阅控件中列出的操作方法主题。通过在“资源库”中双击某个控件,可将该控件以默认大小插入到当前的活动元素中。由于在许多情况下,控件的默认大小都设置为“自动”,以便控件能够在添加内容后适当地调整大小,因此这项功能非常有用。

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

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

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

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

类别

描述

示例

简单控件

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

Image Cc294749.0594f05b-2193-4385-86a0-2d352cacfe55(zh-cn,Expression.10).png(在 Silverlight 1.0 项目中可用)

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

内容控件

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

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

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

项控件

项控件包含子元素集合。可以手动向“Items”集合属性中添加项,也可以将数据集合绑定到“ItemsSource”属性。项控件可公开项集合,但没有“Content”属性和“Header”属性。有关示例,请参阅创建项控件主题。

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

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

带标题控件

带标题控件包含一个标题子元素,该子元素可为此控件添加标签。带标题控件可以包含内容(带标题内容控件)或项集合(带标题的项控件)。有关示例,请参阅创建带标题控件主题。

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

TabItem

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

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

Cc294749.7e183f1f-37d8-4dcb-980c-19a5d61ca087(zh-cn,Expression.10).gif返回页首

样式和模板

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

Cc294749.7e183f1f-37d8-4dcb-980c-19a5d61ca087(zh-cn,Expression.10).gif返回页首