title: Drawing diagram arcs with drag and drop in WPF
body: <p>I'm trying to perform a <strong>drag and drop approach to creating relationships in a diagram</strong>, directly analagous to <a href="http://en.wikipedia.org/wiki/SQL_Server_Management_Studio" rel="nofollow noreferrer">SQL Server Management Studio</a> diagramming tools. For example, in the illustration below, the user would drag <code>CustomerID</code> from the <code>User</code> entity to the <code>Customer</code> entity and create a foreign key relationship between the two.</p>
  
  <p>The key desired feature is that a temporary arc path would be drawn as the user performs the drag operation, following the mouse. Moving entities or relationships once created isn't the issue I'm running into.</p>
  
  <p><img src="https://i.stack.imgur.com/sagEH.jpg" alt="Entity–relationship diagram"></p>
  
  <p>Some reference XAML corresponding to an entity on the diagram above:</p>
  
  <pre><code>&lt;!-- Entity diagram control --&gt;
  &lt;Grid MinWidth="10" MinHeight="10" Margin="2"&gt;
      &lt;Grid.RowDefinitions&gt;
          &lt;RowDefinition Height="Auto"&gt;&lt;/RowDefinition&gt;
          &lt;RowDefinition Height="*" &gt;&lt;/RowDefinition&gt;
      &lt;/Grid.RowDefinitions&gt;
      &lt;Grid.ColumnDefinitions&gt;
          &lt;ColumnDefinition Width="*"&gt;&lt;/ColumnDefinition&gt;
      &lt;/Grid.ColumnDefinitions&gt;
      &lt;Grid Grid.Row="0" Grid.Column="0" IsHitTestVisible="False" Background="{StaticResource ControlDarkBackgroundBrush}"&gt;
          &lt;Label Grid.Row="0" Grid.Column="0" Style="{DynamicResource LabelDiagram}" Content="{Binding DiagramHeader, Mode=OneWay}" /&gt;
      &lt;/Grid&gt;
      &lt;ScrollViewer Grid.Row="1" Grid.Column="0" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" Background="{StaticResource ControlBackgroundBrush}" &gt;
          &lt;StackPanel VerticalAlignment="Top"&gt;
              &lt;uent:EntityDataPropertiesDiagramControl DataContext="{Binding EntityDataPropertiesFolder}" /&gt;
              &lt;uent:CollectionEntityPropertiesDiagramControl DataContext="{Binding CollectionEntityPropertiesFolder}" /&gt;
              &lt;uent:DerivedEntityDataPropertiesDiagramControl DataContext="{Binding DerivedEntityDataPropertiesFolder}" /&gt;
              &lt;uent:ReferenceEntityPropertiesDiagramControl DataContext="{Binding ReferenceEntityPropertiesFolder}" /&gt;
              &lt;uent:MethodsDiagramControl DataContext="{Binding MethodsFolder}" /&gt;
          &lt;/StackPanel&gt;
      &lt;/ScrollViewer&gt;
      &lt;Grid Grid.RowSpan="2" Margin="-10"&gt;
          &lt;lib:Connector x:Name="LeftConnector" Orientation="Left" VerticalAlignment="Center" HorizontalAlignment="Left" Visibility="Collapsed"/&gt;
          &lt;lib:Connector x:Name="TopConnector" Orientation="Top" VerticalAlignment="Top" HorizontalAlignment="Center" Visibility="Collapsed"/&gt;
          &lt;lib:Connector x:Name="RightConnector" Orientation="Right" VerticalAlignment="Center" HorizontalAlignment="Right" Visibility="Collapsed"/&gt;
          &lt;lib:Connector x:Name="BottomConnector" Orientation="Bottom" VerticalAlignment="Bottom" HorizontalAlignment="Center" Visibility="Collapsed"/&gt;
      &lt;/Grid&gt;
  &lt;/Grid&gt;
  </code></pre>
  
  <p>My current approach to doing this is to:</p>
  
  <p>1) Initiate the drag operation in a child control of the entity, such as:</p>
  
  <pre><code>protected override void OnPreviewMouseMove(MouseEventArgs e)
  {
      if (e.LeftButton != MouseButtonState.Pressed)
      {
          dragStartPoint = null;
      }
      else if (dragStartPoint.HasValue)
      {
          Point? currentPosition = new Point?(e.GetPosition(this));
          if (currentPosition.HasValue &amp;&amp; (Math.Abs(currentPosition.Value.X - dragStartPoint.Value.X) &gt; 10 || Math.Abs(currentPosition.Value.Y - dragStartPoint.Value.Y) &gt; 10))
          {
              DragDrop.DoDragDrop(this, DataContext, DragDropEffects.Link);
              e.Handled = true;
          }
      }
  }
  </code></pre>
  
  <p>2) Create a connector adorner when the drag operation leaves the entity, such as:</p>
  
  <pre><code>protected override void OnDragLeave(DragEventArgs e)
  {
      base.OnDragLeave(e);
      if (ParentCanvas != null)
      {
          AdornerLayer adornerLayer = AdornerLayer.GetAdornerLayer(ParentCanvas);
          if (adornerLayer != null)
          {
              ConnectorAdorner adorner = new ConnectorAdorner(ParentCanvas, BestConnector);
              if (adorner != null)
              {
                  adornerLayer.Add(adorner);
                  e.Handled = true;
              }
          }
      }
  }
  </code></pre>
  
  <p>3) Draw the arc path as the mouse is being moved in the connector adorner, such as:</p>
  
  <pre><code>    protected override void OnMouseMove(MouseEventArgs e)
      {
          if (e.LeftButton == MouseButtonState.Pressed)
          {
              if (!IsMouseCaptured) CaptureMouse();
              HitTesting(e.GetPosition(this));
              pathGeometry = GetPathGeometry(e.GetPosition(this));
              InvalidateVisual();
          }
          else
          {
              if (IsMouseCaptured) ReleaseMouseCapture();
          }
      }
  </code></pre>
  
  <p>The diagram <code>Canvas</code> is bound to a view model, and the entities and relationships on the <code>Canvas</code> are in turn bound to respective view models. Some <a href="http://en.wikipedia.org/wiki/Extensible_Application_Markup_Language" rel="nofollow noreferrer">XAML</a> relating to the overall diagram:</p>
  
  <pre><code>&lt;ItemsControl ItemsSource="{Binding Items, Mode=OneWay}"&gt;
      &lt;ItemsControl.ItemsPanel&gt;
          &lt;ItemsPanelTemplate&gt;
              &lt;lib:DesignerCanvas VirtualizingStackPanel.IsVirtualizing="True" VirtualizingStackPanel.VirtualizationMode="Recycling"/&gt;
          &lt;/ItemsPanelTemplate&gt;
      &lt;/ItemsControl.ItemsPanel&gt;
      &lt;ItemsControl.ItemContainerStyle&gt;
          &lt;Style&gt;
              &lt;Setter Property="Canvas.Left" Value="{Binding X}"/&gt;
              &lt;Setter Property="Canvas.Top" Value="{Binding Y}"/&gt;
              &lt;Setter Property="Canvas.Width" Value="{Binding Width}"/&gt;
              &lt;Setter Property="Canvas.Height" Value="{Binding Height}"/&gt;
              &lt;Setter Property="Canvas.ZIndex" Value="{Binding ZIndex}"/&gt;
          &lt;/Style&gt;
      &lt;/ItemsControl.ItemContainerStyle&gt;
  &lt;/ItemsControl&gt;
  </code></pre>
  
  <p>and <code>DataTemplate</code>s for the entites and relationships:</p>
  
  <pre><code>&lt;!-- diagram relationship --&gt;
  &lt;DataTemplate DataType="{x:Type dvm:DiagramRelationshipViewModel}"&gt;
      &lt;lib:Connection /&gt;
  &lt;/DataTemplate&gt;
  &lt;!-- diagram entity --&gt;
  &lt;DataTemplate DataType="{x:Type dvm:DiagramEntityViewModel}"&gt;
      &lt;lib:DesignerItem&gt;
          &lt;lib:EntityDiagramControl /&gt;
      &lt;/lib:DesignerItem&gt;
  &lt;/DataTemplate&gt;
  </code></pre>
  
  <p><strong>Issue:</strong> The issue is that once the drag operation begins, mouse moves are no longer tracked and the connector adorner is unable to draw the arc as it does in other contexts. If I release the mouse and click again, then the arc starts drawing, but then I've lost my source object.  I'm trying to figure a way to pass the source object in conjunction with mouse movement.</p>
  
  <p><strong>Bounty:</strong> Circling back to this issue, I currently plan to not use drag and drop directly to do this. I currently plan to add a DragItem and IsDragging <code>DependencyProperty</code> for the diagram control, which would hold the item being dragged, and flag if a drag operation is occuring. I could then use <code>DataTrigger</code>s to change the <code>Cursor</code> and <code>Adorner</code> visibility based on IsDragging, and could use DragItem for the drop operation.</p>
  
  <p>(But, I'm looking to award a bounty on another interesting approach. Please comment if more information or code is needed to clarify this question.)</p>
  
  <p><strong>Edit:</strong> Lower priority, but I'm still on the lookout for a better solution for a drag and drop diagramming approach.  Want to implement a better approach in the open source <a href="http://moplus.codeplex.com" rel="nofollow noreferrer">Mo+</a> Solution Builder.</p>