WPF：Canvas内ItemsControl元素随MyBox.X变化的移动动画实现

前提修正：确保数据变更通知UI #

首先你的MyBox类需要实现INotifyPropertyChanged接口，否则属性变更无法通知UI更新；同时集合建议改用ObservableCollection<MyBox>，保证增删元素时UI同步。

class MyBox : INotifyPropertyChanged
{
    private int _x;
    public int X
    {
        get => _x;
        set
        {
            if (_x != value)
            {
                _x = value;
                OnPropertyChanged(nameof(X));
            }
        }
    }

    private int _y;
    public int Y
    {
        get => _y;
        set
        {
            if (_y != value)
            {
                _y = value;
                OnPropertyChanged(nameof(Y));
            }
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

// 替换原List为ObservableCollection
ObservableCollection<MyBox> Boxes { get; set; } = new ObservableCollection<MyBox>();

问题根源：RenderTransform导致的偏移叠加错误 #

你之前使用RenderTransform.TranslateTransform出现移动距离错误，是因为：

• Canvas.Left/Top是布局属性，直接决定元素在Canvas中的原始位置
• RenderTransform是布局完成后对元素的额外偏移，当你修改Canvas.Left同时用RenderTransform做动画时，两者的偏移会叠加，导致最终位置是新的Canvas.Left值加上动画偏移量，出现移动距离异常。

正确的做法是直接对Canvas.Left/Top的变化添加平滑过渡动画，让元素的布局位置直接平滑更新。

解决方案1：使用Transitions自动过渡（WPF 4.5+） #

最简单的方式是利用WPF的Transition功能，给ContentPresenter添加过渡动画，当Canvas.Left/Top属性变化时自动触发平滑动画：

修改你的ItemContainerStyle：

<Setter Property="ItemContainerStyle">
    <Setter.Value>
        <Style TargetType="ContentPresenter">
            <Setter Property="Canvas.Top" Value="{Binding Y}" />
            <Setter Property="Canvas.Left" Value="{Binding X}" />
            <!-- 添加Canvas位置变化的过渡动画 -->
            <Setter Property="Transitions">
                <Setter.Value>
                    <TransitionCollection>
                        <!-- 0.3秒完成X轴移动，可调整Duration值 -->
                        <DoubleTransition Property="Canvas.Left" Duration="0:0:0.3" />
                        <!-- Y轴同理 -->
                        <DoubleTransition Property="Canvas.Top" Duration="0:0:0.3" />
                    </TransitionCollection>
                </Setter.Value>
            </Setter>
            <Setter Property="ContentTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <Button Width="50" Height="30" Content="Box" />
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Setter.Value>
</Setter>

解决方案2：使用EventTrigger手动触发动画 #

如果需要更灵活的动画控制（比如自定义缓动函数），可以通过监听Binding.TargetUpdated事件手动启动动画：

1. 先给绑定添加NotifyOnTargetUpdated=True，确保属性变更时触发目标更新事件：

<Setter Property="Canvas.Left" Value="{Binding X, NotifyOnTargetUpdated=True}" />
<Setter Property="Canvas.Top" Value="{Binding Y, NotifyOnTargetUpdated=True}" />

2. 添加EventTrigger启动动画：

<Style TargetType="ContentPresenter">
    <Setter Property="Canvas.Top" Value="{Binding Y, NotifyOnTargetUpdated=True}" />
    <Setter Property="Canvas.Left" Value="{Binding X, NotifyOnTargetUpdated=True}" />
    <Style.Triggers>
        <EventTrigger RoutedEvent="Binding.TargetUpdated">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation 
                        Storyboard.TargetProperty="Canvas.Left"
                        Duration="0:0:0.3"
                        <!-- 从当前位置过渡到新的X值 -->
                        From="{Binding Canvas.Left, RelativeSource={RelativeSource Self}}"
                        To="{Binding X}"
                        <!-- 可添加缓动函数，比如弹性效果 -->
                        EasingFunction="{StaticResource ElasticEase}" />
                    <DoubleAnimation 
                        Storyboard.TargetProperty="Canvas.Top"
                        Duration="0:0:0.3"
                        From="{Binding Canvas.Top, RelativeSource={RelativeSource Self}}"
                        To="{Binding Y}"
                        EasingFunction="{StaticResource ElasticEase}" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Style.Triggers>
    <Setter Property="ContentTemplate">
        <Setter.Value>
            <DataTemplate>
                <Button Width="50" Height="30" Content="Box" />
            </DataTemplate>
        </Setter.Value>
    </Setter>
</Style>

如果需要缓动函数，可以在资源中定义：

<Window.Resources>
    <ElasticEase x:Key="ElasticEase" Oscillations="2" Springiness="3" />
</Window.Resources>

最终使用注意 #

确保你的ItemsControl引用资源时拼写正确（原代码中StaticReSource是笔误，应为StaticResource）：

<ItemsControl ItemsSource="{Binding Boxes}" Style="{StaticResource boxTemplate}" />

内容的提问来源于stack exchange，提问作者feng