RegisterName for StoryBoards in WPF (NameScopes)

Guys,

Have you ever tried to use your Code-Behind extensively in WPF rather than using XAML to design your objects? Certainly there is no way you would like to do this when you have an option to avoid, but sometimes it is almost necessary to do such code.

You may argue, even you are smart enough to deal such situation yourself using DataTemplates and Resources and make your application truly data driven. Yes it is possible, MVVM addresses such situation, but as I must say it is not always a silver bullet to address situations like this, it is more likely you might device your work more in code. Yes, even if you ask me, I am also less comfortable in Code to do the same design as I am in XAML.

Today, one of my pal asked me the code which would add some Random Ellipse in a black Canvas and these points will also move in the screen using a DoubleAnimation. As per my initial thought is concerned, the code seemed to me good. The code looks like :

public void CreateRandomStars()
{

    int Width = (int)MyCanvas.Width;
    int Height = (int)MyCanvas.Height;


    Random Rnx = new Random(0);

    for (int i = 0; i < 300; i++)
    {

        double Lx = (double)Rnx.Next(Width);
        double Ty = (double)Rnx.Next(Height);
        //starPoints.Add(Ty);
        Ellipse es = new Ellipse();
        es.Name = "es_" + i.ToString(); //setting names dynamically for each
        //ellipse

        es.Width = 2;
        es.Height = 2;

        es.Fill = Brushes.WhiteSmoke;
        es.SetValue(Canvas.LeftProperty, Lx);
        es.SetValue(Canvas.TopProperty, Ty);

        MyCanvas.Children.Add(es);

        DoubleAnimation dAnim = new DoubleAnimation();
        dAnim.From = Ty;
        dAnim.To = Height;
        dAnim.Duration = new Duration(new TimeSpan(0, 0, 5));
        Storyboard.SetTargetName(dAnim, es.Name);
        Storyboard.SetTargetProperty(dAnim, new PropertyPath(Canvas.TopProperty));
               
        MyStoryBoard.Children.Add(dAnim);

    }


}

It adds the controls in a black canvas

<Canvas Name="MyCanvas" Background="Black" Height="310" Width="500">
        <Canvas.Triggers>
            <EventTrigger RoutedEvent="Canvas.Loaded">
                <BeginStoryboard>
                    <Storyboard RepeatBehavior="Forever" Name="MyStoryBoard">
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Canvas.Triggers>
    </Canvas>

Well, You might think the code will run fine, but it actually isnt.

Every control in WPF needs to be registered with its Scope after the object is created so that any other object within the same scope can have access to the object. In the code above the registration of code is not done before it is actually accessed by the StoryBoard.

MyCanvas.Children.Add(es);

this.RegisterName(es.Name, es);

After I add the line RegisterName for the control, the code worked fine. Hence you should remember, that you should use RegisterName for a control before you address the name as Target of another control, especially StoryBoards.

Download Sample - 60KB

Why do you need RegisterName ? 

Each WPF control is actually using Namescopes, to uniquely identify one element inside a scope. Each scope generally defines a Table which gets an entry when a control Name is registered, and deleted when it is UnRegistered. Any control in WPF which allows child control needs to implement from INameScope interface to make a common scope for the control such that you can register the same name twice in two scopes but you cannot inside the same scope. Hence WPF allows you to

The concept is much like OOPS where objects can be of same name in the same scope. But how does WPF achieve this.

Each FrameworkElement derives from INameScope which maintains a HashTable to hold all the registered names, such that when you invoke container.RegisterName() the name will be automatically checked into the HashTable and assigned. Animation extensively uses the INameScope interface to determine the object at runtime which is set to its Target. Hence to point to the actual object you need to Register the control which needed to be accessed by StoryBoards.

If you look into container.RegisterName module it looks like :

Here a HybridDictionary is used, which eventually maintains a HashTable. When one name is registered, the object gets added against the Name into the HashTable and eventually when the object is accessed from the StoryBoards, it eventually points to the actual object from the Table. The same is true for any INameScope controls.

Conclusion

Thats it. I hope this post will help you.

Thank you.