从现有对象创建控件

项目
10/11/2017

在 Microsoft Expression Blend 中，可以使用“构成控件”功能，用美工板上的任意对象构成控件模板。“构成控件”工具将对象封装到一个可重用的样式资源中。

提示：
Expression Blend 中的对象是能够放到美工板上的任何内容，例如版式面板、形状、文本控件、图像、按钮、控件模板或任何其他用户界面 (UI) 设计元素。将 UI 元素放到美工板上，便会在应用程序中创建该元素的一个对象实例。

通过椭圆创建按钮

如果还没有打开项目，请打开项目或创建新项目。

有关详细信息，请参阅创建新项目。
在美工板上，使用“工具”面板中的“椭圆形” 绘制一个圆。若要使椭圆更显突出，可以在“属性”面板的“画笔”下更改其属性，以更改其外观。

有关详细信息，请参阅向对象的填充或笔划应用画笔。
右键单击椭圆，指向“分组”，然后单击布局容器的名称，例如“网格”。
在“对象和时间线”面板中选择了网格之后，单击“工具”菜单上的“构成控件”，以便将网格转换为按钮。

此时将打开“构成控件”对话框。
在“控件类型”下，单击要创建的控件的类型，例如“Button”控件。
在“名称(关键字)”下，选中第一个单选按钮（默认按钮），然后输入用于标识该按钮样式的名称。或者，可以选择“全部应用”选项，将该样式应用于美工板上尚未按名称引用样式的所有按钮。
在“定义位置”下，单击表明所需按钮样式定义范围的选项。单击“应用程序”，使按钮样式能够供应用程序中的任何文档使用。单击“本文档(Window: Window)”使按钮样式只能供当前文档使用。若要在应用程序的资源字典中定义按钮样式，请单击“资源字典”。
单击“确定”以退出“创建样式”对话框，并创建该按钮样式。

请注意，在“对象和时间线”面板中，椭圆对象将转换为一个按钮对象，其样式也将设置为新的按钮样式。

此外，该按钮样式将列在“资源”选项卡上定义该样式的节点中（例如，在“Window”节点中）。

显示在 Expression Blend 的“资源”选项卡中的新按钮样式

修改按钮的样式

若要修改刚才创建的按钮样式，请在“对象和时间线”面板中右键单击新的按钮对象，指向“编辑模板”，然后单击“编辑当前模板”。

美工板将切换到控件模板的编辑范围。

提示：
可以通过多种方式进入控件模板的编辑范围。例如，可以在“资源”选项卡中查看按钮样式，然后单击资源名称旁边的“编辑资源”按钮。此时会进入样式的编辑范围，然后可以通过以下方式转到控件模板的编辑范围：在“对象和时间线”面板中右键单击样式对象，指向“编辑模板”，然后单击“编辑当前模板”。若要退出控件模板的编辑范围，请在“对象和时间线”面板中单击“范围上移”。如果之前是从样式的编辑范围进入到控件模板的编辑范围的，此时将返回到样式的编辑范围。再次单击“范围上移”以返回到文档的编辑模式。

可以通过多种方式进入控件模板的编辑范围。例如，可以在“资源”选项卡中查看按钮样式，然后单击资源名称旁边的“编辑资源”按钮。此时会进入样式的编辑范围，然后可以通过以下方式转到控件模板的编辑范围：在“对象和时间线”面板中右键单击样式对象，指向“编辑模板”，然后单击“编辑当前模板”。

若要退出控件模板的编辑范围，请在“对象和时间线”面板中单击“范围上移” Cc295271.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(ZH-CN,Expression.30).png 。如果之前是从样式的编辑范围进入到控件模板的编辑范围的，此时将返回到样式的编辑范围。再次单击“范围上移”以返回到文档的编辑模式。

提示：
“构成控件”工具将原始对象（椭圆）封装到包含控件模板的样式资源中。样式定义了对应用该样式的对象（在本例中为按钮对象）设置的属性。控件模板定义了该对象的状态、结构和外观。

在控件模板中，有一个包含原始对象（椭圆）的“网格”面板和一个显示该按钮对象的内容的“ContentPresenter”元素。通过将对象放入“网格”面板中，可快速添加和排列其他元素。

新按钮样式的控件模板的结构

Cc295271.d16a098c-d0c2-4f72-8e2f-19ce6469c4f8(ZH-CN,Expression.30).png

通过查看资源的可扩展应用程序标记语言 (XAML)，即可了解样式和控件模板的关联方式。例如，按钮样式的结构可能如下所示：

  <Window.Resources>
    <Style x:Key="ButtonStyle1" ...>  
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="{x:Type Button}">  
            <Grid>
              <Ellipse>
                ...
              </Ellipse>
              <ContentPresenter .../>
            </Grid>
            <ControlTemplate.Triggers>
              ...
            </ControlTemplate.Triggers>
          </ControlTemplate>  
        </Setter.Value>
      </Setter>
    </Style>  
  </Window.Resources>

在“触发器”面板中，根据需要定义按钮的状态。例如，单击“IsMouseOver = True”，为用户鼠标经过按钮上时的状态激活触发器记录。在“对象和时间线”面板中选择该椭圆，然后在“属性”面板的“外观”下，将椭圆的“Fill”属性改为不同的颜色。请注意，“ellipse.Fill”的新属性更改已添加到“触发器”面板中的“活动时的属性”下，如下图所示。

说明：
可能需要调整“触发器”面板的大小，才能看到“活动时的属性”部分。若要调整其大小，请单击并拖动该面板的边框以及该面板内的边框。

更改将指针移动到按钮上时椭圆的“Fill”属性后的“触发器”面板

Cc295271.6be5825d-f291-410b-bc75-423fee8f5d00(ZH-CN,Expression.30).png

还可以向按钮添加动画。例如，在“触发器”面板中，单击“IsPressed = True”，为用户单击按钮时的状态激活触发器记录。仍然在“对象和时间线”面板中选定该椭圆形，并在按住 Shift 键和 Alt 键的同时拖动该椭圆形的一个转角。（Shift+Alt 键盘快捷方式可保持对象的中心点。）

或者，可以创建新的情节提要并通过“IsPressed”事件的“事件触发器”触发该情节提要来添加更复杂的动画。

有关详细信息，请参阅编写将对事件做出响应的代码。
根据需要定义了按钮的状态后，单击“对象和时间线”面板中的“范围上移”，以返回到文档的编辑范围。
若要测试状态，请在“项目”菜单上单击“运行项目”（或者按 F5），然后查看按钮状态能否正常工作。例如，将指针移到按钮上时，填充颜色应改变。

向按钮应用按钮样式

确保处于所需的编辑范围中。可以在任何范围中向按钮应用样式，其中包括控件模板的范围。
在美工板上，使用“工具”面板中的“按钮” 绘制一个按钮。
在“对象和时间线”面板中右键单击新的按钮对象，依次指向“编辑模板”和“应用资源”，然后从列表中选择所需的按钮样式。

也可以使用“对象”菜单上的“编辑样式”和“编辑模板”命令来应用样式资源。

通过右键单击方式向按钮对象应用按钮样式