Windows apps
Collapse the table of content
Expand the table of content
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

How to: Define a Name Scope


To animate with Storyboard in code, you must create a NameScope and register the target objects' names with the element that owns that name scope. In the following example, a NameScope is created for myMainPanel. Two buttons, button1 and button2, are added to the panel, and their names registered. Several animations and a Storyboard are created. The storyboard's Begin method is used to start the animations.

Because button1, button2, and myMainPanel all share the same name scope, any one of them can be used with the Storyboard Begin method to start the animations.

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace Microsoft.Samples.Animation.AnimatingWithStoryboards

    public class ScopeExample : Page
        private Storyboard myStoryboard;
        private StackPanel myMainPanel;
        private Button button1, button2;
        public ScopeExample()
            this.Background = Brushes.White; 
            myMainPanel = new StackPanel();
            // Create a name scope for the stackpanel. 
            NameScope.SetNameScope(myMainPanel, new NameScope());
            myMainPanel.Background = Brushes.Orange;
            button1 = new Button();
            button1.Name = "Button1";
            // Register button1's name with myMainPanel.
            myMainPanel.RegisterName(button1.Name, button1);
            button1.Content = "Button 1";
            button1.Click += new RoutedEventHandler(button1Clicked);
            button2 = new Button();
            button2.Name = "Button2";
            // Register button2's name with myMainPanel.
            myMainPanel.RegisterName(button2.Name, button2);
            button2.Content = "Button 2";
            button2.Click += new RoutedEventHandler(button2Clicked);
            // Create some animations and a storyboard.
            DoubleAnimation button1WidthAnimation = 
                new DoubleAnimation(300, 200, new Duration(TimeSpan.FromSeconds(5)));
            Storyboard.SetTargetName(button1WidthAnimation, button1.Name);
            Storyboard.SetTargetProperty(button1WidthAnimation, new PropertyPath(Button.WidthProperty));

            DoubleAnimation button2WidthAnimation = 
                new DoubleAnimation(300, 200, new Duration(TimeSpan.FromSeconds(5)));
            Storyboard.SetTargetName(button2WidthAnimation, button2.Name);
            Storyboard.SetTargetProperty(button2WidthAnimation, new PropertyPath(Button.WidthProperty));
            DoubleAnimation heightAnimationWithoutTarget = 
                new DoubleAnimation(300, 200, new Duration(TimeSpan.FromSeconds(5)));
            Storyboard.SetTargetProperty(heightAnimationWithoutTarget, new PropertyPath(FrameworkElement.HeightProperty));                
            myStoryboard = new Storyboard();
            this.Content = myMainPanel;
        private void button1Clicked(object sender, RoutedEventArgs args)
            // Starts the animations. The animation without a specified 
            // target name, heightAnimationWithoutTarget, is applied to
            // myMainPanel.
        private void button2Clicked(object sender, RoutedEventArgs args)
            // Starts the animations. The animation without a specified 
            // target name, heightAnimationWithoutTarget, is applied to
            // button2.

Animate a Property by Using a Storyboard
Animation Overview

© 2017 Microsoft