Как правильно перемещать Image (и другие FrameworkElement) внутри Grid

Question

Доброго времени суток! Вопрос следующий. Есть Grid на нем какой-нибудь контрол. Допустим Image.

<Grid x:Name="MainGrid" Background="Gray">
    <Image x:Name="Img" HorizontalAlignment="Left" VerticalAlignment="Top" Source="Resources/1.png" Width="100" Margin="0,0,0,0" />
</Grid>

Предположим Image должен перемещаться вслед за мышью. Не знаю насколько это правильно, но я обрабатываю событие Window.MouseMove и меняю Margin.

    private void Window_MouseMove(object sender, MouseEventArgs e)
    {
        Point MousePos = new Point();
        MousePos = e.GetPosition(MainGrid);
        Thickness Pos = new Thickness();
        Pos.Left = MousePos.X;
        Pos.Top = MousePos.Y;

        Img.Margin = Pos;
    }

Запускаем проверяем все вроде ок... НО как только я начинаю использовать анимацию к примеру так:

    private void Window_KeyDown(object sender, KeyEventArgs e)
    {
        // Анимация margin
        ThicknessAnimation ta = new ThicknessAnimation();
        Thickness topMargin = new Thickness(10, 10, 0, 0);
        ta.To = topMargin;
        ta.From = Img.Margin;
        ta.Duration = TimeSpan.FromSeconds(2);
        Img.BeginAnimation(FrameworkElement.MarginProperty, ta);

    }

все ломается. Margin я менять больше не могу, соответственно за мышью он не перемещается (У меня есть смутные сомнения что анимация видимо работает как отдельный поток, где-то делает Lock... надеюсь это не звучит как ахинея. Тогда почему он не освобождается в конце анимации? может ее как-то надо завершить?).

Вся эта история в точности повторяется для Button, Ellipse и StackPanel. Вероятно и для любого наследника UIElement будет то же самое. Ожидаемо все это происходит и c другими свойствами (DependencyProperty??) типа WidthProperty и т.п.

• Вопрос 1. Как вообще правильно двигать элементы (только без xaml - допустим динамически создаю элементы в отделенном коде)? Мой ход конем с Margin меня как-то внутренне напрягает. Как это вообще "принято" делать?
• Вопрос 2. Почему же все-таки Margin не меняется после анимации, и как это исправить?

Answer 1

Вы пытаетесь использовать анимацию для того, для чего она не предназначена, все проблемы из-за этого.

Смотрите, обычно в WPF вы не управляете координатами элементов, их вычисляет самостоятельно layout manager. Но для вашего случая вы хотите перенять у него управление, и устанавливать позицию самостоятельно. Не нужно пытаться обмануть layout manager, задавая маргин. Просто поместите ваши элементы в Canvas, и задавайте позицию через Canvas.Left и Canvas.Top.

К примеру, поместим в канвас несколько фигур и подпишемся на нажатие мыши:

<Canvas Name="DragArena" Background="#505160">
    <Ellipse
        Width="50" Height="50" Fill="#68829E"
        Canvas.Left="80" Canvas.Top="120"
        MouseLeftButtonDown="StartDrag"/>
    <Path
        Width="50" Height="50" Data="M0,0 L1,1 L-1,1 z" Stretch="Fill" Fill="#AEBD38"
        Canvas.Left="200" Canvas.Top="60"
        MouseLeftButtonDown="StartDrag"/>
    <Rectangle
        Width="50" Height="50" Fill="#598234"
        Canvas.Left="180" Canvas.Top="180"
        MouseLeftButtonDown="StartDrag"/>
</Canvas>

Дальнейшая магия — в code-behind.

Заведём поля для объекта, который мы таскаем, а также для смещения мышки от начала объекта:

Vector relativeMousePos;
FrameworkElement draggedObject;

По приходу нажатия мыши заполним эти переменные, подпишемся на движение и отпускание мыши, а также на потерю фокуса (вдруг юзер альттабнулся в другое окно?), и захватим мышь, чтобы события приходили только к этому элементу:

void StartDrag(object sender, MouseButtonEventArgs e)
{
    draggedObject = (FrameworkElement)sender;
    relativeMousePos = e.GetPosition(draggedObject) - new Point();
    draggedObject.MouseMove += OnDragMove;
    draggedObject.LostMouseCapture += OnLostCapture;
    draggedObject.MouseUp += OnMouseUp;
    Mouse.Capture(draggedObject);
}

При движении нажатой мыши мы должны обновить позицию элемента:

void OnDragMove(object sender, MouseEventArgs e)
{
    UpdatePosition(e);
}

Что делает UpdatePosition? Получает новую позицию мыши, вычисляет новые координаты объекта, и отправляет объект туда:

void UpdatePosition(MouseEventArgs e)
{
    var point = e.GetPosition(DragArena);
    var newPos = point - relativeMousePos;
    Canvas.SetLeft(draggedObject, newPos.X);
    Canvas.SetTop(draggedObject, newPos.Y);
}

Обработчик отпускания мыши отличается от обработчика потери фокуса только тем, что в первом случае нужно отпустить фокус:

void OnMouseUp(object sender, MouseButtonEventArgs e)
{
    FinishDrag(sender, e);
    Mouse.Capture(null);
}

void OnLostCapture(object sender, MouseEventArgs e)
{
    FinishDrag(sender, e);
}

Что делает процедура окончания движения? Всё просто: она отписывается от всех подписанных событий, и обновляет позицию в последний раз:

void FinishDrag(object sender, MouseEventArgs e)
{
    draggedObject.MouseMove -= OnDragMove;
    draggedObject.LostMouseCapture -= OnLostCapture;
    draggedObject.MouseUp -= OnMouseUp;
    UpdatePosition(e);
}

Вот что получается:

---

Если вы используете MVVM, получается практически то же самое.

---

По поводу второго вопроса: дело в том, что у dependency property есть несколько источников значений: значение по умолчанию, значение из стиля, непосредственно присвоенное значение, анимированное значение. Из них анимированное значение обладает большим «весом»: оно перекрывает непосредственно присвоенное значение. (Точно так же непосредственно присвоенное значение перекрывает значение из стиля.) Поэтому если вы присваиваете новое значение, не отменив анимацию, то вы не заметите результата.

Документация (на английском): Dependency property value precedence.