Question

Using a DoubleAnimation, the attached property Canvas.Left should be gradually set to 100:

        <Ellipse Width="30" Height="30" Fill="Purple">
            <Ellipse.Triggers>
                <EventTrigger RoutedEvent="Ellipse.Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Duration="0:0:5" Storyboard.TargetProperty="(Canvas.Left)" To="100" RepeatBehavior="Forever" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Ellipse.Triggers>
        </Ellipse>

This Ellipse (part of a datatemplate for my viewmodel) is binded to the ItemsControl through ItemsSource:

<ItemsControl ItemsSource="{Binding Components}">

    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas Background="Beige" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>

    <ItemsControl.ItemContainerStyle>
        <Style TargetType="ContentPresenter">
            <Setter Property="Canvas.Left" Value="{Binding X}" />
            <Setter Property="Canvas.Top" Value="{Binding Y}" />
        </Style>
    </ItemsControl.ItemContainerStyle>


</ItemsControl>

However, when the ellipse is loaded, the following exception occurs:

Cannot animate the 'Left' property on a 'System.Windows.Shapes.Ellipse' using a 'System.Windows.Media.Animation.DoubleAnimation'.

But the targetproperty of the animation is specified as “Canvas.Left” and not “Left”?

Answer 1

You need to initialize Canvas.Left for the DoubleAnimation to work:

<Ellipse Width="30" Height="30" Fill="Purple" Canvas.Left="0">