Silverlight应用的样式设计与高级XAML及数据绑定技巧

# Silverlight 应用的样式设计与高级 XAML 及数据绑定技巧 ## 1. Silverlight 样式设计 ### 1.1 Silverlight 工具包主题 Silverlight 工具包包含一系列预定义主题，可用于项目中，对标准 Silverlight 控件和工具包控件进行重新模板化，为应用带来全新外观。可以直接使用这些主题，也能根据喜好进行修改。更多信息可在 [Silverlight 工具包的 CodePlex 网站](http://silverlight.codeplex.com) 查找。 ### 1.2 Silverlight 导航/业务应用主题项目模板 微软开始发布项目模板，这些模板既能重构应用的视觉布局，又能为所有核心 Silverlight 和 Silverlight 工具包控件重新设置主题（即定义新的控件模板）。 操作步骤如下： 1. 通过 Visual Studio 的扩展管理器，从 Visual Studio 在线库下载并安装这些模板。 2. 在在线库中，导航到“Templates ➤ Silverlight”类别，即可找到它们。 目前，只有 Silverlight 导航应用项目类型的主题可作为项目模板安装，但可以在 [此处](www.microsoft.com/downloads/details.aspx?FamilyID=e9da0eb8-f31b-4490-85b8-92c2f807df9e&displaylang=en) 下载实现这些主题的 Silverlight 业务应用项目。安装的每个主题都会在 Visual Studio 的“新建项目”对话框的 Silverlight 类别中显示一个项目模板，创建项目时可使用。当前可用主题如下： - Accent Color - Cosmopolitan - Windows 7 ### 1.3 图标和图像 在应用中有效使用图标和图像可增强视觉吸引力。若没有预算聘请图形设计师，购买库存图标库是可行且相对廉价的选择。大多数图标库以光栅文件（如 .png 文件）形式提供，部分公司开始包含或单独出售原始矢量图像。 | 文件类型 | 优点 | 缺点 | 适用场景 | | ---- | ---- | ---- | ---- | | .png 文件 | 在 Silverlight 中运行良好 | 不可无损缩放 | 不需要缩放的小图像（如图标） | | 矢量图像（XAML 格式） | 可无损缩放、易于修改、文件通常较小 | 更消耗 CPU | 较大图像（尤其是需要改变大小的图像） | 矢量图标常以 Adobe Photoshop (.psd)、Adobe Illustrator (.ai) 或 Scalable Vector Graphics (.svg) 文件形式存在，需转换为 XAML 才能在 Silverlight 应用中使用。若有 Adobe Illustrator，可使用其插件导出为 XAML；也可在 Expression Blend 中使用“File ➤ Import Adobe Illustrator File”菜单选项，或在 Expression Design 中使用“File ➤ Open”打开这些文件。购买图标或图像时，最好选择已转换为 XAML 文件的，以避免转换问题。若购买的是 XAML 格式的图标或图像，要确保是为 Silverlight 格式化的，而非 WPF。若包含 Expression Design 文件类型，可使用其导出针对 Silverlight 的新 XAML 文件。 ### 1.4 动画 应用外观设计好后，可添加动画效果增添亮点。但使用动画要适度，避免分散用户注意力。过渡动画应快速，不影响用户与应用的交互。动画使用故事板定义各部分的开始和停止时间，Silverlight 处理帧之间的过渡。创建动画是个大话题，Expression Blend 是创建动画的重要工具。 ### 1.5 像素着色器/效果 像素着色器可在控件显示前为其添加效果，如阴影、模糊、反射和颜色改变等。Silverlight 4 运行时包含两种像素着色器： - DropShadowEffect - BlurEffect 应用这些效果只需将像素着色器分配给控件的 Effect 属性。示例代码如下： ```xml <Button Content="Shadow" Width="75" Height="23"> <Button.Effect> <DropShadowEffect Opacity="0.5" /> </Button.Effect> </Button> ``` 可以使用高级着色器语言 (HLSL) 创建自定义像素着色器，然后使用 DirectX SDK 中的 fxc 命令行工具将其编译为 .ps 文件。不过，通过网络搜索可能找到所需效果的像素着色器。需注意，像素着色器效果以软件方式渲染，可能消耗较多 CPU，应谨慎使用。 ### 1.6 其他样式技巧 #### 1.6.1 在 XAML 中定义常量 若要维护一组可被多个控件或样式资源使用的常量值，可将这些值定义为资源，并使用键引用。示例如下： ```xml <SolidColorBrush x:Key="BackgroundColorResource" Color="LemonChiffon "/> ``` 可直接将此资源分配给控件： ```xml <TextBox Background="{StaticResource BackgroundColorResource}" /> ``` 也可在样式资源定义中使用： ```xml <Style x:Key="UserFieldsStyleBase" TargetType="TextBox"> <Setter Property="Margin" Value="2" /> <Setter Property="Background" Value="{StaticResource BackgroundColorResource}" /> </Style> ``` 此技巧在定义主题文件时特别有用，可在一处维护核心配色方案，在不同主题文件中更改值。 #### 1.6.2 恢复控件的默认样式 若不想对应用了隐式样式的控件进行样式设置，可将控件的 Style 属性设置为 null，示例如下： ```xml <TextBox Style="{x:Null}" /> ``` 该控件将恢复默认样式。 ## 2. 高级 XAML 和数据绑定 ### 2.1 高级 XAML 特性 #### 2.1.1 XAML 中的注释 可使用标准 X