WPF控件状态的过渡效果

先上图，这只是一个很普通的效果，用来帮助理解VisualStateManager。

 

1）、WPF的控件一般都会有多种状态，以Button为例，它有CommandStates（Normal，MouseOver，Pressed，Disabled）、FocusStates（Focused，UnFocused）、ValidationStates（Valid，InvalidFocusd，InvalidUnfocused）等状态。

2）、至于为什么把他们分成三组，举例说明：按钮可以同时处于Normal、Focused的状态，但不能处于Normal、MouseOver的状态。就是说，在CommandStates里面，按钮只能处于组内的一种状态，同时在FocusStates里面，同样只能处于组内的一种状态，但它们两者能并存。

3）、在对控件进行模板定义的时候，状态与状态之间切换时的过渡效果，可以通过VisualStateManager对这些状态进行管理，注意，只是对过渡效果进行管理，过渡效果就是一些动画效果了。还是以Button为例

 <Button Content="123" Width="100" Height="100">

            <Button.Template>

                <ControlTemplate>

                    <Border x:Name="Bg">

                        <VisualStateManager.VisualStateGroups>

                            <VisualStateGroup x:Name="CommonStates">

                                <VisualState x:Name="Normal"></VisualState>

                                <VisualState x:Name="Pressed"></VisualState>

                                <VisualState x:Name="MouseOver"></VisualState>

                            </VisualStateGroup>

                        </VisualStateManager.VisualStateGroups>

                        <Grid HorizontalAlignment="Center" VerticalAlignment="Center">

                            <TextBlock Text="{TemplateBinding Content}" />

                        </Grid>

                    </Border>

                </ControlTemplate>

            </Button.Template>

        </Button>

这里主要有三个对象，分别是VisualStateManager、VisualStateGroup 、VisualState 。

①VisualStateManager顾名思义，它是State管理器

②VisualStateGroup对应状态分组（CommandStates，FocusStates，ValidationStates）

③VisualState对应组内成员

4）、定义三组颜色

       <!--普通状态-按钮边框色、底色-->

        <Color x:Key="ButtonNormalBorderBrush">#99ce01</Color>

        <Color x:Key="ButtonNormalBackgroundBrush">#d7967a</Color>

        <!--鼠标停留-按钮边框色、底色-->

        <Color x:Key="ButtonMouseOverBorderBrush">#d9bebf</Color>

        <Color x:Key="ButtonMouseOverBackgroundBrush">#9ed29a</Color>

        <!--鼠标点击-按钮边框色、底色-->

        <Color x:Key="ButtonPressedBorderBrush">#d7967a</Color>

        <Color x:Key="ButtonPressedBackgroundBrush">#f2d1d3</Color>

5）、鼠标停留的过渡效果

    <VisualState x:Name="MouseOver">

        <Storyboard>

            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="Bg">

                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource ButtonMouseOverBorderBrush}" />

            </ColorAnimationUsingKeyFrames>

            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Bg">

                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource ButtonMouseOverBackgroundBrush}" />

            </ColorAnimationUsingKeyFrames>

        </Storyboard>

    </VisualState>

6）现在例子里面，用触发器也能完成类似的效果。不过只有事件触发器才能触发动画效果。因此..VisualStateManager比较方便一些吧。