使用简单样式

此页仅适用于 WPF 项目

通过使用 Microsoft Expression Blend,不仅能在设计应用程序的用户界面 (UI) 时简单地使用默认控件或系统控件,而且能够真正地按照自己的喜好来自定义控件并设置控件样式,使其达到所需的使用效果。此外,还可以利用 Expression Blend 中的资源来设计独特的控件外观,使自己的应用程序显得与众不同,从而给用户留下深刻的品牌印象,或者在您的所有应用程序之间保持用户界面 (UI) 的风格一致。

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

Microsoft Silverlight 1.0 项目中不提供 Expression Blend 简单样式,但您可以创建 JavaScript 类来定义可重用的控件。有关示例,请参阅“欢迎屏幕”(位于“帮助”菜单上)中的“示例”选项卡上提供的“ButtonGallery”示例中的 Button 类。有关详细信息,请访问 Silverlight 学习中心(此链接可能指向英文页面)。

什么是简单样式?

简单样式是适用于一组常用系统控件(如 Button 和 ListBox 控件)的一组可直接使用的自定义样式资源。Expression Blend 之所以提供这些简单样式资源,是因为修改系统控件的样式时必须对 Windows Presentation Foundation (WPF) 样式和模板有所了解,才能避免破坏控件的功能。在 Expression Blend 中,可以将简单样式用作一组独立资源,也就是说,可以快速修改这些资源,以创建独具特色的应用程序外观,而不必从了解 WPF 样式和文档开始着手。

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

创建简单样式控件

可以通过单击“资源库”的“控件”选项卡上的“简单样式”来查看简单样式。选中“全部显示”复选框可查看所有可用的简单样式。从“资源库”中选择一种简单样式之后,该简单样式的图标将显示在“资源库”Cc294894.0224cabd-5da1-4e01-bddd-4a647401a098(zh-cn,Expression.10).png 按钮上方,并且处于选中状态以便您在美工板上进行绘制。在美工板上绘制简单样式(如 SimpleButton)时,实际上创建的是系统控件(如 Button)的实例,但应用的是 SimpleButton 样式。

如果希望对“工具箱”的某些工具下拉列表中提供的工具应用简单样式,可以在“控件”选项卡上选择“简单样式”之后,单击“资源库”中的“用作默认值”按钮。

显示可用的简单样式控件以及用于将其设为默认样式的选项的资源库

Cc294894.7ac13e33-029a-4ce3-aa85-ca623b6b9caa(zh-cn,Expression.10).png

下表列出了可用的简单样式以及可应用这些样式的控件。

简单样式

可应用简单样式的控件

图标

SimpleButton

Button

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

SimpleCheckBox

CheckBox

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

SimpleComboBox

ComboBox

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

SimpleComboBoxItem

ComboBoxItem

SimpleExpander

Expander

Cc294894.a9e00db8-c14d-404f-88cb-5f37a41bc783(zh-cn,Expression.10).png

SimpleLabel

Label

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

SimpleListBox

ListBox

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

SimpleListBoxItem

ListBoxItem

SimpleMenu

Menu

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

SimpleMenuItem

MenuItem

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

SimpleProgressBar

ProgressBar

Cc294894.1a4a4117-497e-4920-acaa-d84cb5a1ce83(zh-cn,Expression.10).png

SimpleRadioButton

RadioButton

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

SimpleRepeatButton

ListBox 控件中的 RepeatButton

SimpleScrollBar

ScrollBar

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

SimpleScrollBarRepeatButtonStyle

ScrollBar 控件中的 RepeatButton

SimpleScrollViewer

ScrollViewer

Cc294894.5ca26a94-31cd-4fda-83c5-a9564b5b019d(zh-cn,Expression.10).png

SimpleSeparator

ListBox、Menu 或 ToolBar 控件中的 Separator

SimpleSlider

Slider

Cc294894.bf689d92-3c74-4218-815c-e98c930ac189(zh-cn,Expression.10).png

