Question

Created a simple jquery-nivo-like slider using wpf and want to add an animation between slides that fades the background, changes the background image, and finally fades back in the new background image. I was trying to do the following….I get no errors, background changes, but there wasn’t any animation either…what am I doing wrong?

public void SetSlider(MyItem item)
    {
        //Fade out
        DoubleAnimation fadeOutAnimation = new DoubleAnimation(0, TimeSpan.FromSeconds(3));
        fadeOutAnimation.AutoReverse = false;
        grdContent.Background.BeginAnimation(Brush.OpacityProperty, fadeOutAnimation);

        //set background
        ImageBrush bgBrush = new ImageBrush();
        bgBrush.ImageSource = new BitmapImage(new Uri(item.ImageFile.SavedDirectoryAndFile, UriKind.Absolute));
        grdContent.Background = bgBrush;

        //Set title
        txtTitle.Text = item.Title;

        //set Summary
        txtSummary.Text = item.Summary;

        //Fade back in
        DoubleAnimation fadeInAnimation = new DoubleAnimation(1, TimeSpan.FromSeconds(3));
        fadeInAnimation.AutoReverse = false;
        grdContent.Background.BeginAnimation(Brush.OpacityProperty, fadeInAnimation);        
} 

Answer 1

Figured it out… I had to apply the animation to the brush that was set in the background property…not the background property itself and I had to make some timing changes. Here is my final solution:

public void SetSlider(MyItem item)
    {
        //Create the fade out animation. 
        DoubleAnimation fadeOutAnimation = new DoubleAnimation(0, TimeSpan.FromMilliseconds(500));
        fadeOutAnimation.AutoReverse = false;

        //wait until the first animation is complete before changing the background, or else it will appear to just "fadeIn" with now fadeout.
        fadeOutAnimation.Completed += delegate(object sender, EventArgs e)
        {
            //once the fadeout is complete set the new back ground and fade back in. 
            //Create a new background brush. 
            ImageBrush bgBrush = new ImageBrush();
            bgBrush.ImageSource = new BitmapImage(new Uri(item.ImageFile.SavedDirectoryAndFile, UriKind.Absolute));
            bgBrush.Opacity = 0;

            //Set the grid background to the new brush. 
            grdContent.Background = bgBrush; 

            //Set the brush...(not the background property) with the animation. 
            DoubleAnimation fadeInAnimation = new DoubleAnimation(1, TimeSpan.FromMilliseconds(500));
            fadeInAnimation.AutoReverse = false;
            bgBrush.BeginAnimation(Brush.OpacityProperty, fadeInAnimation);
        };

        //Fade out..before changing the background. 
        var currentBackground = grdContent.Background;
        currentBackground.BeginAnimation(Brush.OpacityProperty, fadeOutAnimation);

        //Set title
        txtTitle.Text = item.Title;

        //set Summary
        txtSummary.Text = item.Summary;
    }