样式和模板概述

此页适用于 WPF 和 Silverlight 2

您可以通过多种方式(包括为控件创建一组模板和样式)来自定义 Windows Presentation Foundation (WPF) 和 Silverlight 2 控件,从而使应用程具有统一而又独特的外观。

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

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

模板和样式分别定义了组成控件的各个组件以及控件的默认行为。可以通过生成控件的默认系统样式和模板的副本,来创建模板和样式,这是因为用户不能修改系统样式和模板。修改模板和样式使用户能够轻松创建模板和样式,其实质是在 Microsoft Expression Blend 的“设计”视图中生成新控件,而无需使用代码。

样式与模板之间的差异

下表提供了详细的样式与模板比较结果,有助于确定是修改控件的样式、模板,还是同时修改这两者。

特性

样式

模板

用途

通过使用样式,可以对应用该样式的控件的默认属性值加以修改。例如,可以指定控件(如按钮)的背景、边框和前景的默认颜色。

可以使用在美工板上绘制控件时为控件设置的值来取代这些样式属性。例如,如果在按钮的样式中将背景颜色设置为蓝色,则在美工板上绘制该按钮时,它将显示为蓝色,但用户可以更改其颜色。

只能在样式中设置已经存在的属性。例如,不能为属于用户添加到模板中的新部件的属性设置默认值。

最后,可以使用样式来指定控件的默认行为。例如,在按钮的样式中,可以指定一个触发器,以便在用户将鼠标指针移到按钮上时更改背景颜色。这些属性更改是瞬时完成的(不能动态渐变)。

可以使用模板,修改应用该模板的控件的结构。可以修改控件模板,以重排、添加或删除控件中的元素(或部件)。例如,可以向控件(如按钮)中添加背景图像或设计。

也可以对应用模板的控件的属性(如背景颜色)值加以修改。不能使用在美工板上绘制控件时为控件设置的值来取代这些模板值。但是,可以根据在美工板上绘制控件时该控件的属性值,使用模板绑定来设置模板的属性。

修改模板时,可以比修改样式时访问更多的控件部分。例如,可以通过修改项模板,更改组合框中弹出列表的显示方式,或更改在组合框中触发弹出列表的按钮的外观。有些模板包含下列部件:

  • 内容展示区   内容展示区是控件模板中的占位符,用于显示应用模板的控件的内容。显示的内容可能是内容属性(例如在按钮中)或文本属性(例如在文本框中)的值。

  • 标题   有些控件具有多个可以包含内容的属性。在这种情况下,会在模板中使用另一个内容展示区,作为用作标题的内容类型的占位符。带标题控件的示例包括选项卡项控件,在此控件中,标题是选项卡上的标签,而内容显示在标题之下。

  • 项目承载区   项目承载区用作控件子元素的占位符。模板的项目承载区部件由“属性”面板中的“Is_Items_Host = True”加以标识。

  • ItemContainerTemplate   项容器模板可应用于包含多个项的控件,如“Menu”或“List”控件。该模板在向列表中添加项时使用。

最后,可以使用触发器在模板中指定所有新部件和现有部件的行为。例如,可以指定触发器,以便在用户将鼠标指针移到按钮上时,更改其中一个部件的颜色。这些属性改变可以瞬时完成,也可以动态变化以产生平滑过渡效果。

Cc295273.alert_note(zh-cn,Expression.10).gif说明:
不能从模板绑定属性或颜色资源的值动态变化到其他值。在触发器中使用动画时,请使用特定的属性值。

编辑方式

可通过下列方式进入样式的编辑模式:

使用菜单

  1. 在“对象和时间线”下,选择相应的控件。

  2. 在“对象”菜单上,指向“编辑样式”。

  3. 执行下列操作之一:

    • 单击“编辑样式”(如果希望更改当前已应用于该控件的样式)。

    • 单击“编辑副本”(以同时创建当前已应用于该控件的样式的新副本,并将新样式应用于该控件)。

如果该控件应用的是系统样式,则“编辑样式”选项将不可用。有关示例,请参阅创建样式资源

使用“资源”面板(修改现有样式)

Cc295273.alert_note(zh-cn,Expression.10).gif说明:
样式和模板都属于资源,可通过不同方式应用于控件,并且可以存储在应用程序中的不同位置。有关创建样式的示例,请参阅创建样式资源

