动手试验:使用效果设置按钮样式

This page applies to WPF projects only

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

在按钮上创建效果

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

    Cc295324.alert_tip(ZH-CN,Expression.30).gif提示:

    “资产”面板的“样式”类别中的“简单样式”下提供了简单样式控件。从列表中选择简单样式控件后,即可在美工板上进行绘制。

  2. 在“对象和时间线”面板中右键单击按钮,指向“编辑模板”,然后单击“编辑当前模板”。如果不希望更改 SimpleStyles.xaml 资源字典,则可以单击“编辑副本”(而不是“编辑当前模板”),以创建新模板并将其保存在文档中。

    有关创建副本的详细信息,请参阅创建资源

    Cc295324.alert_tip(ZH-CN,Expression.30).gif提示:

    若要退出模板编辑模式并返回到文档范围,请单击位于“对象和时间线”面板中对象树上方的“范围上移”Cc295324.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(ZH-CN,Expression.30).png

    若要返回到现有模板的模板编辑模式,请在“对象和时间线”面板中,右键单击要编辑其模板的对象,指向“编辑模板”,然后单击“编辑当前模板”。

  3. 在控件模板的编辑范围中,删除“Grid”对象的“Border”子对象。

  4. 单击“Grid”对象以将其激活,以便您可以添加子对象。

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

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

  7. 通过使用在将指针移到矩形左上角外部的两个图柄之一上时显示的修饰工具 Cc295324.8ff4c5e0-3b7f-49d7-97cb-ad373c3a7fe7(ZH-CN,Expression.30).png,或者使用“属性”面板的“外观”下的“RadiusX”和“RadiusY”属性,为“Rectangle”对象设置圆角。

  8. 从“资产”面板的“效果”类别中,将“DropShadowEffect”对象拖到“Rectangle”对象上。

    投影将作为子对象添加到“Rectangle”对象。

  9. 在“对象和时间线”面板中选择“DropShadowEffect”,然后在“属性”面板中调整效果的属性。将“ShadowDepth”属性设置为 20。

  10. 在“触发器”面板中,单击“IsMouseOver = True”触发器以激活触发器记录操作。在“属性”面板中,将“ShadowDepth”属性设置为 25。

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

    Cc295324.alert_tip(ZH-CN,Expression.30).gif提示:

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

  11. 在“触发器”面板中,单击“IsPressed = True”触发器以激活触发器记录操作。在“属性”面板中,将“ShadowDepth”属性设置为 10。

    将在“触发器”面板中的“活动时的属性”下显示一个新行,以反映在运行的应用程序中单击按钮时将发生的属性更改。

  12. 在“触发器”面板中,单击“默认值”以关闭触发器记录操作。

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

另请参见

任务

添加或删除触发器

概念

SimpleButton

使用触发器定义 WPF 控件的行为

应用效果