Silverlight应用程序样式设计全解析

# Silverlight 应用程序样式设计全解析 ## 1. 样式设计基础与工具概述 在 Silverlight 开发中，XAML 是设计和实现出色用户界面的关键。不过，若为每个控件和用户界面元素单独定制样式，XAML 代码会变得复杂难维护。此时，样式资源就派上用场了，它能让我们维护一组通用样式，在整个应用程序中使用。 ### 1.1 开发工具分工 不同的开发工具在 Silverlight 开发中有不同的侧重点： | 工具名称 | 目标用户 | 主要功能 | | ---- | ---- | ---- | | Visual Studio | 开发者 | 专注于代码开发，2010 版新增了支持拖放的设计界面，但设计功能相对有限。 | | Expression Blend | 用户界面和图形设计师 | 支持布局控件、样式和模板设计，以及创建和应用动画，还能在设计时填充示例数据。 | | Expression Design | 图形设计师 | 专注于矢量图形处理。 | | SketchFlow | 用户体验设计师 | 用于规划应用程序的流程和大致布局，生成原型。 | ### 1.2 工具优势对比 Expression Blend 有很多 Visual Studio 没有的设计相关功能： - **动画设计与应用**：能轻松创建动画，还可在设计时预览，无需先编译运行应用程序。 - **控件模板定制**：在定制控件模板方面比 Visual Studio 容易得多。 - **示例数据填充**：可在设计时填充示例数据，方便预览界面效果。 虽然 Visual Studio 2010 有一些设计功能，Expression Blend 也有一些代码相关功能，但两者的侧重点不同，相互补充。开发者和设计师可以在同一项目中和谐协作，使用 MVVM 设计模式能让这种协作更高效。 ### 1.3 用户体验设计误区 在软件项目中，用户体验设计常被误解。很多人将其与让应用程序更美观的图形设计混淆。实际上，用户体验设计师根据软件的功能需求，设计用户与软件交互的方式，而图形设计师则将这种交互流程转化为有吸引力的用户界面。而且，项目前期应主要关注用户体验设计，后期再进行样式设计。 ## 2. 样式资源的定义与使用 ### 2.1 样式资源的重要性 直接为控件属性赋值来设置样式会让 XAML 代码变得复杂难维护。使用样式资源可以避免这个问题，它能简化 XAML 代码，使控件定义和外观分离。样式资源类似于传统 HTML 开发中的 CSS 样式，可定义一组属性值并应用到控件上。 ### 2.2 样式资源的定义方式 样式资源有显式和隐式两种定义方式： #### 2.2.1 显式样式 显式样式需要为样式资源指定唯一的键，并通过 `StaticResource` 标记扩展引用。例如，有多个 `TextBox` 控件使用相同的属性值： ```xml <TextBox Name="FirstNameField" Margin="2" Background="LemonChiffon" Grid.Row="0" /> <TextBox Name="LastNameField" Margin="2" Background="LemonChiffon" Grid.Row="1" /> <TextBox Name="CompanyField" Margin="2" Background="LemonChiffon" Grid.Row="2" /> ``` 可以将这些属性定义为样式资源： ```xml <Style x:Key="UserFieldsStyle" TargetType="TextBox"> <Setter Property="Margin" Value="2" /> <Setter Property="Background" Value="LemonChiffon" /> </Style> ``` 然后在控件中引用该样式： ```xml <TextBox Name="FirstNameField" Grid.Row="0" Style="{StaticResource UserFieldsStyle}" /> <TextBox Name="LastNameField" Grid.Row="1" Style="{StaticResource UserFieldsStyle}" /> <TextBox Name="CompanyField" Grid.Row ```