修改不同状态的系统控件的外观
控件的外观因其所处的状态而异。例如,将鼠标指针移到按钮的上方时,按钮的颜色会略有改变。“MouseOver”是按钮的状态之一。您可以自定义不同状态的系统控件的外观。
以下过程使用了按钮,但是您可以自定义 Microsoft Expression Blend 2 随附的任何系统控件或从“Control”类继承的所有已导入的自定义 Silverlight 2 控件。
修改不同状态的按钮的外观
创建系统控件的可重用模板,如“Button” 控件。
如果您尚未处于模板的编辑模式,则右键单击美工板上的控件,并指向“编辑控件部件(模板)”,然后单击“编辑模板”。可以根据情况选择对象,然后单击痕迹导航栏中的“模板”。
在模板编辑模式下,按钮的状态(如“Normal”和“MouseOver”)会显示在“交互”面板中的“状态”下。这些状态包含在状态组(如“CommonStates”和“FocusStates”)中。
模板的部件显示在“对象和时间线”之下。可以针对选定状态修改这些部件的外观。
单击“状态”下的“MouseOver”。请注意,美工板顶部会显示一个红色圆圈,告知状态记录功能处于启用状态。这意味着,系统将会针对选定的状态记录所有属性所做的更改。在“对象和时间线”下,如果模板部件的属性的设置方式与选择 Base 时的方式不同,便会用带红色圆圈的展开器按钮来标识。
若要在按钮处于“MouseOver”状态时更改其大小,请单击“对象和时间线”下的“[Grid]”。
提示: “网格” 是一种版式面板,可按照水平对齐、垂直对齐和边距来排列子对象。有关版式面板的详细信息,请参阅布局概述和网格面板。
在“属性”面板中的“转换”下,单击“缩放” 选项卡。将“X”和“Y”值都改为 1.1。
保存所做的工作 (Ctrl+S),然后按 F5 以生成并测试应用程序。在浏览器窗口中打开应用程序之后,可将鼠标指针移到按钮的上方以查看其是否展开。
疑难解答
某些模板部件的属性绑定到模板之外的值。例如,“Background”部件的“Fill”属性可用模板绑定到该按钮的“Background”属性。这表示,绘制使用该模板的按钮时,该模板将采用对按钮本身设置的值。使用模板绑定,不但可以设计自定义的控件,而且可以在应用程序中加入控件时后做某些更改。
在模板中,绑定属性是由橙色的范围框来标识的。如果要更改模板绑定属性,请先单击该属性旁的“高级属性选项” 按钮,然后单击“重置”。
不能将自定义状态和状态组添加到系统控件的模板中。但是,可以创建自定义用户控件,然后定义自定义状态并添加代码,以根据用户交互更改状态。有关详细信息,请参阅在 Silverlight 2 项目中创建新用户控件、定义用户控件的可视状态和过渡时间和更改用户交互的响应状态。
如果您在浏览器中查看应用程序时遇到问题,则可能没有安装正确的 Silverlight 2 运行时。有关详细信息,请参阅安装 Silverlight 2 工具和运行时。
后续步骤
您可以更改将鼠标指针移到按钮上方时按钮展开所需的时间。有关详细信息,请参阅修改系统控件状态改变的过渡时间。
您可以添加动画,例如使按钮在鼠标指针移到其上方时螺旋盘转。有关详细信息,请参阅添加状态改变后显示的动画。
您可以将此模板应用到项目中的其他按钮上,也可以绘制已指定模板的新按钮。有关详细信息,请参阅应用样式资源。