深入探索Silverlight控件模板与自定义控件

### 深入探索Silverlight控件模板与自定义控件 在Silverlight应用开发中，灵活运用控件模板和自定义控件能够极大地提升应用的视觉效果和用户体验。下面将详细介绍颜色复用、部件与状态模型、状态理解、焦点提示以及过渡效果等关键内容。 #### 颜色复用 在Silverlight应用里，通常会使用一组自定义控件模板来改变所有常见控件的外观，这就需要在控件间共享某些细节，比如颜色。实现颜色共享的方法有以下两种： - **直接定义资源**：将硬编码的值从样式和控件模板中提取出来，定义为单独的资源。 ```xml <SolidColorBrush x:Key="BackgroundBrush" Color="Red"></SolidColorBrush> ``` 然后在样式和控件模板中使用这些资源： ```xml <Style x:Key="ButtonStyle" TargetType="Button"> <Setter Property="Foreground" Value="White"></Setter> <Setter Property="Background" Value="{StaticResource BackgroundBrush}"></Setter> <Setter Property="Template" Value="{StaticResource ButtonTemplate}"></Setter> </Style> ``` 这种方法的优点是能方便地更换边框颜色，但可能会使设计变得复杂。 - **分两步定义资源**：先将颜色定义为单独的资源，再在画笔资源中使用。 ```xml <Color x:Key="BackgroundColor">#FF800000</Color> <SolidColorBrush x:Key="ButtonBorderBrush" Color="{StaticResource BackgroundColor}"></SolidColorBrush> ``` 这种两步走的方法可以在多种不同的方式中复用配色方案，避免在标记中重复颜色信息。通过仔细应用这种模式，只需修改一组颜色资源，就能改变整个应用的配色方案。 需要注意的是，在将颜色定义为资源时，其内容必须是颜色名称或十六进制的HTML颜色代码，不能使用红、绿、蓝分量在XAML中声明颜色。 #### 部件与状态模型 当你尝试使用之前创建的按钮时，可能会发现它令人失望，因为它只是一个圆角的红色矩形，鼠标悬停或点击时没有视觉反馈。在WPF中可以使用触发器解决这个问题，但Silverlight不支持触发器，需要在控件模板中包含特定命名的元素和动画。 要理解如何创建能与控件后端代码配合的模板，可查看Silverlight文档（[点击查看](http://tinyurl.com/352brmx)），其中详细介绍了每个控件的默认模板。不过这些模板通常非常庞大，为了将模板分解为可管理的部分，需要理解部件与状态模型。 - **部件（Parts）**：是控件期望在模板中找到的命名元素。 - **状态（States）**：是在特定时间应用的命名动画。 如果控件模板缺少特定的部件或状态，通常不会导致错误，但如果该部件或状态是控件核心功能的关键要素，控件可能无法按预期工作。了解控件模板需要提供哪些部件和状态有两种途径： - **查看文档**：每个控件特定的页面会在两个单独的表格中列出该模板所需的部件和状态。 - **使用反射**：在代码中使用反射来检查控件类，每个部件由应用于类声明的单独的`TemplatePart`属性表示，每个状态由单独的`TemplateVisualState`属性表示。 #### 理解按钮控件的状态 以按钮控件为例，要创建一个完整的按钮，需要提供六个状态： ```xml <TemplateVisualState(Name:="Normal", GroupName:="CommonStates"), TemplateVisualState(Name:="MouseOver", GroupName:="CommonStates"), TemplateVisualState(Name:="Pressed", GroupName:="CommonStates"), TemplateVisualState(Name:="Disabled", GroupName:="CommonStates"), TemplateVisualState(Name:="Unfocused", GroupName:="FocusStates"), TemplateVisualState(Name:="Focused", GroupName:="FocusStates")> Public Class Button Inherits ButtonBase ... End Class ``` 状态被分组放置，组是互斥的，即控件在每个组中只有一个状态。按钮有两个状态组：`CommonStates`和`FocusStates`。在任何给定时间，按钮从`CommonStates`组中取一个状态，从`FocusStates`组中取一个状态。 为了定义状态组，必须在控件模板的根元素中添加`VisualStateManager.VisualStateGroups`： ```xml <ControlTemplate x:Key="ButtonTemplate" TargetType="Button"> <Grid> <VisualStateManager.VisualStateGroups> ... </VisualStateManager.VisualStateGroups> <Border x:Name="ButtonBorder" BorderBrush="Orange" BorderThickness="3" CornerRadius="15"> <Border.Background> <SolidColorBrush x:Name="ButtonBackgroundBrush" Color="Red" /> </Border.Background> <ContentPresenter ... /> </Border> </Grid> </ControlTemplate> ``` 每个状态对应一个包含一个或多个动画的故事板。当用户将鼠标移到按钮上时，可以使用动画执行以下任务： - **显示新视觉元素**：更改控件模板中元素的`Opacity`属性，使其显示出来。 - **更改形状或位置**：使用`TranslateTransform`微调元素的位置，或使用`ScaleTransform`或`RotateTransform`微调元素的外观。 - **更改照明或颜色**：对用于绘制背景的画笔进行动画处理，例如使用`ColorAnimation`更改纯色画笔的颜色，或对更复杂的画笔进行动画处理以实现更高级的效果。 以下是一个当用户将鼠标移到按钮上时更改背景颜色的示例： ```xml <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="MouseOver"> <Stor ```