can't undestand why animation sample from book not working

Question

Anybody, tell me please why this code not working.

<UserControl x:Class="slv.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
<Rectangle Fill="#FFFF0000" Stroke="#FF000000" Width="40" Height="40" Canvas.Top="40" x:Name="rect">
    <Rectangle.Triggers>
        <EventTrigger RoutedEvent="Rectangle.Loaded">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="rect" Storyboard.TargetProperty="(Canvas.Left)" >
                        <DiscreteDoubleKeyFrame KeyTime="0:0:1" Value="300" />
                        <DiscreteDoubleKeyFrame KeyTime="0:0:9" Value="600" />
                    </DoubleAnimationUsingKeyFrames>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Rectangle.Triggers>
</Rectangle>

this code from book aboute silverlight 3, author Laurence Moroney

Answer 1

Well, if this is from a book, and this is the exact XAML then it is a bit weird. I managed to get the example working just fine, but what you are missing, is a canvas.

Here is the code that I modified by adding a canvas around the rectangle. Even if it displayed anything, it would not have worked if you did not wrap it with a canvas, because in the animation it specifically references the translation of the rectangle with respect to a canvas.

<UserControl x:Class="SilverlightApplication2.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
  <Canvas x:Name="LayoutRoot">
        <Rectangle Fill="#FFFF0000" Stroke="#FF000000" Width="40" Height="40" Canvas.Top="40" x:Name="rect">
            <Rectangle.Triggers>
                <EventTrigger RoutedEvent="Rectangle.Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="rect" Storyboard.TargetProperty="(Canvas.Left)" >
                                <DiscreteDoubleKeyFrame KeyTime="0:0:1" Value="300" />
                                <DiscreteDoubleKeyFrame KeyTime="0:0:9" Value="600" />
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Rectangle.Triggers>
        </Rectangle>
    </Canvas>
</UserControl>