CODEWITHSUNDEEP
wpfbackgroundborderwpf-animationcoloranimation
Justin Grahn
Justin Grahn

Reputation: 335

WPF Animate border background color

I'm trying to animate the color of the brush for the background of a custom class that inherits from Border. I've tried the MSDN link here:

http://msdn.microsoft.com/en-us/library/system.windows.media.animation.coloranimation.aspx

This is not exactly what I'm looking for, but can get me to a point with no errors but still, nothing is animating. The problem with the example is that they are defining the logic within a class that isn't the rectangle. I am trying to define from within the rectangle (actually the border).

Below is my code that I tried to extrapolate from MSDN for my situation.

public class PrettyButton : System.Windows.Controls.Border
{
    private System.Windows.Media.SolidColorBrush hoverColor = new System.Windows.Media.SolidColorBrush();
    private System.Windows.Media.SolidColorBrush origColor = new System.Windows.Media.SolidColorBrush();
    private System.Windows.Media.Animation.Storyboard story = new System.Windows.Media.Animation.Storyboard();

    public PrettyButton()
    {
        hoverColor.Color = System.Windows.Media.Color.FromArgb(255, 50, 200, 0);
        origColor.Color = System.Windows.Media.Color.FromArgb(0, 0, 0, 0);

        this.MouseEnter += PrettyButton_MouseEnter;
        this.MouseLeave += PrettyButton_MouseLeave;

        //Animate in logic
        System.Windows.Media.Animation.ColorAnimation color = new System.Windows.Media.Animation.ColorAnimation(hoverColor.Color, System.TimeSpan.FromMilliseconds(400));
        System.Windows.Media.Animation.Storyboard.SetTargetProperty(color, new System.Windows.PropertyPath(System.Windows.Media.SolidColorBrush.ColorProperty));

        story.Children.Add(color);            
    }

and below in the mouseEvent I have

void PrettyButton_MouseEnter(object sender, System.Windows.Input.MouseEventArgs e)
    {
        story.Begin(this);            
    }

Unfortunately, I'm not getting any more errors so the trail has gone cold for me. I am also certain that I could probably find 10 solutions in XAML, but I would like for this class to be reusable in the future, and redefining this logic is not ideal.

Upvotes: 0

Views: 1483

Answers (1)

Amol Bavannavar
Amol Bavannavar

Reputation: 2062

Instead of System.Windows.Media.SolidColorBrush.ColorProperty, try setting "(Border.Background).(SolidColorBrush.Color)" Property Path.

System.Windows.Media.Animation.Storyboard.SetTargetProperty(color, new System.Windows.PropertyPath("(Border.Background).(SolidColorBrush.Color)"));

Also set Background in constructor of PrettyButton as like this :

public PrettyButton()
{
    .....
    origColor.Color = System.Windows.Media.Color.FromArgb(0, 0, 0, 0);
    this.Background= new SolidColorBrush(origColor.Color);
    ..
    ....

}

UPDATE :

public class PrettyButton : System.Windows.Controls.Border
{
    private System.Windows.Media.SolidColorBrush hoverColor = new System.Windows.Media.SolidColorBrush();
    private System.Windows.Media.SolidColorBrush origColor = new System.Windows.Media.SolidColorBrush();


    public PrettyButton()
    {
        hoverColor.Color = System.Windows.Media.Color.FromArgb(255, 50, 200, 0);
        origColor.Color = System.Windows.Media.Color.FromArgb(0, 0, 0, 0);

        this.Background= new SolidColorBrush(origColor.Color);
        this.MouseEnter += PrettyButton_MouseEnter;
        this.MouseLeave += PrettyButton_MouseLeave;

    }

    private void PrettyButton_MouseLeave(object sender, MouseEventArgs e)
    {
        System.Windows.Media.Animation.Storyboard story = new System.Windows.Media.Animation.Storyboard();
        System.Windows.Media.Animation.ColorAnimation color = new System.Windows.Media.Animation.ColorAnimation(origColor.Color, System.TimeSpan.FromMilliseconds(400));
        System.Windows.Media.Animation.Storyboard.SetTargetProperty(color, new System.Windows.PropertyPath("(Border.Background).(SolidColorBrush.Color)"));

        story.Children.Add(color);
        story.Begin(this);
    }

    private void PrettyButton_MouseEnter(object sender, MouseEventArgs e)
    {
        System.Windows.Media.Animation.Storyboard story = new System.Windows.Media.Animation.Storyboard();
        System.Windows.Media.Animation.ColorAnimation color = new System.Windows.Media.Animation.ColorAnimation(hoverColor.Color, System.TimeSpan.FromMilliseconds(400));
        System.Windows.Media.Animation.Storyboard.SetTargetProperty(color, new System.Windows.PropertyPath("(Border.Background).(SolidColorBrush.Color)"));

        story.Children.Add(color);
        story.Begin(this);
    }
}

Upvotes: 1

Related Questions