SimpleSliderThumb

Slider 控件中的 Thumb

SimpleTabControl

TabControl

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

SimpleTabItem

TabControl 中的 TabItem

SimpleTextBox

TextBox

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

SimpleThumbStyle

ListBox 控件的 ScrollBar 中的 Thumb

SimpleTreeView

TreeView

Cc294894.39c99139-8723-49c9-a3e7-f99232d939cb(zh-cn,Expression.10).png

SimpleTreeViewItem

TreeView 控件中的 TreeViewItem

SimpleTreeViewItemToggleButton

TreeView 控件中的 ToggleButton

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

修改简单样式

简单样式资源包含在一个名为“SimpleStyles.xaml”的资源字典中。将一种简单样式从“工具箱”添加到美工板上之后,SimpleStyles.xaml 资源字典将会添加到项目中,并且“资源”面板中会显示所有简单样式资源。

SimpleStyles.xaml 资源字典包含简单样式所使用的画笔资源和其他模板。可以对简单样式做出下列更改:

  • **更改颜色  ** 由所有简单样式使用的颜色均存储为可更改的资源。若要更改某个颜色资源,请在“资源”面板中单击该颜色资源旁边的向下箭头按钮。有关画笔的信息,请参阅外观概述

    在“资源”面板中选择编辑某样式资源

    Cc294894.64136c65-52bc-4225-a948-b1171634baca(zh-cn,Expression.10).png

  • **更改样式  ** 在 Expression Blend 中,可以使用控件的样式来指定属性和触发器。要应用样式的控件将使用这些属性和触发器作为默认值。属性(如背景画笔颜色)将影响控件的外观,而触发器将影响控件对属性改变和事件的响应方式。例如,SimpleButton 样式包含一个针对“IsMouseOver”属性的触发器,用于当用户将鼠标指针移到该控件上时改变该按钮的外观。当“IsMouseOver”属性从“False”变为“True”时就会触发该触发器。若要更改某个简单样式,请在“资源”面板中单击该简单样式旁边的“编辑资源”按钮。

    在“资源”面板中选择编辑某个样式资源

    Cc294894.a6080791-03cf-43ae-9476-22d33e9d8ce4(zh-cn,Expression.10).png

  • **更改控件模板  ** 控件的模板通过定义控件中包含的子控件来定义其外观。例如,SimpleTextBox 元素的控件模板包含一个网格元素,网格元素又包含一个 Border 元素,而 Border 元素又包含一个名为“PART_ContentHost”的 ScrollViewer 元素。向美工板上的 TextBox 应用 SimpleTextBox 样式后,ScrollViewer 元素将显示 TextBox 的内容。如同设置样式一样,可以在控件模板中设置属性和事件触发器。若要更改简单样式的控件模板,请在“资源”面板中单击该简单样式旁边的“编辑资源”按钮,右键单击在“对象和时间线”下显示的“Style”元素,指向“编辑控件部件(模板)”,然后单击“编辑模板”。

    从样式的编辑范围开始操作时选择编辑控件模板

    Cc294894.a64c8f57-1243-4482-87ad-b9d5aac62867(zh-cn,Expression.10).png

    Cc294894.alert_tip(zh-cn,Expression.10).gif提示:

    控件模板封装在样式中,以便应用于控件的样式同时包含控件的外观(部件)和行为。在“编辑副本”和“编辑模板”之间进行选择时,一定要记住这一点。

有关样式和模板之间的详细比较结果,请参阅样式和模板。有关简单样式的特定信息以及修改简单样式和控件模板的示例,请参阅简单样式中的“参考”和“动手试验!”下列出的主题。

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

向美工板上的现有控件应用样式资源

简单样式是可以像其他任何资源一样应用和管理的资源。有关示例,请参阅本用户指南中的应用样式资源。有关资源的详细信息,请参阅本用户指南中的资源概述

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