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

在 Microsoft Expression Blend 中，除了可以使用属性触发器根据用户交互来更改按钮的外观之外，还可以对每种状态应用一种位图效果。

在按钮上创建位图效果

1. 在 Expression Blend 中的美工板上绘制 SimpleButton。

   提示：
   “资源库” 中的“控件”选项卡的“简单样式”类别中提供了简单样式控件。从列表中选择简单样式控件后，即可在美工板上进行绘制。

2. 在“对象和时间线”下右键单击该按钮，指向“编辑控件部件(模板)”，然后单击“编辑模板”。如果不希望更改 SimpleStyles.xaml 资源字典，则可以单击“编辑副本”而不是“编辑模板”，以创建新模板并将其保存到文档中。有关创建副本的详细信息，请参阅创建资源。

   提示：
   若要退出模板编辑模式并返回到文档范围：请单击位于“交互”面板中的元素树上方的“范围上移” 按钮。 若要返回到现有模板的模板编辑模式：请在“对象和时间线”下，右键单击要编辑其模板的元素，指向“编辑控件部件(模板)”，然后单击“编辑模板”。

3. 在控件模板的编辑范围中，删除“Grid”的“Border”子元素。

4. 双击“Grid”元素将其激活，以便您可以添加子元素。

5. 在网格中绘制一个 Rectangle 对象，然后在“属性”面板的“画笔”下，将“Fill”属性设置为黄色。

6. 右键单击该“Rectangle”元素，指向“排序”，然后单击“置于底层”，将其放到“ContentPresenter”元素之后。

7. 通过使用在将鼠标指针移到矩形左上角外部的两个图柄之一上时显示的修饰工具 ，或者使用“属性”面板的“外观”下的“RadiusX”和“RadiusY”属性，为“Rectangle”元素设置圆角。

8. 仍然选定“Rectangle”，然后在“属性”面板的“外观”下的“高级” 部分中找到“BitmapEffect”属性。单击下拉箭头，然后单击“棱台”。将“BevelWidth”属性设置保留为 5，但更改其他棱台属性，直到获得所需的效果为止。

9. 在“交互”面板的“触发器”下，单击“IsMouseOver = True”触发器以激活触发器记录操作。在“属性”面板中，再次单击“BitmapEffect”属性旁边的下拉箭头，单击“棱台”，然后将“BevelWidth”属性值改为 10。

   将在“触发器”的“活动时的属性”下显示一个新行，以反映将在鼠标移到按钮上时发生的属性更改。

   提示：
   可能必须调整“交互”面板的窗口，才能看到“触发器”下的所有触发器和操作。请使用鼠标调整窗口的大小。

10. 在“交互”面板的“触发器”下，单击“IsPressed = True”触发器以激活触发器记录操作，然后在“属性”面板中，再次单击“BitmapEffect”属性旁边的下拉箭头，单击“棱台”，再将“BevelWidth”属性更改为 2。

    将在“触发器”的“活动时的属性”下显示一个新行，以反映将在鼠标单击按钮时发生的属性更改。

11. 在“交互”面板的“触发器”下，单击“默认值”以关闭触发器记录操作。

12. 测试应用程序 (F5) 以查看效果。

    提示：
    位图效果不能采用硬件加速，因此最好设置一个显式值，而不要尝试使用事件触发器和动画时间线动态显示多个值。

另请参见

概念

SimpleButton

添加或删除触发器

触发器概述

向对象添加位图效果