谈谈Silverlight 2中的视觉状态管理 Part2 -电脑资料

电脑资料 时间:2019-01-01 我要投稿
【www.unjs.com - 电脑资料】

概述

在WPF和Silverlight中的控件模板支持自定义控件的观感,所谓的外观,指控件的视觉效果;而感觉 则是控件交互的响应性,如在控件上按下鼠标、控件获得焦点等状态的改变,

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

。微软在Silverlight 2 Beta 2中引进了一个新的概念视觉状态管理(Visual State Manager),为我们创建交互性的控件模板提供了 极大的方便。接下来我将会用几篇文章来介绍一下Silverlight 2中的视觉状态管理。

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

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

定义控件模板

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


  
    
    
      
      
        
          
          
          
          
          
          
          
           
        

      

    

    
     
  

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

定义视觉状态组

我们知道,视觉状态管理器(VisualStateManager)负责管理控件的状态和状态组以及状态的迁移, 所以我们所有的视觉状态组、视觉状态迁移、视觉状态等都通过它来管理,在XAML定义时,它们之间的架 构关系如下:

在引用VisualStateManager之前,需要先引入命名空间,这是Silverlight 2 Beta 2的一个已知Bug。 如下代码所示:

xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"

接下来我们定义视觉状态组,在上篇文章中我们就介绍过CheckBox的状态组,总共有三个: FocusStates、CommonStates、CheckStates,这里我们只定义CommonStates和CheckStates状态组,大家 可以自行定义FocusStates状态组,如下代码所示:


  
  
  

  
  
  

这里需要为每个视觉状态组指定名称,且名称是固定的。

定义视觉状态

现在我们添加视觉状态到状态组,在CommonStates和CheckStates状态组中,总共有7个状态,如下表 所示:

首先我们来定义CommonStates状态组,代码如下所示:



  
  
  

  
  
    
      
    

  

  
  
     
      
    

  

对于每一个视觉状态,主要有两部分组成:一是命名:我们需要为视觉状态指定一个名称,且名称为 固定的,这样VisualStateManager才能够找到相应的状态;二是故事板:指定状态变化时的视觉呈现。

现在我们来实现每一个状态,对于Normal状态,不用作任何定义,因为它的定义与控件的基础状态一 致,如下代码所示:



Normal状态效果如下图所示:

定义MouseOver视觉状态,当鼠标移上时高亮显示Glow,修改Opacity属性从0到1,如下代码所示:



   
              Storyboard.TargetName="Glow"
        Storyboard.TargetProperty="Opacity"
         Duration="0" To="1"/>
  

MouseOver状态效果如下图所示:

定义Pressed视觉状态,按下鼠标时,改变HighlightBorder的Opacity属性,并且修改InnerBorder的 边框渐变,如下代码所示:



  
              Storyboard.TargetName="HighlightBorder"
         Storyboard.TargetProperty="Opacity"
        Duration="0" To=".6"/>
             Storyboard.TargetName="InnerBorder"
         Storyboard.TargetProperty="(Border.BorderBrush).
         (GradientBrush.GradientStops)[0].(GradientStop.Color)"
        Duration="0" To="#FF000000"/>
              Storyboard.TargetName="InnerBorder"
         Storyboard.TargetProperty="(Border.BorderBrush).
         (GradientBrush.GradientStops)[1].(GradientStop.Color)"
        Duration="0" To="#FF000000"/>
  

Pressed状态效果如下图所示:

定义Disabled视觉状态,设置Root元素的Opacity属性为0.5,如下代码所示:



  
              Storyboard.TargetName="Root"
        Storyboard.TargetProperty="Opacity"
         Duration="0" To=".5"/>
  

Disabled状态效果如下图所示:

现在我们来定义CheckStates视觉状态组,如下代码所示:



  
  
  
  
    
      
    

  

  
  
    
      
    

  

在CheckStates视觉状态组中有三个状态:Unchecked、Checked、Indeterminate,

电脑资料

谈谈Silverlight 2中的视觉状态管理 Part2》(https://www.unjs.com)。其中Unchecked与我 们上面介绍Normal状态是一致的,所以不用设置故事板。接下来定义Checked视觉状态,如下代码所示:



  
                  Storyboard.TargetName="Checkmark"
             Storyboard.TargetProperty="Opacity"
            Duration="0" To="1"/>
  

Checked视觉状态效果如下图所示:

定义Indeterminate视觉状态,在CheckBox使用时要呈现该状态,必须设置IsThreeState属性为True, 它的定义如下代码所示:



  
                  Storyboard.TargetName="IndeterminateRect"
             Storyboard.TargetProperty="Opacity"
            Duration="0" To="1"/>
  

Indeterminate视觉状态效果如下图所示:

定义视觉状态迁移

在上面一部分中,我们定义了所有的视觉状态,但是各个状态之间的状态过渡效果并没有显示出来, 现在我们定义视觉状态迁移。视觉状态迁移是定义在每一个视觉状态组中的,在Transitions下我们可以 定义一系列的状态迁移。定义CheckStates状态组的视觉状态迁移,如下代码所示:

实战c++中的string系列string的

  • poj1149 PIGS -电脑资料
  • leetcode笔记:Word Search II -
  • AOJ 0033 Ball -电脑资料
  • hdu1166 敌兵布阵(线段树) -电
  • 最新文章