WPF 绑定 Canvas.Left/Canvas.Top 到 Point DependencyProperty，使用 PointAnimation

Question

Please consider the following simplified example which illustrates my problem:

MainWindow.xaml

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Width="500" Height="500"
        Title="Click anywhere to animate the movement of the blue thingy...">
    <Canvas 
        x:Name="canvas" 
        HorizontalAlignment="Stretch" 
        VerticalAlignment="Stretch" 
        Background="AntiqueWhite"  
        MouseDown="canvas_MouseDown" />
</Window>

MainWindow.xaml.cs

using System;
using System.Windows;
using System.Windows.Input;
using System.Windows.Media.Animation;

namespace WpfApplication1
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            this.canvas.Children.Add(new Thingy());
        }

        private void canvas_MouseDown(object sender, MouseButtonEventArgs e)
        {
            var thingy = (Thingy)this.canvas.Children[0];

            var from = new Point(0.0, 0.0);

            var to = new Point(
                canvas.ActualWidth  - thingy.ActualWidth, 
                canvas.ActualHeight - thingy.ActualHeight
            );

            var locAnim = new PointAnimation(
                from, 
                to, 
                new Duration(TimeSpan.FromSeconds(5))
            );

            locAnim.Completed += (s, a) =>
            {
                // Only at this line does the thingy move to the 
                // correct position...
                thingy.Location = to;
            };

            thingy.Location = from;
            thingy.BeginAnimation(Thingy.LocationProperty, locAnim);
        }
    }
}

Thingy.xaml

<UserControl x:Class="WpfApplication1.Thingy"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             Width="50" Height="50" Background="Blue" />

Thingy.xaml.cs

using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;

namespace WpfApplication1
{
    public partial class Thingy : UserControl
    {
        public static DependencyProperty LocationProperty = 
            DependencyProperty.Register(
                "Location", 
                typeof(Point), 
                typeof(Thingy)
            );

        public Thingy()
        {
            InitializeComponent();

            Canvas.SetLeft(this, 0.0);
            Canvas.SetTop(this, 0.0);

            var xBind = new Binding();
            xBind.Source = this;
            xBind.Path = new PropertyPath(Canvas.LeftProperty);
            xBind.Mode = BindingMode.TwoWay;

            var yBind = new Binding();
            yBind.Source = this;
            yBind.Path = new PropertyPath(Canvas.TopProperty);
            yBind.Mode = BindingMode.TwoWay;

            var locBind = new MultiBinding();
            locBind.Converter = new PointConverter();
            locBind.Mode = BindingMode.TwoWay;
            locBind.Bindings.Add(xBind);
            locBind.Bindings.Add(yBind);
            BindingOperations.SetBinding(
                this, 
                Thingy.LocationProperty, 
                locBind
            );
        }

        public Point Location
        {
            get
            {
                return (Point)this.GetValue(LocationProperty);
            }

            set
            {
                this.SetValue(LocationProperty, value);
            }
        }
    }
}

PointConverter.cs

using System;
using System.Globalization;
using System.Windows;
using System.Windows.Data;

namespace WpfApplication1
{
    public class PointConverter : IMultiValueConverter
    {
        public object Convert(object[] v, Type t, object p, CultureInfo c)
        {
            return new Point((double)v[0], (double)v[1]);
        }

        public object[] ConvertBack(object v, Type[] t, object p, CultureInfo c)
        {
            return new object[] { ((Point)v).X, ((Point)v).Y };
        }
    }
}

The goals here are:

1. Use the LocationProperty to manipulate and access the Canvas.LeftProperty and Canvas.TopProperty values.
2. Animate said LocationProperty with the PointAnimation class.

Goal #1 appears to be working correctly, it's only when trying to animate the LocationProperty does it not behave as expected.

By "expected" I mean the instance of Thingy should move as the animation progresses.

I am able to accomplish this using two instances of the DoubleAnimation class.

If the problem is that Point is a value type, then I suspect that I could define my own Point type and my own AnimationTimeline . This is not what I wish to do. This is part of a much larger project and the LocationProperty will be used for other things.

And to be honest, the bottom line is that it seems to me this should just work, can you tell me:

1. Why it does not?
2. If there is a solution to the problem as defined?

I'll also mention that I'm targeting .Net Framework 4.5 for this project.

Thank you.

Answer 1

Here's the simplest code to animate something.

• it leverages the dependency property callback
• does not use a binding
• does not use a converter
• does not use a storyboard

Main window:

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media.Animation;

namespace WpfApplication1
{
    public partial class MainWindow
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void MainWindow_OnMouseDown(object sender, MouseButtonEventArgs e)
        {
            var x = Canvas.GetLeft(Control1);
            var y = Canvas.GetTop(Control1);
            x = double.IsNaN(x) ? 0 : x;
            y = double.IsNaN(y) ? 0 : y;
            var point1 = new Point(x, y);
            var point2 = e.GetPosition(this);
            var animation = new PointAnimation(point1, point2, new Duration(TimeSpan.FromSeconds(1)));
            animation.EasingFunction = new CubicEase();
            Control1.BeginAnimation(UserControl1.LocationProperty, animation);
        }
    }
}

Main window:

<Window x:Class="WpfApplication1.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:WpfApplication1"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525" MouseDown="MainWindow_OnMouseDown">
    <Canvas>
        <local:UserControl1 Background="Red" Height="100" Width="100" x:Name="Control1" />
    </Canvas>
</Window>

Control:

using System.Windows;
using System.Windows.Controls;

