Grid Background Image Opacity Animation - wpf

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;
}

Answer 2

A simpler approach will be using Transitional's they have a sample project of image animation.
References:
xmlns:trans="clr-namespace:Transitionals;assembly=Transitionals"
xmlns:transc="clr-namespace:Transitionals.Controls;assembly=Transitionals"
xmlns:transt="clr-namespace:Transitionals.Transitions;assembly=Transitionals"
xmlns:refl="clr-namespace:System.Reflection;assembly=mscorlib"
<transc:TransitionElement x:Name="TransitionBox" Grid.Row="1" Content="{Binding
CurrentImage}">
<transc:TransitionElement.Transition>
<transt:TranslateTransition StartPoint="1,0" EndPoint="0,0"
Duration="0:0:0.6"/>
</transc:TransitionElement.Transition>
</transc:TransitionElement>
or use SlideShow Control it has if its an automatic Transition.
<transc:Slideshow.TransitionSelector>
<trans:RandomTransitionSelector>
<trans:RandomTransitionSelector.TransitionAssemblies>
<refl:AssemblyName Name="Transitionals" />
</trans:RandomTransitionSelector.TransitionAssemblies>
</trans:RandomTransitionSelector>
</transc:Slideshow.TransitionSelector>