微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

Silverlight实用窍门系列:70.Silverlight的视觉状态组VisualStateGroup

  视觉状态是指控件的某些特定状态的外观,如MouSEOver、Focused、Unfocused、normal等等。在这些状态中有一些状态是不可同时存在的,我们将这种互斥的状态划分为同一个组,称之为视觉状态组。同理多个视觉状态组之间的状态是可以共存的。

  visualstatemanager是视觉状态管理器,其内部包含多个视觉状态组

  VisualStateGroup是视觉状态组,内部包含多个互斥的视觉状态

  VisualStateGroup.Transitions是视觉状态改变定义,GeneratedDuration是状态改变时间,From是从什么状态,To是到什么状态

  VisualState是视觉状态,定义名字,内部是在状态改变时对控件外观的修正改变。

   <visualstatemanager.VisualStateGroups>
        <VisualStateGroup x:Name="CommonStates">
            <VisualStateGroup.Transitions>
                <VisualTransition GeneratedDuration="0:0:0.5" To="MouSEOver"/>
                <VisualTransition GeneratedDuration="0:0:0.5" To="normal"/>
            </VisualStateGroup.Transitions>
            <VisualState x:Name="normal">
                <Storyboard>
                    <DoubleAnimation Duration="0" To="0.1" Storyboard.TargetProperty="(UIElement.Opacity)" 
                                        Storyboard.TargetName="Root" d:IsOptimized="True"/>
                </Storyboard>
            </VisualState>
            <VisualState x:Name="MouSEOver"/>
            <VisualState x:Name="disabled"/>
        </VisualStateGroup>
    </visualstatemanager.VisualStateGroups>

  我们可以通过在后台代码“转到定义”的方式去查看该控件的视觉状态,如下图可以查看到CheckBox的众多视觉状态,以及视觉状态组:

   接上节实例,我希望能够让ScrollViewer的滚动条在鼠标未移动到其上面的时候隐藏起来的效果。现在就通过视觉状态组来实现这个效果

  A.首先我们用Blend打开上节实例,然后右键点击ScrollViewer控件-->"编辑模板"-->"编辑副本",如下图: 

  B.然后我们在弹出的窗口中为此样式重新命名,并且定位位置选择为"应用程序",如下图:

 

  C.创建完毕之后我们选择对应的ScrollBar控件。

  D.然后右键点击"VerticalScrollBar"重复以上A、B动作获取到垂直和水平方向的ScrollBar样式副本,此时我们首先选择normal视图,然后点击Scrollbar出现其属性,在外观处设置其Opacity属性值为10%,如下图:

  E.设置过度*-->normal为0.5秒渐变,如下图:

  F.同理设置*-->MouSEOver视图为0.5秒渐变即可达到所需效果,其垂直滚动条达到效果

  如需源码请点击SLVisualStateGroup.zip 下载。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