Border Color animation in WPF not working in "real-time"

Question

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:

• 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"

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...

Answer 1

It may be easier to use a Trigger in the Xaml to perform this animation, Triggers have a EnterActions and ExitActions so you could use the IsMouseOver event to start/stop the animation

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>

Answer 2

Not sure why TextBox border color is not changing, but you could try this:

<Border Name = "border" BorderThickness="5">
<TextBox MouseEnter="TextBox_MouseEnter" MouseLeave="TextBox_MouseLeave"/>
</Border>

Then try this code on MouseEnter and 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();