4、利用Silverlight增强网站的视觉与交互效果

利用Silverlight增强网站的视觉与交互效果

1. 样式编辑与按钮定制

在设计界面时，我们可以对按钮的样式进行修改。首先，将名称改为 smallerTextStyle 并点击“确定”，然后使用“属性”选项卡将字体大小改为 9，也可以自由更改其他属性。完成后，点击“对象和时间线”选项卡上的向上按钮退出样式编辑模式。回到主视图后，选择“主页”按钮，在“属性”选项卡的搜索框中输入“style”，在“杂项”下会看到一个带有小方块的“Style”属性，点击该方块会弹出“高级属性选项”上下文菜单，从中选择 Local Resource|smallerTextStyle 。运行解决方案或查看画板，就能看到按钮的变化。我们还可以尝试将此样式应用于其他按钮、编辑现有样式或创建新样式。应用 smallerTextStyle 样式的按钮文本会变小，而应用默认样式的按钮文本会更大。

然而，仅通过样式改变控件外观有一定局限性，无论做多少更改，按钮仍然看起来像老式按钮。这时就需要用到“皮肤化”（skinning）技术。

2. 控件的皮肤化

Silverlight 中的控件具有很强的灵活性和可定制性，这源于控件拥有视觉树（VisualTree）和逻辑树（LogicalTree）。视觉树处理控件中的所有视觉元素，逻辑树处理所有逻辑元素。所有 Silverlight 控件都带有默认模板，我们可以通过自定义控件的视觉树来覆盖这个默认模板。

设计师可以直接在 Blend 中使用 XAML 进行工作，也可以使用支持导出为 XAML 的设计工具，如 Expression Design