带有 Canvas 模板的 ItemsControl 中的椭圆移动动画答案

【问题标题】：Ellipse move animation inside ItemsControl with Canvas template带有 Canvas 模板的 ItemsControl 中的椭圆移动动画
【发布时间】：2011-03-28 23:16:24
【问题描述】：

使用 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'.

但是动画的targetproperty被指定为“Canvas.Left”而不是“Left”？

【问题讨论】：

ItemsControl 不相关 - 您可以仅使用 Canvas 内的 Ellipse xaml 重现问题。

标签： c# wpf xaml animation mvvm

【解决方案1】：

您需要初始化 Canvas.Left 以使 DoubleAnimation 工作：

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

【讨论】：