title: Dragging a WPF user control
body: <p>I created a movable <code>UserControl</code> </p>
  
  <pre><code>    &lt;UserControl x:Class="Restaurant.Views.Managerer.TablePanel"
          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:Restaurant.Helpers.Converter"
          mc:Ignorable="d"
          x:Name="root"
          MouseLeftButtonDown="root_MouseLeftButtonDown"
          MouseLeftButtonUp="root_MouseLeftButtonUp"
          MouseMove="root_MouseMove"    
          DataContext="{Binding RelativeSource={RelativeSource Self}}"&gt;
  ....
  </code></pre>
  
  <h2>Code</h2>
  
  <pre><code>Point anchorPoint;
          Point currentPoint;
          bool isInDrag = false;
  
          private void root_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
          {
              var element = sender as FrameworkElement;
              anchorPoint = e.GetPosition(null);
              element.CaptureMouse();
              isInDrag = true;
              e.Handled = true;
          }
  
          private void root_MouseMove(object sender, MouseEventArgs e)
          {
              if (isInDrag)
              {
                  var element = sender as FrameworkElement;
                  currentPoint = e.GetPosition(null);
  
                  var transform = new TranslateTransform
                                      {
                                          X = (currentPoint.X - anchorPoint.X),
                                          Y = (currentPoint.Y - anchorPoint.Y)
                                      };
                  this.RenderTransform = transform;
                  anchorPoint = currentPoint;
              }
          }
  
          private void root_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
          {
              if (isInDrag)
              {
                  var element = sender as FrameworkElement;
                  element.ReleaseMouseCapture();
                  isInDrag = false;
                  e.Handled = true;
              }
          }
  </code></pre>
  
  <p>If I change the code from                                  </p>
  
  <pre><code>X = (currentPoint.X - anchorPoint.X),
  Y = (currentPoint.Y - anchorPoint.Y)
  </code></pre>
  
  <p>to</p>
  
  <pre><code>X = (currentPoint.X),
  Y = (currentPoint.Y)
  </code></pre>
  
  <p>I can move the <code>UserControl</code>, but the mouse and <code>UserControl</code> do not match</p>