动手试验:创建变换按钮

Cc294737.bf9c77b1-ba7a-4f3b-8380-d05728d208d1(ZH-CN,Expression.30).png

可根据用户交互来更改按钮的外观,从而在按钮模板中创建变换效果。除了触发动画时间线或触发属性更改来产生变换效果以外,还可以使用以下过程创建多个“网格”面板,以分别代表按钮的每个状态,然后切换各个“网格”面板的“Visibility”属性。

在按钮上创建变换效果

  1. 在美工板上绘制“SimpleButton”。

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

    “资产”面板 Cc294737.0d8b8d29-1af9-418f-8741-be3097d76eab(ZH-CN,Expression.30).png 的“样式”类别中的“简单样式”下提供了简单样式控件。从列表中选择简单样式控件后,即可在美工板上进行绘制。

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

    有关创建副本的详细信息,请参阅创建或修改模板

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

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

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

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

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

  5. 从“工具栏”中,将三个“Grid”控件 Cc294737.a87ee957-7fbf-4135-a6ab-6de7e63160aa(ZH-CN,Expression.30).png 添加到模板的根 Grid 对象。若要让新的 Grid 对象填充父 Grid 对象,请选择这些对象,指向“对象”菜单上的“自动调整大小”,然后单击“填充”。

  6. 右键单击“ContentPresenter”对象,指向“排序”,然后单击“置于顶层”,以将 ContentPresenter 对象放到新的“Grid”对象之前。

  7. 在“对象和时间线”面板中,右键单击每个新的网格对象,然后单击“重命名”,以将这些对象分别重命名为“Default”、“Pressed”和“MouseOver”。

  8. 若要设置触发器行为,您必须让每个触发器仅显示一个网格对象。例如,在“触发器”面板中选择“Default”,然后在按住 Ctrl 键的同时单击“Pressed”和“MouseOver”网格对象,即可选择这些对象。然后,在“属性”面板的“外观”下,将“Visibility”属性设置为“Hidden”。

  9. 在“触发器”面板中单击“IsMouseOver = True”,选择“Pressed”和“Default”网格对象,然后在“属性”面板的“外观”下,将“Visibility”属性设置为“Hidden”。选择“MouseOver”网格对象,并将“Visibility”属性设置为“Visible”。

  10. 最后,在“触发器”下选择“IsPressed = True”后,选择“MouseOver”和“Default”网格对象,然后在“属性”面板中的“外观”下,将“Visibility”属性设置为“Hidden”。选择“Pressed”网格对象,并将“Visibility”属性设置为“Visible”。

  11. 此时便可以设计每个网格对象,以便在“触发器”面板中选择的不同情况下显示这些对象。

    可以使用绘图工具和动画时间线来创建独特的按钮行为。

    有关详细信息,请参阅绘制对象动态显示对象

    若要在设计某个网格对象时隐藏其他网格对象,可以在“对象和时间线”面板中,单击其他网格对象旁边的“隐藏/显示”Cc294737.3df73f86-a06e-4df8-b696-261c23fac3cc(ZH-CN,Expression.30).png

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

另请参见

概念

SimpleButton