创建或编辑控件模板

此页适用于 WPF 和 Silverlight 2

Microsoft Expression Blend 2 项目中的控件模板通过定义控件内包含的子控件来定义其外观。例如,“TextBox”的控件模板包含一个名为“Bd”的 Border 元素,而后者又包含一个名为“PART_ContentHost”的“ScrollViewer”元素。在对美工板上的“TextBox”应用该控件模板时,“ScrollViewer”元素将显示“TextBox”的内容。

编辑 TextBox 控件的模板

Cc294908.5b3d19c3-460f-4cd1-8a35-262f8b3005b1(zh-cn,Expression.10).png

默认的控件模板使用动态主题,会根据应用程序是运行于 Microsoft Windows XP 计算机上还是运行于 Windows Vista 计算机上而改变控件的外观。您可以修改控件模板中的元素(控件部件),在控件内重排元素或绘制更多元素。但是,如果修改系统控件的模板,则您的控件在 Windows XP 和 Windows Vista 上的外观将变得一样。有关详细信息,请参阅样式和模板概述中的“主题和简单样式”一节。

控件模板以样式资源的形式保存,可应用于同一类型的其他控件。

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

您可以在控件模板中配置触发器,对属性的更改(如 IsMouseOver)做出响应。例如,可以为 TextBox 创建一个属性触发器,用于在鼠标指针移到 TextBox 上时更改背景颜色。

如果您希望创建一个事件触发器,以便通过更改属性或启动动画对事件做出响应,则必须在样式中创建该触发器。有关详细信息,请参阅编辑样式

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

更改控件的模板可能会破坏控件的功能。除了编辑系统控件的控件模板以外,您还可以利用预先设置样式的简单控件来随意设计该模板。有关详细信息,请参阅使用简单样式

如果任何一种简单样式都不能满足您的需要,而且您需要修改系统控件的模板,请记住下列注意事项:

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

  • 切勿重命名或修改名称以“PART_”开头的任何元素,其原因是实现该控件的代码中引用了这些元素。

  • 请勿重置或更改“属性”面板中的任何绑定。这些绑定由属性周围的黄色突出显示框标识,或者由黄色的“高级属性选项”按钮标识。

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

创建控件模板

  1. 在“对象和时间线”下或在美工板上,选择要从中创建控件模板的对象,然后执行下列操作之一:

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

    • 右键单击“对象和时间线”下的对象,再指向“编辑控件部件(模板)”。

  2. 指向“编辑模板”,然后执行下列操作之一:

    • 若要新建空模板,请单击“创建空模板”。

    • 若要基于当前正由选定元素使用的模板(无论该模板是对象的默认模板,还是先前创建的自定义模板)创建新模板,请单击“编辑副本”。

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

      如果启用了“编辑模板”选项,则此对象已应用了模板。您可以选择编辑此模板。

    此时,将显示“创建样式资源”对话框。这是因为控件模板存储在样式资源中。

  3. 在“资源名(关键字)”下,执行下列操作之一:

    • 若要为该元素创建新的命名样式,请输入关键字名称。其他元素可通过此名称引用该样式,从而应用该模板。

    • 若要创建将由此类型的所有元素使用的样式,请选择“全部应用”。

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

      在要创建的样式元素的 XAML 中,会将一个名为“TargetType”的属性设置为要为其创建样式的元素的类型。只有输入了关键字名称(上面的第一个选项),才会设置“x:Key”属性。如果存在“x:Key”属性,则样式只能应用到通过关键字名称指定该样式的元素;如果没有“x:Key”属性,则能够将样式应用到此类型的所有元素。例如,下面的样式元素将不能应用于美工板上的所有按钮。

      <Style x:Key="ButtonStyle1" TargetType="{x:Type Button}"...

  4. 在“定义位置”下,选择选项以确定要定义样式的位置:

    • 若要使应用程序中的任何文档都能使用该样式,请选择“应用程序”。

    • 若要使样式只能由当前文档使用,请选择“本文档(Window: Window)”

    • 若要在资源字典文件中定义可以在其他项目中重用的样式,请选择“资源字典”。接下来,可以选择现有的资源字典文件,或者“新建”资源字典文件。

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

      Silverlight 2 中不支持资源字典。

  5. 单击“确定”,以退出对话框并打开该样式以供编辑。

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

    您可以在样式内高效地创建新的模板资源。该资源将成为本地资源,并且可以使用“资源”面板轻松进行查看和修改。

  6. 请注意,新的 Expression Blend 2 痕迹导航栏将位于美工板的顶部。

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

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

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

  7. 通过添加或重排子元素或者在“交互”面板中添加属性触发器,修改模板。如果要修改系统控件的模板,请遵循上面提及的注意事项。

  8. 若要退出样式的编辑范围,请单击“对象和时间线”下的“范围上移”按钮 Cc294908.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(zh-cn,Expression.10).png。此操作会返回到文档的编辑范围。

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

    请注意,为对象创建或应用样式资源后,将在“属性”面板中为选定对象的“Style”属性显示绿色突出显示框,以指明该对象现已绑定或链接到此样式资源。

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

编辑美工板所绘对象的模板

  • 在美工板上或在“对象和时间线”下,单击某个对象以将其选中,然后执行下列操作之一:

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

    • 右键单击“对象和时间线”下的对象,指向“编辑控件部件(模板)”,然后单击“编辑模板”。

    • 在“属性”面板中,单击“Style”属性(由于以前对此元素应用了样式,此属性应以绿色突出显示),然后单击快捷菜单中的“编辑资源”。在进入样式的编辑范围之后,右键单击“对象和时间线”下的“Style”对象,指向“编辑控件部件(模板)”,然后单击“编辑模板”。

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

    如果禁用了“编辑模板”选项,则尚未对该对象应用任何模板。

    Microsoft Expression Blend 将进入模板的编辑范围。

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

编辑模板资源

  • 在“资源”面板中,找到资源名,然后单击该名称旁边的“编辑资源”按钮。

    Expression Blend 将进入模板的编辑范围。

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

修改模板

  1. 当处于模板的编辑范围内时,在“交互”面板中添加属性触发器,或者向模板中添加子元素。如果要修改系统控件的模板,请遵循上面提及的注意事项。

  2. 若要退出模板的编辑范围,请单击“对象和时间线”下的“范围上移”按钮 Cc294908.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(zh-cn,Expression.10).png

    此操作会返回到文档的编辑范围。

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

    请注意,在为对象创建或应用模板资源之后,将在“属性”面板中为选定对象的“Style”属性显示绿色突出显示框,以指明该对象现已绑定或链接到此样式资源。

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

另请参见

概念

使用简单样式

动手试验:使用位图效果创建按钮