使用 Canvas 模板在 ItemsControl 内椭圆移动动画

Question

使用 DoubleAnimation，附加属性 Canvas.Left 应逐渐设置为 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>

此椭圆（我的视图模型的数据模板的一部分）通过 ItemsSource 绑定到 ItemsControl：

<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>

但是，当加载椭圆时，会发生以下异常：

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

但是动画的目标属性指定为“Canvas.Left”而不是“Left”？

Answer 1

您需要初始化 Canvas.Left 才能使 DoubleAnimation 正常工作：

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