可通过下列方式进入控件模板的编辑模式:

使用菜单

  1. 在“对象和时间线”下,选择相应的控件。

  2. 执行下列操作之一:

    • 在“对象”菜单上,指向“编辑控件部件(模板)”。

    • 右键单击该控件,指向“编辑控件部件(模板)”。

  3. 单击“编辑模板”(如果希望修改当前已应用于该控件的模板),或者单击“编辑副本”(以同时创建当前已应用于该控件的模板的新副本,并将新模板应用于该控件)。如果该控件应用的是系统模板,则“编辑模板”选项将不可用。有关示例,请参阅创建或编辑控件模板

使用“资源”面板(修改现有模板)

  1. 在“资源”面板中,找到包含该模板的样式,然后单击该样式旁边的“编辑资源”按钮。

  2. 在“对象和时间线”下,右键单击“Style”元素,指向“编辑控件部件(模板)”,然后单击“编辑模板”。

Cc295273.alert_tip(zh-cn,Expression.10).gif提示:
控件模板封装在样式中,以便应用于控件的样式同时包含控件的外观(部件)和行为。这正是单击“编辑模板”而不是“编辑副本”的原因,因为样式的副本包含了模板。若要返回到主文档的编辑范围,必须单击“范围上移”Cc295273.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(zh-cn,Expression.10).png 按钮两次,这是因为第一次单击将回到样式的编辑模式。
Cc295273.alert_note(zh-cn,Expression.10).gif说明:
样式和模板都属于资源,可通过不同方式应用于控件,并且可以存储在应用程序中的不同位置。有关创建模板的示例,请参阅创建或编辑控件模板

应用方式

可通过下列方式向美工板上的控件应用现有样式:

使用菜单

  1. 在“对象和时间线”下,选择相应的控件。

  2. 在“对象”菜单上,指向“编辑样式”,指向“应用资源”,然后从显示的下拉列表中选择样式。该下拉列表仅显示可应用于选定控件的样式。例如,不能向按钮应用文本框样式。

使用资源库在美工板上绘制带样式的控件

  1. 打开“资源库”Cc295273.0224cabd-5da1-4e01-bddd-4a647401a098(zh-cn,Expression.10).png

  2. 执行下列操作之一:

    • 如果样式是在当前使用的文档中创建的,请单击“本地样式”选项卡。

    • 如果样式是在资源字典中创建的(仅适用于 WPF),请单击“控件”选项卡,然后选择该字典。

  3. 选择所需的样式,然后在美工板上进行绘制。

可通过下列方式向美工板上的控件应用现有模板:

使用菜单

  1. 在“对象和时间线”下,选择相应的控件。

  2. 执行下列操作之一:

    • 在“对象”菜单上,指向“编辑控件部件(模板)”。

    • 右键单击该控件,然后指向“编辑控件部件(模板)”。

  3. 单击“编辑模板”(如果希望更改当前已应用于该控件的模板),或者单击“编辑副本”(以同时创建当前已应用于该控件的模板的新副本,并将新模板应用于该控件)。如果该控件应用的是系统模板,则“编辑模板”选项将不可用。有关示例,请参阅创建或编辑控件模板

使用“资源”面板(修改现有模板)

  1. 在“资源”面板中,找到包含该模板的样式,然后单击该样式旁边的“编辑资源”按钮。

  2. 在“对象和时间线”下,右键单击“Style”元素,指向“编辑控件部件(模板)”,然后单击“编辑模板”。

    若要返回到主文档的编辑范围,必须单击“范围上移”Cc295273.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(zh-cn,Expression.10).png 按钮两次,这是因为第一次单击将回到样式的编辑模式。

Expression Blend 包含一组简单样式和模板,这些样式和模板封装在 WPF 项目的一个资源字典中。可以使用资源字典来设计应用程序的主题。有关详细信息,请参阅主题和简单样式部分。

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

修改样式和模板

在 Expression Blend 2 中,当处于样式或模板的编辑范围中时,美工板的左上角将显示一个痕迹导航栏。

选定了模板编辑模式的痕迹导航栏

Cc295273.eb50efd9-44c6-41f9-8f50-7d40f6c42e61(zh-cn,Expression.10).png

通过单击痕迹导航栏上的按钮,可以快速地进入模板编辑模式、样式编辑模式以及选定对象的对象编辑范围。对于应用了自定义样式或模板的任何选定对象,都会显示痕迹导航栏。

