image transition

I've gotten stuck again.

I'm creating a WPF project in C#...

I've got an image (album cover) that I'll be changing in code behind, and wish to basicaly do the following.

When a new album cover image is determine and aquired, I want the current image in the image control to fade out, get updated with the new cover, and then fade back in.

I'm not seeing very many good examples on how to accomplish this in code behind.

The following was my latest failed attempt...

if (currentTrack != previousTrack) 
{
    BitmapImage image = new BitmapImage();
    image.BeginInit();
    image.CacheOption = BitmapCacheOption.OnLoad;
    image.CreateOptions = BitmapCreateOptions.IgnoreImageCache;
    image.UriSource = new Uri(Address, UriKind.Absolute);
    image.EndInit();

    Storyboard MyStoryboard = new Storyboard();

    DoubleAnimation FadeOut = new DoubleAnimation();
    FadeOut.From = 1.0;
    FadeOut.To = 0.0;
    FadeOut.Duration = new Duration(TimeSpan.FromSeconds(.5));

    MyStoryboard.Children.Add(FadeOut);
    Storyboard.SetTargetName(FadeOut, CoverArt.Name);
    Storyboard.SetTargetProperty(FadeOut, new PropertyPath(Rectangle.OpacityProperty));

    CoverArt.Source = image;

    DoubleAnimation Fadein = new DoubleAnimation();
    Fadein.From = 0.0;
    Fadein.To = 1.0;
    Fadein.Duration = new Duration(TimeSpan.FromSeconds(.5));

    MyStoryboard.Children.Add(Fadein);
    Storyboard.SetTargetNam开发者_如何学JAVAe(Fadein, CoverArt.Name);
    Storyboard.SetTargetProperty(Fadein, new PropertyPath(Rectangle.OpacityProperty));

    MyStoryboard.Begin(this);
}

I'd prefer to do this in code behind simply because that is where I'm aquiring the image. Otherwise, I'm not sure how I'd trigger it.

An example would be greatly appreciated.

If you want the old image to fade out and then the new one to fade in using the same image target, then you have to wait for the first storyboard to complete before you change the image and start the new one. To do this use the Storyboard.Completed event.

On the other hand, if you want to the old image to fade out while the new image is fading in, you need to change your design to include two images that occupy the same screen space and change your storyboard to use a ParallelTimeline.

was able to figure out what you meant Rick. I do have the image fading out, replaced, and fading in with the code below....

        private void CoverArt_MouseDown(object sender, MouseButtonEventArgs e)
    {
        Storyboard AnimFadeOut = new Storyboard();
        AnimFadeOut.Completed += new EventHandler(ImageFadeOut_Completed);

        DoubleAnimation FadeOut = new DoubleAnimation();
        FadeOut.From = 1.0;
        FadeOut.To = 0.0;
        FadeOut.Duration = new Duration(TimeSpan.FromSeconds(.5));

        AnimFadeOut.Children.Add(FadeOut);
        Storyboard.SetTargetName(FadeOut, CurrentCover.Name);
        Storyboard.SetTargetProperty(FadeOut, new PropertyPath(Image.OpacityProperty));


        AnimFadeOut.Begin(this);
    }

    void ImageFadeOut_Completed(object sender, EventArgs e)
    {
        BitmapImage image = new BitmapImage();
        image.BeginInit();
        image.CacheOption = BitmapCacheOption.OnLoad;
        image.CreateOptions = BitmapCreateOptions.IgnoreImageCache;
        image.UriSource = new Uri("Minogue.jpg", UriKind.Relative);
        image.EndInit();

        CurrentCover.Source = image;
        Storyboard ImageFadeIn = new Storyboard();

        DoubleAnimation FadeIn = new DoubleAnimation();
        FadeIn.From = 0.0;
        FadeIn.To = 1.0;
        FadeIn.Duration = new Duration(TimeSpan.FromSeconds(.5));

        ImageFadeIn.Children.Add(FadeIn);
        Storyboard.SetTargetName(FadeIn, CurrentCover.Name);
        Storyboard.SetTargetProperty(FadeIn, new PropertyPath(Image.OpacityProperty));
        ImageFadeIn.Begin(this);
    }