谈谈Silverlight 2中的视觉状态管理 Part2

谈谈Silverlight 2中的视觉状态管理 Part22011-09-13 cnblogs TerryLee概述

在WPF和Silverlight中的控件模板支持自定义控件的观感，所谓的外观，指控件的视觉效果；而感觉则是控件交互的响应性，如在控件上按下鼠标、控件获得焦点等状态的改变。微软在Silverlight 2 Beta 2中引进了一个新的概念视觉状态管理（Visual State Manager），为我们创建交互性的控件模板提供了极大的方便。接下来我将会用几篇文章来介绍一下Silverlight 2中的视觉状态管理。

本文为该系列第二篇，介绍如何利用Silverlight 2中的视觉状态管理来定制控件观感。在前一篇我们介绍了视觉状态管理中的一些基本概念，下面将通过一个实例来展示如果利用视觉状态管理来定制控件的观感，最终我们完成的示例效果如下图所示：

本文中的示例使用了这篇文章中的代码。

定义控件模板

我们现在先来定义CheckBox控件的模板，即上篇文章中所介绍的部件，如下代码所示：

<ControlTemplate TargetType="CheckBox">
  <StackPanel x:Name="Root" >
    <！-- OuterBorder -->
    <Border Width="20" Height="20">
      <！-- InnerBorder -->
      <Border x:Name="InnerBorder">
        <Grid>
          <！-- Higlight-->
          <Border x:Name="HighlightBorder"> </Border>
          <！-- Glow -->
           <Rectangle x:Name="Glow" Opacity="0"></Rectangle>
          <！ -- Checkmark Graphic-->
          <Path x:Name="Checkmark" Opacity="0"></Path>
          <！-- Indeterminate Rect-->
           <Rectangle x:Name="IndeterminateRect" Opacity="0"></Rectangle>
        </Grid>
       </Border>
    </Border>
    <！-- ContentPresenter -->
     <ContentPresenter />
   </StackPanel>
</ControlTemplate>

为了减少代码，这里去掉了一些属性，只是给出了必备的一些部件名称。现在我们运行后，可以看到虽然CheckBox的样式有了，但它并没有任何交互的效果，如点击鼠标后CheckBox并没有选中。