<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秒,请问这是为什么?
就是说退出BlueState时候,它会回退到进入Storyboard之前的状态,就是橙色。
退出BlueState是发生在调用 GoToElementState(橙色状态)时,与鼠标动作无关
退出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之前的状态”,这是为什么?
而你的后台在鼠标移开时没有调用goto state语句,所以state还是BluteState。说退出也不准确,实际上执行GoToElementState生成渐变动画时,它会去把相应的target property复制到timeline中从它开始渐变。
退出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之前的状态”,这是为什么?
先解决你这个问题:当控件进入由 VisualState.Name 属性指定的状态时, Storyboard 启动。当控件退出该状态时, Storyboard 停止。 所谓的退出该状态,必然是从一个状态转换到另一个状态,这里的状态指的是VisualState.你鼠标移开,只是你的鼠标的位置发生了改变,控件的VisualState并没有任何变动。当然不会有问题了。
首先转换时间不是你说的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根本就看不出来而已。你可以换成另外一种颜色,就能看出效果来了。