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

[写成]

<Grid>
    <Rectangle Name="Rectangle1" MouseEnter="ColorChangeMouseEvent" MouseLeave="ColorChangeMouseEvent" Margin="198,17,0,0" Height="88" 
VerticalAlignment="Top" HorizontalAlignment="Left" Width="100">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup Name="MouseStates">
                <VisualState Name="BlueState">
                    <Storyboard>
                        <ColorAnimation To="Blue" Storyboard.TargetName="rectBrush" Storyboard.TargetProperty="Color"/>
                    </Storyboard>
                </VisualState>
                <VisualState Name="OrangeState">
                    <Storyboard>
                        <ColorAnimation To="Orange" Storyboard.TargetName="rectBrush" Storyboard.TargetProperty="Color"/>
                    </Storyboard>
                </VisualState>
                <VisualStateGroup.Transitions>
                    <VisualTransition To="BlueState" GeneratedDuration="0:0:2"/>
                    <VisualTransition To="OrangeState" GeneratedDuration="0:0:2">
                    </VisualTransition>
                </VisualStateGroup.Transitions>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Rectangle.Fill>
            <SolidColorBrush x:Name="rectBrush" Color="Orange"/>
        </Rectangle.Fill>
    </Rectangle>
</Grid>

 private void ColorChangeMouseEvent(object sender, MouseEventArgs e)
        {
            if (Rectangle1.IsMouseOver)
            {
                VisualStateManager.GoToElementState(Rectangle1, "BlueState", true);
            }
            else
            {
                VisualStateManager.GoToElementState(Rectangle1, "OrangeState", true);
            }
        }　

我设置了2个可视状态的转换时间都是2秒，当鼠标移到矩形上面时，确实是2秒变色，但当鼠标移开矩形后，突然就变色了，而不是2秒，请问这是为什么？

[jshi123]

鼠标移开始，BlueState失效，回到初始的颜色Orange（在rectangle.fill中指定的），2秒钟后，从orange再渐变到orange，所以看不出效果。 你应该把Storyboard写到VisualTransition中，因为原理上，各个VisualState应该是稳定的状态，而transition是在这些状态间的切换效果。

[写成]

引用 1 楼 jshi123 的回复:

鼠标移开始，BlueState失效，回到初始的颜色Orange（在rectangle.fill中指定的），2秒钟后，从orange再渐变到orange，所以看不出效果。 你应该把Storyboard写到VisualTransition中，因为原理上，各个VisualState应该是稳定的状态，而transition是在这些状态间的切换效果。

鼠标移开时，BlueState失效？有这种说法？那把OrangeState删除，鼠标移开时，BlueState为什么不失效？

[写成]

引用 3 楼 jshi123 的回复:

是的，看msdn的说明：

引用

When the control enters the state that is specified by the VisualState.Name property, the Storyboard begins. When the control exits the state, the Storyboard stops.

就是说退出BlueState时候，它会回退到进入Storyboard之前的状态，就是橙色。 退出BlueState是发生在调用 GoToElementState（橙色状态）时，与鼠标动作无关

拿改成如下代码：

 <Grid>
        <Rectangle Name="Rectangle1" MouseEnter="ColorChangeMouseEvent" MouseLeave="ColorChangeMouseEvent" Margin="198,17,0,0" Height="88" 
VerticalAlignment="Top" HorizontalAlignment="Left" Width="100">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup Name="MouseStates">
                    <VisualState Name="BlueState">
                        <Storyboard>
                            <ColorAnimation To="Blue" Storyboard.TargetName="rectBrush" Storyboard.TargetProperty="Color"/>
                        </Storyboard>
                    </VisualState>
                    <VisualState Name="OrangeState">
                    </VisualState>
                    <VisualStateGroup.Transitions>
                        <VisualTransition To="BlueState" GeneratedDuration="0:0:2"/>
                    </VisualStateGroup.Transitions>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <Rectangle.Fill>
                <SolidColorBrush x:Name="rectBrush" Color="Orange"/>
            </Rectangle.Fill>
        </Rectangle>
    </Grid>

private void ColorChangeMouseEvent(object sender, MouseEventArgs e)
{
    if (Rectangle1.IsMouseOver)
    {
        VisualStateManager.GoToElementState(Rectangle1, "BlueState", true);
    }
}

当鼠标移到矩形上后，2秒钟逐渐变色，但是鼠标移开之后，却没有变成橙色，没有出现你所说的“退出BlueState时候，它会回退到进入Storyboard之前的状态”，这是为什么？