有关如何修改样式或模板的信息,请参阅编辑样式创建或编辑控件模板。在修改样式或模板时,请确保采用下面的最佳实践。

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

最佳实践

Cc295273.alert_caution(zh-cn,Expression.10).gif警告:

在修改样式和模板时,应牢记下列关键点,以免破坏应用样式或模板的系统控件的功能:

  • 除非只更改颜色画笔,否则应避免更改现有触发器。

  • 请勿重命名或修改其名称以“PART_”开头的任何元素,因为在实现控件的代码中会引用这些元素。

  • 请勿删除任何帮助器元素,例如“SimpleTabControl”中的“TabPanel”或“SimpleScrollBar”中的“Track”。这些元素必须存在,才能保留相应控件的功能。

  • 请勿重置或更改“属性”面板中的任何绑定。这些绑定由属性周围的黄色突出显示框或者黄色的“高级属性选项”Cc295273.41b6d73e-9be5-48d9-aebf-12a284314457(zh-cn,Expression.10).png 按钮来标识。模板绑定用于将模板中的属性绑定到应用该模板的控件的属性。

  • 如果模板包含 Presenter 元素(如“ContentPresenter”或“ItemsPresenter”元素),则务必在模板中保留该元素。Presenter 元素将显示应用该模板的控件中定义的内容。

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

主题

主题是能够令用户界面控件的外观从整体上保持统一的一组样式和模板。例如,Windows Presentation Foundation 对在 Microsoft Windows XP 上运行的 WPF 应用程序使用一个主题,而对在 Windows Vista 上运行的 WPF 应用程序使用另一个主题。这就是同一按钮在这两个操作系统上的外观有所不同的原因。

为了确定控件(如按钮)的外观,应用程序将搜索下列位置:

  1. 为控件设置的属性   例如,如果要在 Expression Blend 中创建一个按钮,然后直接更改按钮的背景颜色。直接为控件设置属性,会取代在其他任何位置为该属性设置的任何值。

  2. 在控件所使用的自定义样式或模板中设置的属性   例如,如果要在 Expression Blend 中创建一个按钮,然后修改模板的副本,以便在模板中设置背景颜色。如果未直接为该按钮设置背景属性,则此背景颜色就会用于该按钮。可以在包含控件的文档中定义资源,也可以在应用程序级别定义资源(以便资源能够由应用程序中的所有文档使用)。文档级资源将取代应用程序级资源。

  3. 在控件所使用的系统模板中设置的属性   WPF 根据主题(即根据操作系统)来确定系统模板。

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

简单样式和资源字典

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

Silverlight 2 项目中不支持简单样式和资源字典。

可以通过在称为“资源字典”的单个文件中创建属性、样式和模板资源,来有效地创建主题。通过使用资源字典,可以在多个应用程序之间重用主题。还可以通过定义多个资源字典以提供类型相同但值不同的资源,来创建各种互换主题。例如,Expression Blend 应用程序自身对“深色”主题和“浅色”主题使用不同的资源字典,可通过单击“工具”菜单上的“选项”,然后更改“工作区”的“主题”,从而切换这两种主题。

对于用户自己的应用程序,Expression Blend 提供了一个名为“SimpleStyles.xaml”的、可以直接使用的资源字典,该字典包含常用控件(如按钮、列表框及其他控件)的一组样式。可以在“资源库”中“控件”选项卡上的“简单样式”下访问这些样式。使用一种简单样式在美工板上绘制控件时,会同时创建该控件的系统版本并应用该简单样式。例如,如果在美工板上创建“Button”系统控件,则产生的可扩展应用程序标记语言 (XAML) 如下所示:

<Button Content="Button" ... />

如果在美工板上创建“SimpleButton”,则产生的 XAML 中将包含对“SimpleButton”样式的引用:

<Button Content="Button" Style="{DynamicResource SimpleButton}" ... />

向美工板添加简单样式控件之后,SimpleStyles.xaml 资源字典文件将添加到项目中,并且将链接到 app.xaml 文件,以便这些样式定义在应用程序范围中。可以在“资源”面板中查看所有样式。

有关使用简单样式的示例,请参阅简单样式下的主题。有关如何管理资源的详细信息,请参阅资源概述

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