为项目中的控件创建外观

项目
10/11/2017

通过使用静态资源来定义控件应用的模板，可自定义这些控件的外观。例如，可以为按钮创建一个模板，该模板使用图像而不是矩形来构建该按钮的外观。

若要在不同的控件模板或不同的用户控件之间创建统一的外观，可以将各个属性转换为静态资源，然后将其应用于这些模板和用户控件。例如，可以将按钮模板的边框颜色转换为资源，然后将该颜色资源应用于复选框模板或自定义用户控件的边框属性。

若要在其他项目中重用这些模板和资源，可以将这些资源移入资源字典文件中，然后将该文件添加到其他项目。该资源字典文件从而将成为应用程序的外观库。

创建控件的模板

若要自定义任何控件的模板，可以按照修改不同状态的系统控件的外观和修改状态更改之间的过渡时间中的过程操作。

该模板将成为“资源”面板中列出的资源。

有关如何在创建资源后加以修改的信息，请参阅修改资源。

创建用户控件

若要创建可以从头设计的自定义用户控件，可以按照在项目中创建新用户控件中的过程操作。

将属性转换为静态资源

在美工板上选择一个要在其他控件中重用其属性值的对象。

在“属性”面板的属性视图 Dd185519.cee1494c-ef95-4dd4-9fbc-9d02edfa78b7(zh-cn,Expression.40).png 中，找到要重用的属性。

提示：
您可以使用“属性”面板中的“搜索”文本框，通过搜索属性名称中的字符迅速找到该属性。键入的文本将会筛选属性列表。若要还原“属性”面板，请单击“搜索”文本框旁的“清除”。

您可以使用“属性”面板中的“搜索”文本框，通过搜索属性名称中的字符迅速找到该属性。

Dd185519.a1e4026a-4e48-4f0c-8898-3783121e57fa(zh-cn,Expression.40).png

键入的文本将会筛选属性列表。

Dd185519.c286ad76-70a6-41f7-bed6-d6d4ad69e549(zh-cn,Expression.40).png

若要还原“属性”面板，请单击“搜索”文本框旁的“清除” Dd185519.1d1f5548-6c7a-46bd-9d93-591edc576888(zh-cn,Expression.40).png 。

执行下列操作之一：
- 如果要重用“画笔”，请单击画笔属性（如 Fill 或 Background 属性）旁的“高级选项”，然后单击“转换为新资源”。
- 如果要重用画笔所应用的颜色，请选择所需的画笔（如果是“纯色画笔”），或者选择与所要重用的颜色相对应的梯度停止点（如果是“渐变画笔”）。然后，单击“将颜色转换为资源”。
- 如果要重用数值或其他值类型，请单击该属性旁的“高级选项”按钮，然后单击“转换为新资源”。
在显示的对话框（名为“创建 <类型> 资源”）中，为资源键入一个有意义的名称，然后单击“确定”。

此时，将会创建资源，并将其列在“资源”面板中。

有关如何在创建资源后加以修改的信息，请参阅修改资源。

向其他属性应用资源

向属性应用资源的方法有很多。

将资源从“资源”面板中拖动加以应用

在“资源”面板中，将资源拖到美工板上的控件。

将字体系列资源拖到复选框控件上
从显示的下拉菜单中，选择要应用资源的控件的属性。

向复选框的“FontFamily”属性应用字体系列资源

利用“高级选项”菜单来应用资源

在“属性”面板的属性视图中，找到要设置为资源的属性。
单击“高级选项”，指向“本地资源”，然后从显示的下拉列表中选择资源名称。

应用画笔资源

在“属性”面板的属性视图中，选择要设置为资源的画笔。
在“画笔资源”选项卡中，选择资源的名称。

应用颜色资源

在“属性”面板的属性视图中，选择要将其颜色设置为资源的画笔。如果该画笔是“渐变画笔”，则选择与该颜色相对应的梯度停止点。
在“颜色资源”选项卡中，选择资源的名称。

向相同类型的其他控件应用模板

向控件应用模板的方法有很多。

通过在“资产”面板中选择模板并绘制新控件来应用模板

在“工具”面板中，单击“资产”。
在“资产”面板的“样式”类别中，选择所创建的模板。
在美工板上，使用指针绘制范围框。

此时，将绘制一个与选定模板相匹配的新控件，并且自动应用该模板。

通过从“资源”面板中拖动模板来应用模板

在“资源”面板中，将模板资源拖到美工板的控件上。
从显示的下拉菜单中，选择“Style”属性。

利用“高级选项”菜单来应用模板

选择要应用模板的对象。
在“属性”面板的属性视图中，找到“ Style ”属性。
在 Style 属性旁边，单击“高级选项”，指向“本地资源”，然后从显示的下拉列表中选择模板的名称。

将资源移到 App.xaml 文件中

如果创建资源时未曾在 App.xaml 文件中定义这些资源，可以通过在“资源”面板中进行拖动的方式将资源移到 App.xaml 文件中。

提示：

如果未看到资源，则可能需要展开文档节点（通常是 Page.xaml）下方的节点。

提示：
如果未看到资源，则可能需要展开文档节点（通常是 Page.xaml）下方的节点。

将资源复制到其他项目

在“项目”面板中，双击 App.xaml 文件，在美工板上将其打开。
在“设计”视图中无法查看 App.xaml 文件，因此请选择位于美工板右侧的“XAML”选项卡。

资源在 <Application.Resources> 标记之间定义。

<Application.Resources>
</Application.Resources>

在这些标记之间，属性资源是用表示所属属性类型的标记定义的。“ Key ”属性表示为资源指定的名称。

  <FontFamily x:
    Key="ApplicationFont"
  >Segoe UI</FontFamily>
  <LinearGradientBrush x:
    Key="BorderBrush"
   EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="#FF000000"/>
    <GradientStop Color="#FFC64545" Offset="1"/>
  </LinearGradientBrush>

模板在 <Style> 标记之间定义。“ Key ”属性表示为模板指定的名称。

  <Style x:
    Key="ImageButton"
   TargetType="Button">
    <Setter Property="Background" Value="#FF1F3B53"/>
    <Setter Property="Template">
      ...
    </Setter>
  </Style>

突出显示表示要移到其他项目中的资源的 XAML，然后按 Ctrl+C 加以复制。
在 Expression Blend 中打开其他项目，在“XAML”视图中在美工板上打开 App.xaml 文件，将指针直接插在 <Application.Resources> 标记之后，然后按 Ctrl+V 来粘贴资源。
确保先前已有的所有资源中的所有项名称均未重复。

生成项目 (CTRL+SHIFT+B) 以确保所复制的新资源准确无误。

提示：
再者，还可以将整个 App.xaml 文件复制到新项目中，然后只需将“ x:Class ”属性中的名称更改为新项目的名称即可。 `<Application` `xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"` `xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"` `x:Class="ProjectName.App"` `...`

提示：

再者，还可以将整个 App.xaml 文件复制到新项目中，然后只需将“ x:Class ”属性中的名称更改为新项目的名称即可。

<Application

xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"

x:Class="ProjectName.App" ...

后续步骤

您可以在 Expression Community website （Expression 社区网站）上的“操作方式”视频教程中观看如何创建按钮和复选框控件的外观。

另请参阅

概念

常用 Silverlight 控件的样式提示
 WPF 简单样式的样式提示

通过