[jshi123]

不是鼠标移开退出BlueState，而是调用 GoToElementState（Rectangle1, otherSate）的时候退出BlueState， 而你的后台在鼠标移开时没有调用goto state语句，所以state还是BluteState。 说退出也不准确，实际上执行GoToElementState生成渐变动画时，它会去把相应的target property复制到timeline中从它开始渐变。

[MicrosoftCenterOfHN]

引用 4 楼 u011572868 的回复:

[quote=引用 3 楼 jshi123 的回复:] 是的，看msdn的说明：

引用

When the control enters the state that is specified by the VisualState.Name property, the Storyboard begins. When the control exits the state, the Storyboard stops.

就是说退出BlueState时候，它会回退到进入Storyboard之前的状态，就是橙色。 退出BlueState是发生在调用 GoToElementState（橙色状态）时，与鼠标动作无关

拿改成如下代码：

 <Grid>
        <Rectangle Name="Rectangle1" MouseEnter="ColorChangeMouseEvent" MouseLeave="ColorChangeMouseEvent" Margin="198,17,0,0" Height="88" 
VerticalAlignment="Top" HorizontalAlignment="Left" Width="100">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup Name="MouseStates">
                    <VisualState Name="BlueState">
                        <Storyboard>
                            <ColorAnimation To="Blue" Storyboard.TargetName="rectBrush" Storyboard.TargetProperty="Color"/>
                        </Storyboard>
                    </VisualState>
                    <VisualState Name="OrangeState">
                    </VisualState>
                    <VisualStateGroup.Transitions>
                        <VisualTransition To="BlueState" GeneratedDuration="0:0:2"/>
                    </VisualStateGroup.Transitions>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <Rectangle.Fill>
                <SolidColorBrush x:Name="rectBrush" Color="Orange"/>
            </Rectangle.Fill>
        </Rectangle>
    </Grid>

private void ColorChangeMouseEvent(object sender, MouseEventArgs e)
{
    if (Rectangle1.IsMouseOver)
    {
        VisualStateManager.GoToElementState(Rectangle1, "BlueState", true);
    }
}

当鼠标移到矩形上后，2秒钟逐渐变色，但是鼠标移开之后，却没有变成橙色，没有出现你所说的“退出BlueState时候，它会回退到进入Storyboard之前的状态”，这是为什么？[/quote] 先解决你这个问题： 当控件进入由 VisualState.Name 属性指定的状态时， Storyboard 启动。当控件退出该状态时， Storyboard 停止。 所谓的退出该状态，必然是从一个状态转换到另一个状态，这里的状态指的是VisualState.你鼠标移开，只是你的鼠标的位置发生了改变，控件的VisualState并没有任何变动。当然不会有问题了。

[MicrosoftCenterOfHN]

再解决你主帖中的很多问题。 首先转换时间不是你说的2秒，而是1秒。主要是有两点你没有明白： 1. VisualTransition中的GeneratedDuration指的是到达指定状态之前要经历的时间，而在这段时间之内你可以做一些事情，这些事情不会对最终的VisualState产生什么影响,你的例子中这两秒什么都没做。等这2秒的时间过去之后，才真到的到达了VisualState，这时VisaulState里的动画才刚刚开始执行。 2.由于ColorAnimation你没有设置Duration,所以默认是1秒，也就是颜色的变化是1秒之内完成了。 另一个问题：但当鼠标移开矩形后，突然就变色了，而不是2秒，请问这是为什么？ 这里的2秒问题见上面的解释。 为什么突然变色，见5，6楼的解释，因为StoryBoard停止了。停止了为什么就变到了orange呢，这个你要深入了解一下StoryBoard,这里改变的并不是真正的rectBrush的color值，color的值仍然是最初的orange,所以一旦storyboard停止之后，rectBrush.Color回到原来的值orange. 所有你明白为什么你看到的是不变色了吗？其实还是有个变色过程的，只不从orange渐变到orange根本就看不出来而已。你可以换成另外一种颜色，就能看出效果来了。

[jshi123]

是的，看msdn的说明：

引用

When the control enters the state that is specified by the VisualState.Name property, the Storyboard begins. When the control exits the state, the Storyboard stops.

就是说退出BlueState时候，它会回退到进入Storyboard之前的状态，就是橙色。 退出BlueState是发生在调用 GoToElementState（橙色状态）时，与鼠标动作无关