title: WPF Bind Canvas.Left/Canvas.Top to Point DependencyProperty, Use PointAnimation
body: <p>Please consider the following simplified example which illustrates my problem:</p>
  
  <p>MainWindow.xaml</p>
  
  <pre><code>&lt;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..."&gt;
      &lt;Canvas 
          x:Name="canvas" 
          HorizontalAlignment="Stretch" 
          VerticalAlignment="Stretch" 
          Background="AntiqueWhite"  
          MouseDown="canvas_MouseDown" /&gt;
  &lt;/Window&gt;
  </code></pre>
  
  <p>MainWindow.xaml.cs</p>
  
  <pre><code>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) =&gt;
              {
                  // Only at this line does the thingy move to the 
                  // correct position...
                  thingy.Location = to;
              };
  
              thingy.Location = from;
              thingy.BeginAnimation(Thingy.LocationProperty, locAnim);
          }
      }
  }
  </code></pre>
  
  <p>Thingy.xaml</p>
  
  <pre><code>&lt;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" /&gt;
  </code></pre>
  
  <p>Thingy.xaml.cs</p>
  
  <pre><code>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);
              }
          }
      }
  }
  </code></pre>
  
  <p>PointConverter.cs</p>
  
  <pre><code>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 };
          }
      }
  }
  </code></pre>
  
  <p>The goals here are:</p>
  
  <ol>
  <li>Use the <code>LocationProperty</code> to manipulate and access the <code>Canvas.LeftProperty</code> and <code>Canvas.TopProperty</code> values.</li>
  <li>Animate said <code>LocationProperty</code> with the <code>PointAnimation</code> class.</li>
  </ol>
  
  <p>Goal #1 appears to be working correctly, it's only when trying to animate the <code>LocationProperty</code> does it not behave as expected.</p>
  
  <p>By "expected" I mean the instance of <code>Thingy</code> should move as the animation progresses.</p>
  
  <p>I am able to accomplish this using two instances of the <code>DoubleAnimation</code> class.</p>
  
  <p>If the problem is that <code>Point</code> is a value type, then I suspect that I could define my own <code>Point</code> type and my own <code>AnimationTimeline</code>. This is not what I wish to do. This is part of a much larger project and the <code>LocationProperty</code> will be used for other things.</p>
  
  <p>And to be honest, the bottom line is that it seems to me this should just work, can you tell me:</p>
  
  <ol>
  <li>Why it does not? </li>
  <li>If there is a solution to the problem as defined?</li>
  </ol>
  
  <p>I'll also mention that I'm targeting .Net Framework 4.5 for this project.</p>
  
  <p>Thank you.</p>