Create a new folder called Animation within your project.

Right-click this folder, and select Add New Item Silverlight User Control.

Call it Animation.

Remove the d:DesignHeight="300" d:DesignWidth="400" properties from the user control tag.

Replace the Grid tags with the following XAML:

<Canvas Width="900" Height="700" Background="AliceBlue">
  <Rectangle Width="52" Height="52" Stroke="#FF000000" Opacity="0" Fill="Red"
             x:Name="rectAnimation" RadiusX="10" RadiusY="10" />
</Canvas>

Open ~/Animation/Animation.xaml.cs, and enter the following code:

public partial class Animation : UserControl
{
    Storyboard StoryBoard = new Storyboard();
    int Count = 0;

    public Animation()
    {
        this.Loaded += new RoutedEventHandler(Animation_Loaded);
        StoryBoard.Completed += new EventHandler(StoryBoard_Completed);
        InitializeComponent();
    }

    public void Animation_Loaded(object sender, RoutedEventArgs e)
    {
        StoryBoard.Duration = TimeSpan.FromMilliseconds(10);
        StoryBoard.Begin();
    }

    void StoryBoard_Completed(object sender, EventArgs e)
    {
        Canvas.SetTop(rectAnimation, Count);
        Canvas.SetLeft(rectAnimation, Count);

rectAnimation.Opacity = 0.001 * Convert.ToDouble(Count);
        Count += 1;

        StoryBoard.Begin();

        if (Count == 100)
            StoryBoard.Stop();
        }
    }
}

Now edit MainMenu so you can navigate to this page. Open ~/MainMenu.xaml.cs.

In the MainMenu_Loaded() method, add a handler for the Animation button:

this.cmdAnimation.Click += new RoutedEventHandler(cmdAnimation_Click);

Add the code to load Animation.xaml when the Animation button is clicked:

void cmdAnimation_Click(object sender, RoutedEventArgs e)
{
    PageNavigator.LoadPage(new Animation.Animation());
}

Press F5 to run the application.

In Animation_Loaded(), add the following code:

rectAnimation.MouseLeftButtonDown +=
  new MouseButtonEventHandler(rectAnimation_MouseLeftButtonDown);

Let's add another storyboard for an animation that will start when the rectangle is clicked. You will change the rectangle's color to yellow to indicate that it has been clicked and then move it horizontally instead of diagonally across the screen—Pixar has nothing to fear. Add a new Storyboard object within the Animation class:

Storyboard StoryBoard2 = new Storyboard();

Create the methods rectAnimation_MouseLeftButtonDown() and StoryBoard2_Completed():

void rectAnimation_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    rectAnimation.Fill = new SolidColorBrush(Colors.Yellow);
    rectAnimation.Opacity = 1;
    StoryBoard.Stop();

    StoryBoard2.Completed += new EventHandler(StoryBoard2_Completed);
    StoryBoard2.Duration = TimeSpan.FromMilliseconds(10);
    StoryBoard2.Begin();
}

void StoryBoard2_Completed(object sender, EventArgs e)
{
    Canvas.SetLeft(rectAnimation, Count);
    Count += 1;
    StoryBoard2.Begin();
}

Press F5 to run your application, and then click the rectangle. The rectangle should change to yellow and then move across the screen.