Using a Storyboard animation on a programmatically-added control

Question

I'm trying to fade in a new control to my application's "app" area which is programmatically added after the existing controls are removed. My code looks like this:

        void settingsButton_Clicked(object sender, EventArgs e)
    {
        ContentCanvas.Children.Clear();

        // Fade in settings panel
        NameScope.SetNameScope(this, new NameScope());

        SettingsPane s = new SettingsPane();
        s.Name = "settingsPane";

        this.RegisterName(s.Name, s);
        this.Resources.Add(s.Name, s);

        Storyboard sb = new Storyboard();

        DoubleAnimation settingsFade = new DoubleAnimation();
        settingsFade.From = 0;
        settingsFade.To = 1;
        settingsFade.Duration = new Duration(TimeSpan.FromSeconds(0.33));
        settingsFade.RepeatBehavior = new RepeatBehavior(1);
        Storyboard.SetTargetName(settingsFade, s.Name);
        Storyboard.SetTargetProperty(settingsFade, new PropertyPath(UserControl.OpacityProperty));

        ContentCanvas.Children.Add(s);

        sb.Children.Add(settingsFade);
        sb.Begin();
    }

However, when I run this code, I get the error "No applicable name scope exists to resolve the name 'settingsPane'."

What am I possibly doing wrong? I'm pretty sure I've registered everything properly :(

Answer 1

I wouldn't hassle with the NameScopes etc. and would rather use Storyboard.SetTarget instead.

var b = new Button() { Content = "abcd" };
stack.Children.Add(b);

var fade = new DoubleAnimation()
{
    From = 0,
    To = 1,
    Duration = TimeSpan.FromSeconds(5),
};

Storyboard.SetTarget(fade, b);
Storyboard.SetTargetProperty(fade, new PropertyPath(Button.OpacityProperty));

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

sb.Begin();

Answer 2

I solved the problem using this as parameter in the begin method, try:

sb.Begin(this);

Because the name is registered in the window.

Answer 3

I agree, the namescopes are probably the wrong thing to use for this scenario. Much simpler and easier to use SetTarget rather than SetTargetName.

In case it helps anyone else, here's what I used to highlight a particular cell in a table with a highlight that decays to nothing. It's a little like the StackOverflow highlight when you add a new answer.

    TableCell cell = table.RowGroups[0].Rows[row].Cells[col];

    // The cell contains just one paragraph; it is the first block
    Paragraph p = (Paragraph)cell.Blocks.FirstBlock;

    // Animate the paragraph: fade the background from Yellow to White,
    // once, through a span of 6 seconds.

    SolidColorBrush brush = new SolidColorBrush(Colors.Yellow);
    p.Background = brush;
    ColorAnimation ca1 = new ColorAnimation()
    {
            From = Colors.Yellow,
            To = Colors.White,
            Duration = new Duration(TimeSpan.FromSeconds(6.0)),
            RepeatBehavior = new RepeatBehavior(1),
            AutoReverse = false,
    };

    brush.BeginAnimation(SolidColorBrush.ColorProperty, ca1);

Answer 4

It is possible odd thing but my solution is to use both methods:

Storyboard.SetTargetName(DA, myObjectName);

Storyboard.SetTarget(DA, myRect);

sb.Begin(this);

In this case there is no error.

Have a look at the code where I have used it.

 int n = 0;
        bool isWorking;
        Storyboard sb;
        string myObjectName;
         UIElement myElement;

        int idx = 0;

        void timer_Tick(object sender, EventArgs e)
        {
            if (isWorking == false)
            {
                isWorking = true;
                try
                {
                      myElement = stackObj.Children[idx];

                    var possibleIDX = idx + 1;
                    if (possibleIDX == stackObj.Children.Count)
                        idx = 0;
                    else
                        idx++;

                    var myRect = (Rectangle)myElement;

                   // Debug.WriteLine("TICK: " + myRect.Name);

                    var dur = TimeSpan.FromMilliseconds(2000);

                    var f = CreateVisibility(dur, myElement, false);

                    sb.Children.Add(f);

                    Duration d = TimeSpan.FromSeconds(2);
                    DoubleAnimation DA = new DoubleAnimation() { From = 1, To = 0, Duration = d };

                    sb.Children.Add(DA);
                    myObjectName = myRect.Name;  
                   Storyboard.SetTargetName(DA, myObjectName);
                   Storyboard.SetTarget(DA, myRect);

                    Storyboard.SetTargetProperty(DA, new PropertyPath("Opacity"));

                    sb.Begin(this);

                    n++;
                }
                catch (Exception ex)
                {
                    Debug.WriteLine(ex.Message + "   " + DateTime.Now.TimeOfDay);
                }

                isWorking = false;
            }
        }