WPF 中的边框颜色动画无法“实时”工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16048401/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Border Color animation in WPF not working in "real-time"
提问by Daniel Gruszczyk
In WPF app I am trying to animate a border colour change on MouseEnter event of a TextBox.
I searched for a while and followed different tutorials, but everything seems to end up the same way:
在 WPF 应用程序中，我试图在 TextBox 的 MouseEnter 事件上为边框颜色更改设置动画。
我搜索了一段时间并遵循了不同的教程，但一切似乎都以相同的方式结束：
- When the mouse enters the colour of the border changes to what I have set in the animation "From"
- Then nothing happens, no animation at all
- When mouse leaves after a period longer then the animation duration the colour changes to what I have set in the animation "To"
- If the mouse leaves before the animation duration, the colour of the border changes to some colour "in between"
- 当鼠标进入时边框的颜色更改为我在动画“从”中设置的颜色
- 然后什么也没发生，根本没有动画
- 当鼠标在更长的时间后离开时，动画持续时间的颜色会更改为我在动画“To”中设置的颜色
- 如果鼠标在动画持续时间之前离开，边框的颜色将更改为“中间”的某种颜色
From this I figured that the animation is happening, but it is not showing it as it animates...
The code is here:
由此我认为动画正在发生，但它没有在动画中显示它......
代码在这里：
private void txtSpeakMe_MouseEnter(object sender, MouseEventArgs e)
{
ColorAnimation ca = new ColorAnimation();
ca.From = (Color)ColorConverter.ConvertFromString("#0066FF");
ca.To = (Color)ColorConverter.ConvertFromString("#FF0000");
ca.Duration = TimeSpan.FromSeconds(3);
txtSpeakMe.BorderBrush.BeginAnimation(SolidColorBrush.ColorProperty, ca);
}
Any ideas on why it is not showing the animation as it is happening? I tried animation in XAML using MS tutorials, the same effect - it animates but it is not showing the process of animation until mouse leaves...
关于为什么它没有在动画发生时显示动画的任何想法？我使用 MS 教程尝试了 XAML 中的动画，效果相同 - 它具有动画效果，但在鼠标离开之前它不会显示动画过程......
回答by sa_ddam213
It may be easier to use a Triggerin the Xamlto perform this animation, Triggershave a EnterActionsand ExitActionsso you could use the IsMouseOverevent to start/stop the animation
这可能是更容易使用一个Trigger在Xaml执行这个动画，Triggers有EnterActions和ExitActions，所以你可以使用IsMouseOver事件来启动/停止动画
Example:
例子：
<Border Name="border" BorderThickness="5" Width="200" Height="30">
<TextBox Text="StackOverflow"/>
<Border.Style>
<Style TargetType="Border">
<Setter Property="BorderBrush" Value="#0066FF" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard HandoffBehavior="SnapshotAndReplace">
<Storyboard>
<ColorAnimation Duration="0:0:3" To="#FF0000" Storyboard.TargetProperty="BorderBrush.Color" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard HandoffBehavior="SnapshotAndReplace">
<Storyboard>
<ColorAnimation Duration="0:0:3" To="#0066FF" Storyboard.TargetProperty="BorderBrush.Color" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>
</Border.Style>
</Border>
回答by Dilshod
Not sure why TextBox border color is not changing, but you could try this:
不知道为什么 TextBox 边框颜色没有改变，但你可以试试这个：
<Border Name = "border" BorderThickness="5">
<TextBox MouseEnter="TextBox_MouseEnter" MouseLeave="TextBox_MouseLeave"/>
</Border>
Then try this code on MouseEnter and MaouseLeave:
然后在 MouseEnter 和 MaouseLeave 上试试这个代码：
ColorAnimation ca = new ColorAnimation();
ca.From = (Color)ColorConverter.ConvertFromString("#0066FF");
ca.To = (Color)ColorConverter.ConvertFromString("#FF0000");
ca.Duration = TimeSpan.FromSeconds(3);
Storyboard sb = new Storyboard();
sb.Children.Add(ca);
Storyboard.SetTarget(ca, border);
Storyboard.SetTargetProperty(ca, new PropertyPath("(Border.BorderBrush).(SolidColorBrush.Color)"));
sb.Begin();
