WPFにて、オブジェクトの並び替えをドラッグアンドドロップで行いたい。

Question

前提・実現したいこと

円を3つ並べ、それぞれをドラッグアンドドロップすることで順番を入れ替えられるようにしようとしています。
その際、入れ替えられる円（図の例の場合中央にあった円）は自動で入れ替え後の位置に移動するようにします。
また、自動で入れ替えられる際、円がスライドするようアニメーションをつけています。

発生している問題・エラーメッセージ

入れ替えが完了後、アニメーションによって動かされた円をドラッグしようとしても対象の円がドラッグに追随してくれません。
（図の例の場合、入れ替え後の1番左の円をドラッグしようとしても反応しません。）
アニメーションをつけた状態で正常にドラッグできるようにするにはどのようにしたらよいか助言をいただきたいです。

該当のソースコード

using System;
using System.Collections.Generic;
using System.Windows.Controls.Primitives;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfTest
{
    /// <summary>
    /// MainWindow.xaml の相互作用ロジック
    /// </summary>
    public partial class MainWindow : Window
    {
        LayoutManager manager;

        public MainWindow()
        {
            InitializeComponent();
            manager = new LayoutManager(100.0);

            manager.Add(thumb);
            manager.Add(thumb2);
            manager.Add(thumb3);


        }
        private void thumb_DragCompleted(object sender, System.Windows.Controls.Primitives.DragCompletedEventArgs e)
        {
            Thumb t = (Thumb)sender;
            Canvas.SetLeft(t, manager.GetLeft(t));
        }

        private void thumb_DragDelta(object sender, System.Windows.Controls.Primitives.DragDeltaEventArgs e)
        {
            Thumb t = (Thumb)sender;

            double currentLeft = Canvas.GetLeft(t) + e.HorizontalChange;

            Canvas.SetLeft(t, currentLeft);

            UIElement ui = manager.UpdatePosition(t, currentLeft);

            if (ui != null)
            {
                //以下3行をコメントアウトすると問題なく動作する。
                Duration duration = new Duration(TimeSpan.FromMilliseconds(200));
                DoubleAnimation anime = new DoubleAnimation(manager.GetLeft(t), manager.GetLeft(ui), duration);
                ui.BeginAnimation(Canvas.LeftProperty, anime);

                Canvas.SetLeft(ui, manager.GetLeft(ui));
            }
        }

    }

    //********************************************************************************
    //
    // 以下、どの円を何番目に配置するかを管理するクラスになります
    //
    //********************************************************************************



    public class LayoutManager
    {
        double objectwidth;
        List<TargetInfo> list;

        public LayoutManager(double width)
        {
            objectwidth = width;
            list = new List<TargetInfo>();
        }

        
        public class TargetInfo
        {
            public double left;
            public UIElement element;

            public TargetInfo(double left, UIElement element)
            {
                this.left = left;
                this.element = element;
            }
        }

        public void Add(UIElement element)
        {
            list.Add(new TargetInfo(list.Count * objectwidth, element));
        }

        public double GetLeft(UIElement element)
        {
            
            return list.Find(p => p.element.Equals(element)).left;

        }

        public UIElement UpdatePosition(UIElement element, double dCurrent)
        {
            if (list.Count > 1) {
                for (int i = 0; i < list.Count(); i++)
                {
                    if (list[i].element.Equals(element))
                    {
                        //右隣と左隣と比較

                        //左端だった場合
                        if (i <= 0)
                        {
                            if (list[1].left < dCurrent)
                            {
                                UIElement tmp = list[0].element;
                                list[0].element = list[1].element;
                                list[1].element = tmp;
                                return list[0].element;

                            }
                            //右端だった場合
                        }
                        else if (i >= list.Count() - 1)
                        {
                            if (list[i - 1].left > dCurrent)
                            {
                                UIElement tmp = list[i].element;
                                list[i].element = list[i - 1].element;
                                list[i - 1].element = tmp;
                                return list[i].element;
                            }
                        }
                        else
                        {
                            if (list[i - 1].left > dCurrent)
                            {
                                UIElement tmp = list[i].element;
                                list[i].element = list[i - 1].element;
                                list[i - 1].element = tmp;
                                return list[i].element;

                            }else if(list[i + 1].left < dCurrent)
                            {
                                UIElement tmp = list[i].element;
                                list[i].element = list[i + 1].element;
                                list[i + 1].element = tmp;
                                return list[i].element;

                            }

                        }
                    }
                }
            }
            return null;
        }
    }
}

<Window x:Class="WpfTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfTest"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800"
        >
    <Canvas Name="canvas" Background="AliceBlue">
        <Thumb Name="thumb" DragCompleted="thumb_DragCompleted" DragDelta="thumb_DragDelta" Canvas.Top="0" Canvas.Left="0">
            <Thumb.Template>
                <ControlTemplate>
                    <Ellipse Name="ellipse" Fill="LightBlue"
                         Width="90" Height="90"/>

                </ControlTemplate>
            </Thumb.Template>
        </Thumb>
        <Thumb Name="thumb2" DragCompleted="thumb_DragCompleted" DragDelta="thumb_DragDelta" Canvas.Top="0" Canvas.Left="101">
            <Thumb.Template>
                <ControlTemplate>
                    <Ellipse Name="ellipse" Fill="Aquamarine"
                         Width="90" Height="90"/>

                </ControlTemplate>
            </Thumb.Template>
        </Thumb>
        <Thumb Name="thumb3" DragCompleted="thumb_DragCompleted" DragDelta="thumb_DragDelta" Canvas.Top="0" Canvas.Left="201">
            <Thumb.Template>
                <ControlTemplate>
                    <Ellipse Name="ellipse" Fill="Bisque"
                         Width="90" Height="90"/>

                </ControlTemplate>
            </Thumb.Template>
        </Thumb>
    </Canvas>
</Window>

    

試したこと

アニメーションを除外すると、どの円をドラッグしても問題なく追随してくれます。

具体的には、添付しましたソースコード中の以下コメントがある箇所になります。

//以下3行をコメントアウトすると問題なく動作する。

補足情報（FW/ツールのバージョンなど）

開発環境
VS2019

Comments

[Zuishin]

ドラッグ中にアニメーションしようとしているようですが、ドロップ後にしたらいいのではありませんか？

[pochikou]

ご指摘有難うございます。
DragCompletedの中で一括でアニメーションをするよう変更してみましたが、同様の現象が出てしまいました。

Answer 1

自己解決しました。

以下のようにドラッグ終了後に各オブジェクトに対してBeginAnimationの第2引数をnullにして実行したところ想定通りの動作をするようになりました。

            foreach (var ui in manager.list)
            {
                ui.element.BeginAnimation(Canvas.LeftProperty, null);
            }