WPF，控件的可视状态，看下这段代码

Question

这段代码来自MSDN，我作了修改：
<Rectangle Name="rect" Width="100" Height="100" MouseEnter="rect_MouseEvent" MouseLeave="rect_MouseEvent">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup Name="MouseState">
            <VisualState Name="MouseEnter" />
            <VisualState Name="MouseLeave" />
            <VisualStateGroup.Transitions>
                <VisualTransition To="MouseLeave" GeneratedDuration="00:00:00"/>
                <VisualTransition To="MouseEnter" GeneratedDuration="00:00:00.5">
                            <VisualTransition.Storyboard>
                                <Storyboard>
                                    <ColorAnimation To="Green" Storyboard.TargetName="rectBrush" Storyboard.TargetProperty="Color"/>
                                </Storyboard>
                            </VisualTransition.Storyboard>
                </VisualTransition>
            </VisualStateGroup.Transitions>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <Rectangle.Fill>
        <SolidColorBrush x:Name="rectBrush" Color="Red"/>
    </Rectangle.Fill>
</Rectangle>问题：
当鼠标移到矩形上时，颜色从红色逐渐变成绿色，为什么会反弹会红色呢？WPF

Answer 1

把VisualTransition中的Storyboard放到VisualState的定义中。
        <Rectangle Name="rect" Width="100" Height="100" MouseEnter="rect_MouseEvent" MouseLeave="rect_MouseEvent">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup Name="MouseState">
                    <VisualState Name="MouseEnter">
                        <Storyboard>
                            <ColorAnimation To="Green" 
                          Storyboard.TargetName="rectBrush" 
                          Storyboard.TargetProperty="Color"/>
                        </Storyboard>
                    </VisualState>
                    <VisualState Name="MouseLeave"/>
                    <VisualStateGroup.Transitions>
                        <VisualTransition To="MouseLeave" GeneratedDuration="00:00:00"/>
                        <VisualTransition To="MouseEnter" GeneratedDuration="00:00:00.5">
                        </VisualTransition>
                    </VisualStateGroup.Transitions>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <Rectangle.Fill>
                <SolidColorBrush x:Name="rectBrush" Color="Red"/>
            </Rectangle.Fill>
        </Rectangle>

Answer 2

之所以会出现你说的那种情况。我想可以这样理解，真正决定控件外观的是VisualState对其施加的影响。VisualTransition中的对可视化元素的改变只是一些花絮罢了，最终的结果还是依赖于VisaulState。你可用下面的代码做个实验验证一下：
        <Rectangle Name="rect" Width="100" Height="100" MouseEnter="rect_MouseEvent" MouseLeave="rect_MouseEvent">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup Name="MouseState">
                    <VisualState Name="MouseEnter">
                        <Storyboard>
                            <ColorAnimation To="Green" 
                          Storyboard.TargetName="rectBrush" 
                          Storyboard.TargetProperty="Color"/>
                        </Storyboard>
                    </VisualState>
                    <VisualState Name="MouseLeave"/>
                    <VisualStateGroup.Transitions>
                        <VisualTransition To="MouseLeave" GeneratedDuration="00:00:00"/>
                        <VisualTransition To="MouseEnter" GeneratedDuration="00:00:02">
                            <VisualTransition.Storyboard>
                                <Storyboard>
                                    <ColorAnimation To="Yellow" Storyboard.TargetName="rectBrush" Storyboard.TargetProperty="Color" Duration="00:00:00.5"/>
                                </Storyboard>
                            </VisualTransition.Storyboard>
                        </VisualTransition>
                    </VisualStateGroup.Transitions>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <Rectangle.Fill>
                <SolidColorBrush x:Name="rectBrush" Color="Red"/>
            </Rectangle.Fill>
        </Rectangle>

Answer 3

Quote: 引用 2 楼 MicrosoftCenterOfHN 的回复:

真正决定控件外观的是VisualState对其施加的影响。VisualTransition中的对可视化元素的改变只是一些花絮罢了
quote]
真正决定控件外观的是VisualState对其施加的影响。VisualTransition中的对可视化元素的改变只是一些花絮罢了？
这样的解释是不是不太贴切呢？找不到MSDN是怎么说的

Answer 4

VisualTransition: 指定控件在进行状态过渡时的可视行为。
VisualState: 在处于特定状态时，表示控件的可视化外观。 上面是MSDN上的，可见VisualTransition强调的是状态过渡期间的行为。当处于特定状态时，由VisualState负责其可视外观。你这里的例子从一个状态过度到另一个状态时有一个时间差（0.05秒），在这段时间差内，VisualTransiton可以做一些“小动作”，但一旦过度完成（结束），那么还是由VisualState来决定可视状态。