WP7 - Fade user control via code, not XAML

Question

I'm trying to popup a user control and then fade it out over 3 seconds. I'm trying to use the following code but I keep getting incorrect parameter value on the assignment of Popup.LoadedEvent as well as Splash.LoadedEvent. What am I doing wrong?

Splash s = new Splash();
            DoubleAnimation fade = new DoubleAnimation()
            {
                Duration = new Duration(TimeSpan.FromMilliseconds(3000)),
                From = 1.0,
                To = 0.0,
                RepeatBehavior = new RepeatBehavior(1)
            };

            fade.Completed += new EventHandler(fade_Completed);

            this.popup = new Popup();
            this.popup.Child = s;

            EventTrigger et = new EventTrigger();
            et.RoutedEvent = Popup.LoadedEvent;

            Storyboard sb = new Storyboard();
            sb.Children.Add(fade);

            BeginStoryboard bs = new BeginStoryboard() { Storyboard = sb };

            et.Actions.Add(bs);

            this.popup.Triggers.Add(et);
            this.popup.IsOpen = true;

I also cant seem to figure out where/how to set the target property.

Edit: I was able to get the answer using the link @Titan2782 provided. I've posted it in an answer below.

If you find an answer to your own question please submit it as an answer instead. — H.B., May 18 '11 at 20:09
@H.B. I didn't find my own answer. I got the answer from the link provided by @Titan2782. Why would I take away his credit? — Dustin Davis, May 18 '11 at 20:59
You are of course not supposed to claim it as your own, it's just a matter of the format. You can still accept his/her answer, and you can still note that this is thanks to him/her but questions are for questions and answers for answers. (e.g. in [this question](http://stackoverflow.com/questions/5854059/in-the-built-in-wpf-datagrid-can-i-set-the-datasource-for-a-datagridtemplatecolu/) the asker did exactly that.) — H.B., May 18 '11 at 21:04

score 3 · Accepted Answer · answered May 18 '11 at 19:41

3

check out http://www.windowsphonegeek.com/articles/wp7-transitions-in-depth--custom-transitions it has some code to work with storyboard and set the target properties.

answered May 18 '11 at 19:41

Dustin Davis

14,482
13
63
119

score 1 · Answer 2 · answered May 18 '11 at 19:42

You should look into the transitions stuff in the windows phone toolkit: http://blogs.msdn.com/b/wfaught/archive/2010/11/15/transitions.aspx

its only a couple lines to get those transitions in.

You might have some issues here because you're using a popup, and the popup doesn't exist in the visual tree?

score 1 · Answer 3 · answered May 18 '11 at 19:49

I have an example with a button in vb, shouldn't be hard to translate into c#:

Dim Fade As New Animation.DoubleAnimation
Fade.From = 0.5
Fade.To = 1
Fade.Duration = TimeSpan.FromSeconds(3)

Animation.Storyboard.SetTarget(Fade, button)
Animation.Storyboard.SetTargetProperty(Fade, New PropertyPath(Button.OpacityProperty))

Dim sb As New Animation.Storyboard
sb.Children.Add(highlight)

sb.Begin()

I suppose this works also with the Popup.

score 1 · Answer 4 · edited May 18 '11 at 23:18

Thanks to @Titan2782 answer I was able to figure it out

    Splash s = new Splash();
                DoubleAnimation fade = new DoubleAnimation()
                {
                    Duration = new Duration(TimeSpan.FromMilliseconds(4000)),
                    From = 1.0,
                    To = 0.0,
                    RepeatBehavior = new RepeatBehavior(1)

                };

                fade.Completed += new EventHandler(fade_Completed);

                this.popup = new Popup();
                this.popup.Child = s;

                Storyboard.SetTargetProperty(fade, new PropertyPath(UIElement.OpacityProperty));
                sb.Children.Add(fade);
                Storyboard.SetTarget(sb, s);           

                this.popup.IsOpen = true;

                sb.Begin();

WP7 - Fade user control via code, not XAML

4 Answers4