c# metro fade multiple objects

[James Rose]

Hello gang,

 

I am able to make single object fade in and fade out as needed.  However, when I attempt the following code it fails on this line:  MenuFadeStoryboard.Begin();   It fails with "Unspecified Error"    How helpful is that?

 

Any thoughts?

                    Storyboard MenuFadeStoryboard = new Storyboard();
                    DoubleAnimation FadeOutMenus = new DoubleAnimation();
                    FadeOutMenus.From = 1.0;
                    FadeOutMenus.To = 0.0;
                    FadeOutMenus.Duration = new TimeSpan(0, 0, 0, 1, 600); //TODO: needs to be shorter
                    
                    MenuFadeStoryboard.Children.Add(FadeOutMenus);

                    foreach (BediaNVMenu objBediaMenuUI in BediaMenuItems.Items)
                    {
                        Storyboard.SetTarget(FadeOutMenus, objBediaMenuUI);
                        
                        
                    }
                    Storyboard.SetTargetProperty(FadeOutMenus, "Opacity");  
                    MenuFadeStoryboard.Children.Add(FadeOutMenus);  //fails  here
                    MenuFadeStoryboard.Begin();

[Andre S. Veteran]

Hm, does a Storyboard really have an "Opacity" property? I don't see it in the class description.

 

By the way, local variables should be in camelCase in C#, stuff like 

DoubleAnimation FadeOutMenus = new DoubleAnimation();

 really confuses me. :p

[greenwizard88]

It looks like you're adding an animation where you should be adding objects. I think you'd want to create a bunch of storyboards - one for each object - and then set the storyboard target to be the object you're fading out, not the other way around.

 

Of course I could never get storyboards to work with > 5 items without getting stutter, so what do I know? :D

[+virtorio MVC]

I would assume you're getting that error because that animation has already been added to the Storyboard (Line 6).

 

I also believe this is not the correct way to animate multiple objects. If I understand correctly it should be something more like this:

Storyboard storyboard = new Storyboard();
 
foreach (BediaNVMenu objBediaMenuUI in BediaMenuItems.Items)
{
  DoubleAnimation fadeOutMenus = new DoubleAnimation();
  fadeOutMenus.From = 1.0;
  fadeOutMenus.To = 0.0;
  fadeOutMenus.Duration = new TimeSpan(0, 0, 0, 1, 600);
  Storyboard.SetTarget(fadeOutMenus, objBediaMenuUI);
  Storyboard.SetTargetProperty(fadeOutMenus, "Opacity");  
  MenuFadeStoryboard.Children.Add(fadeOutMenus);
}
storyboard.Begin();

I've got a pretty limited understanding of how this works so, I might be wrong.

 

Edit: Also, shouldn't you also be using PropertyPath instead of just "Opacity", e.g.

  Storyboard.SetTargetProperty(fadeOutMenus, new PropertyPath(BediaNVMenu.Opacity)); 

I don't know - really not a fan of this API/framework.

[~Johnny]

Yep - as mentioned - a double animation can only target a single "physical" property as it were. I.E, with one double animation you can animate one property of one element. Ergo, you'll have to create DoubleAnimations in loops for each element and add them into the Storyboard.

 

However, if you're not staggering the animations but rather fading them all out at the same time - it will be more efficient if you animate the actual ItemsControl or ItemsPanel instead rather than each individual element.

 

(In regards to the PropertyPath, as far as I'm aware the framework will work with any of the strings you'll see in XAML storyboards created by Blend for TargetProperties, and just "Opacity" is valid - though "FrameworkElement.Opacity" would also work it makes no difference)

 

(Both of the apps in my signature, especially the second, have all of their animations generated procedurally in C# in loops rather than using XAML storyboards or ThemeAnimations, which is why I jump on these animation question so much - I've spent a lot of time beating it with hammers. I have my own library that is meant to make things *slightly* easier that I might share publicly at some point if I tidy it up  :p )