namespace WpfApplication1
{
    public partial class UserControl1
    {
        public static readonly DependencyProperty LocationProperty = DependencyProperty.Register(
            "Location", typeof(Point), typeof(UserControl1), new UIPropertyMetadata(default(Point), OnLocationChanged));

        public UserControl1()
        {
            InitializeComponent();
        }

        public Point Location
        {
            get { return (Point) GetValue(LocationProperty); }
            set { SetValue(LocationProperty, value); }
        }

        private static void OnLocationChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            var control1 = (UserControl1) d;
            var value = (Point) e.NewValue;
            Canvas.SetLeft(control1, value.X);
            Canvas.SetTop(control1, value.Y);
        }
    }
}

Control:

<UserControl x:Class="WpfApplication1.UserControl1"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:WpfApplication1"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">

</UserControl>

TODO: adjust the code to your needs :)

EDIT: A trivial two-way binding that listens to Canvas.[Left|Top]Property :

(to be enhanced)

using System;
using System.ComponentModel;
using System.Windows;
using System.Windows.Controls;

namespace WpfApplication1
{
    public partial class UserControl1
    {
        public static readonly DependencyProperty LocationProperty = DependencyProperty.Register(
            "Location", typeof(Point), typeof(UserControl1), new PropertyMetadata(default(Point), OnLocationChanged));

        public UserControl1()
        {
            InitializeComponent();

            DependencyPropertyDescriptor.FromProperty(Canvas.LeftProperty, typeof(Canvas))
                .AddValueChanged(this, OnLeftChanged);
            DependencyPropertyDescriptor.FromProperty(Canvas.TopProperty, typeof(Canvas))
                .AddValueChanged(this, OnTopChanged);
        }

        public Point Location
        {
            get { return (Point) GetValue(LocationProperty); }
            set { SetValue(LocationProperty, value); }
        }

        private void OnLeftChanged(object sender, EventArgs eventArgs)
        {
            var left = Canvas.GetLeft(this);
            Location = new Point(left, Location.Y);
        }

        private void OnTopChanged(object sender, EventArgs e)
        {
            var top = Canvas.GetTop(this);
            Location = new Point(Location.X, top);
        }

        private static void OnLocationChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            var control1 = (UserControl1) d;
            var value = (Point) e.NewValue;
            Canvas.SetLeft(control1, value.X);
            Canvas.SetTop(control1, value.Y);
        }
    }
}

Answer 2

I like Aybe's answer but it doesn't address why the original code doesn't work. I ran your code and tried some alternatives and it appears what is happening is that the binding converter is being ignored during the animation. If you set a breakpoint in the converter methods, or do a Debug.WriteLine, either way you can see that the converter is not getting invoked throughout the animation, but rather only when the property is explicitly set in your code.

Digging deeper, the problem is in the way you're setting up the Thingy bindings. The binding source property should be Thingy.Location while the target properties should be Canvas.Left and Canvas.Top . You have it backwards though - you're making Canvas.Left and Canvas.Top the source properties and Thingy.Location the target property. You would think making it a two-way binding would make it work (and it does, when you explicitly set the Thingy.Location property), but it appears that the Two-Way binding aspect is ignored for animations.

One solution is not to use a multi-binding here. Multi-binding is really for when one property is being sourced by multiple properties or conditions. Here, you have multiple properties ( Canvas.Left and Canvas.Top ) that you want to source with a single property - Thingy.Location . So, in the Thingy constructor:

    var xBind = new Binding();
    xBind.Source = this;
    xBind.Path = new PropertyPath(Thingy.LocationProperty);
    xBind.Mode = BindingMode.OneWay;
    xBind.Converter = new PointToDoubleConverter();
    xBind.ConverterParameter = false;
    BindingOperations.SetBinding(this, Canvas.LeftProperty, xBind);                

    var yBind = new Binding();
    yBind.Source = this;
    yBind.Path = new PropertyPath(Thingy.LocationProperty);
    yBind.Mode = BindingMode.OneWay;
    yBind.Converter = new PointToDoubleConverter();
    yBind.ConverterParameter = true;
    BindingOperations.SetBinding(this, Canvas.TopProperty, yBind); 

The other difference is the binding converter. Rather than take two doubles and give you a Point , we need a converter that takes a Point and extracts the double used for the Canvas.Left and Canvas.Top properties (and I'm using the ConverterParameter to specify which one is desired). So:

public class PointToDoubleConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        var pt = (Point)value;
        bool isY = (bool)parameter;
        return isY ? pt.Y : pt.X;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return value;
    }
}

This makes the animation work while still using bindings and converters. The only drawback here is that the bindings between the Canvas properties and Thingy.Location are necessarily one-way because there's no way to convert Canvas.Left or Canvas.Top alone back to a full Point . In other words if you subsequently change Canvas.Left or Canvas.Top , Thingy.Location won't update. (This is true of any binding-less solution as well of course).

However, if you do go back to your original multi-binding version, and just add the code to the Location property change handler to update Canvas.Left and Canvas.Top , you can have your cake and eat it too. They wouldn't need to be TwoWay bindings at that point because you're taking care of updating Canvas.Left and Canvas.Top in the property change handler for Location . Basically all the actual binding is then doing is making sure Location updates when Canvas.Left and Canvas.Top do.

In any event, the mystery is solved as to why your original approach didn't work. When setting up complex bindings it's crucial to correctly identify the source and the targets; TwoWay bindings are not a catch-all for all cases, notably, animations.