c# - 使用 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>

这个 Ellipse(我的 View 模型的数据模板的一部分)通过 ItemsSource 绑定(bind)到 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">