Click here to Skip to main content
11,495,049 members (34,482 online)
Click here to Skip to main content

WPF Diagram Designer - Part 3

, 29 Feb 2008 CPOL 400.9K 13.7K 524
Rate this:
Please Sign up or sign in to vote.
Connecting items
WPF FlowChart Designer
  • Part 1 - Features: Drag, resize and rotate items on a canvas
  • Part 2 - Features: Toolbox, drag & drop, rubberband selection

Introduction

There exist different techniques to connect items in a typical diagram designer. One approach is to provide connection elements in a toolbox which the user can drop on the designer canvas and then drag the endpoints to the source and sink items. Another approach is that the items themselves provide connection points from which the user can drag a connection to other items. This second strategy is the one I will explain in this article.

Use Case: How to Connect Items

I'm sure you know how to connect items in a designer application, but still I will illustrate this in some detail to make it easier to identify which class is involved in which activity.

If you move your mouse over a designer item four visual elements of type Connector will appear at each side of the item. This default layout is defined in the ConnectorDecoratorTemplate and is part of the default DesignerItem template. Now move your mouse over one of the connectors and the cursor changes to a cross. WPF Diagram Designer: Connecting items
If you now click the left mouse button and start dragging, the connector will create an adorner of type ConnectorAdorner. This adorner is responsible for drawing the path between the source connector and the current mouse position. While dragging, the adorner continuously does hit-testing against the DesignerCanvas to check if the mouse is over a potential sink connector. WPF Diagram Designer: Connecting items
If you release the mouse button over a Connector element the ConnectorAdorner creates a new Connection instance and adds it to the designer canvas' children. If the mouse button is released elsewhere no Connection instance is created. WPF Diagram Designer: Connecting items
Like the DesignerItem the Connection implements the ISelectable interface. If a Connection instance is selected you will see two rectangles at each end of the connection path. They belong to an adorner of type ConnectionAdorner which automatically shows up when a Connection instance gets selected.
Note: A ConnectorAdorner belongs to a Connector and a ConnectionAdorner belongs to a Connection.
WPF Diagram Designer: Connecting items
Each of the two rectangles represents a Thumb control and they are part of a ConnectionAdorner instance which allows you to modify existing connections. WPF Diagram Designer: Connecting items
E.g. If you drag the sink thumb of the connection to another connector and release it there, you can re-connect the existing connection.
Note: The ConnectorAdorner and the ConnectionAdorner are similar in what they do, but they differ in how they make use of an Adorner class.
WPF Diagram Designer: Connecting items

How is a Connection Glued to an Item?

The default layout of the connectors is defined in the ConnectorDecoratorTemplate, which is part of the DesignerItem's template:

 <ControlTemplate x:Key="ConnectorDecoratorTemplate" TargetType="{x:Type Control}">
   <Grid Margin="-5">
     <s:Connector Orientation="Left" VerticalAlignment="Center"
            HorizontalAlignment="Left"/>
     <s:Connector Orientation="Top" VerticalAlignment="Top"
            HorizontalAlignment="Center"/>
     <s:Connector Orientation="Right" VerticalAlignment="Center"
            HorizontalAlignment="Right"/>
     <s:Connector Orientation="Bottom" VerticalAlignment="Bottom"
            HorizontalAlignment="Center"/>
   </Grid>
 </ControlTemplate>

A Connector class has a Position property which specifies the relative position of the connector's centre point to the designer canvas. Because the Connector class implements the INotifyPropertyChanged interface it can notify clients that a property value has changed. Now when a designer item changes its position or its size the connector's LayoutUpdated event is automatically fired as part of the WPF layout procedure. And this is when the Position property gets updated and itself fires an event to notify clients.

 public class Connector : Control, INotifyPropertyChanged
 {
     private Point position;
     public Point Position
     {
         get { return position; }
         set
         {
             if (position != value)
             {
                 position = value;
                 OnPropertyChanged("Position");
             }
         }
     }

       public Connector()
       {
           // fired when layout changes
           base.LayoutUpdated += new EventHandler(Connector_LayoutUpdated);
       }

       void Connector_LayoutUpdated(object sender, EventArgs e)
       {
           DesignerCanvas designer = GetDesignerCanvas(this);
           if (designer != null)
           {
               //get center position of this Connector relative to the DesignerCanvas
               this.Position = this.TransformToAncestor(designer).Transform
                    (new Point(this.Width / 2, this.Height / 2));
           }
       }

    ...

 }

Now we switch over to the Connection class. The Connection class has a Source and a Sink property, both of type Connector. When the source or sink connector is set we immediately register an event handler that listens to the PropertyChanged event of the connector.

  public class Connection : Control, ISelectable, INotifyPropertyChanged
  {
       private Connector source;
       public Connector Source
       {
           get
           {
               return source;
           }
           set
           {
               if (source != value)
               {
                   if (source != null)
                   {
                       source.PropertyChanged -=
                           new PropertyChangedEventHandler(OnConnectorPositionChanged);
                       source.Connections.Remove(this);
                   }

                   source = value;

                   if (source != null)
                   {
                       source.Connections.Add(this);
                       source.PropertyChanged +=
                           new PropertyChangedEventHandler(OnConnectorPositionChanged);
                   }

                   UpdatePathGeometry();
               }
           }
       }

      void OnConnectorPositionChanged(object sender, PropertyChangedEventArgs e)
      {
          if (e.PropertyName.Equals("Position"))
          {
              UpdatePathGeometry();
          }
      }

     ....

  } 

This snippet shows only the source connector, but the sink connector works analogous. The event handler finally updates the connection path geometry, that's it.

Customize Connectors Layout

The default layout and the number of connectors may not always fit your needs. Take the following example of a triangle shaped Path with a customized DragThumbTemplate (see the previous article on how to customize the DragThumbTemplate).

 <Path IsHitTestVisible="False"
       Fill="Orange"
       Stretch="Fill"
       Data="M 0,10 5,0 10,10 Z">
   <s:DesignerItem.DragThumbTemplate>
      <ControlTemplate>
         <Path Fill="Transparent" Stretch="Fill"
                   Data="M 0,10 5,0 10,10 Z"/>
      </ControlTemplate>
   </s:DesignerItem.DragThumbTemplate>
 </Path>       

WPF Diagram Designer: Custom connectors

The problem here is that the connectors are only visible when the mouse is over the item. If you try to reach the connector on the left or right side you may have some problems. But the solution comes in the form of an attached property named DesignerItem.ConnectorDecoratorTemplate that lets you define custom templates for the connector decorator. The usage is best explained with an example:

 <Path IsHitTestVisible="False"
       Fill="Orange"
       Stretch="Fill"
       Data="M 0,10 5,0 10,10 Z">
   <!--<span class="code-comment"> Custom DragThumb Template --></span>
   <s:DesignerItem.DragThumbTemplate>
      <ControlTemplate>
         <Path Fill="Transparent" Stretch="Fill"
               Data="M 0,10 5,0 10,10 Z"/>
      </ControlTemplate>
   <s:DesignerItem.DragThumbTemplate>
   <!--<span class="code-comment"> Custom ConnectorDecorator Template --></span>
   <s:DesignerItem.ConnectorDecoratorTemplate>
       <ControlTemplate>
          <Grid Margin="0">
             <s:Connector Orientation="Top" HorizontalAlignment="Center"
                    VerticalAlignment="Top" />
             <s:Connector Orientation="Bottom"  HorizontalAlignment="Center"
                    VerticalAlignment="Bottom" />
             <UniformGrid Columns="2">
                <s:Connector Grid.Column="0" Orientation="Left" />
                <s:Connector Grid.Column="1" Orientation="Right"/>
             </UniformGrid>
          </Grid>
       </ControlTemplate>
    </s:DesignerItem.ConnectorDecoratorTemplate>
 </Path> 

WPF Diagram Designer: Custom connectors

This solution provides a better result but it still needs some tricky layout, which may not always be feasible. For this I provide a RelativePositionPanel that allows you to position items relative to the bounds of the panel. The following example positions three buttons on a RelativePositionPanel by setting the RelativePosition property, which is an attached property.

 <c:RelativePositionPanel>
    <Button Content="TopLeft" c:RelativePositionPanel.RelativePosition="0,0"/>
    <Button Content="Center" c:RelativePositionPanel.RelativePosition="0.5,0.5"/>
    <Button Content="BottomRight" c:RelativePositionPanel.RelativePosition="1,1"/>
 </ControlTemplate>

This panel can be quite handy when it comes to arrange connectors:

 <Path IsHitTestVisible="False"
       Fill="Orange"
       Stretch="Fill"
       Data="M 9,2 11,7 17,7 12,10 14,15 9,12 4,15 6,10 1,7 7,7 Z">
   <!--<span class="code-comment"> Custom DragThumb Template --></span>
   <s:DesignerItem.DragThumbTemplate>
      <ControlTemplate>
         <Path Fill="Transparent" Stretch="Fill"
               Data="M 9,2 11,7 17,7 12,10 14,15 9,12 4,15 6,10 1,7 7,7 Z"/>
      </ControlTemplate>
   </s:DesignerItem.DragThumbTemplate>
   <!--<span class="code-comment"> Custom ConnectorDecorator Template --></span>
   <s:DesignerItem.ConnectorDecoratorTemplate>
       <ControlTemplate>
          <c:RelativePositionPanel Margin="-4">
             <s:Connector Orientation="Top"
                c:RelativePositionPanel.RelativePosition="0.5,0"/>
             <s:Connector Orientation="Left"
                c:RelativePositionPanel.RelativePosition="0,0.385"/>
             <s:Connector Orientation="Right"
                c:RelativePositionPanel.RelativePosition="1,0.385"/>
             <s:Connector Orientation="Bottom"
                c:RelativePositionPanel.RelativePosition="0.185,1"/>
             <s:Connector Orientation="Bottom"
                c:RelativePositionPanel.RelativePosition="0.815,1"/>
          </c:RelativePositionPanel>
       </ControlTemplate>
    </s:DesignerItem.ConnectorDecoratorTemplate>
 </Path>  

WPF Diagram Designer: Custom connectors

Outlook

In the next article I will concentrate on commands:

  • Cut, copy, paste
  • Grouping of items
  • Align items
  • Z-ordering (bring to front, send to back,...)

History

  • 24 February, 2008 -- Original version submitted

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

sukram

Austria Austria
No Biography provided

Comments and Discussions

 
AnswerRe: Connections by Code Pin
Decarlos12-Dec-14 3:15
memberDecarlos12-Dec-14 3:15 
GeneralFlow document Pin
krishanth272-Oct-09 23:54
memberkrishanth272-Oct-09 23:54 
QuestionAbout the problem of connector lines Pin
y-tnka10-Sep-09 2:54
membery-tnka10-Sep-09 2:54 
Questionhow to add an image to connector Pin
xird26-Jul-09 3:49
memberxird26-Jul-09 3:49 
QuestionCan I integrate it with Silverlight 3? Pin
KunalChowdhury19-Jul-09 22:14
memberKunalChowdhury19-Jul-09 22:14 
GeneralSaving Object Positions to a file Pin
rougeagle2-Jun-09 14:58
memberrougeagle2-Jun-09 14:58 
GeneralWow! Pin
stano3-Apr-09 17:43
memberstano3-Apr-09 17:43 
Generaldifferent 'DesignerItems' Pin
Member 3418148-Mar-09 6:00
memberMember 3418148-Mar-09 6:00 
GeneralRe: different 'DesignerItems' Pin
WolfMoon18-Mar-09 7:08
memberWolfMoon18-Mar-09 7:08 
QuestionHow can I delete your object from canvas Pin
Chanachon Pruchayahmaytha23-Feb-09 19:06
memberChanachon Pruchayahmaytha23-Feb-09 19:06 
QuestionCreating different ports for different usercontrol Pin
thakursaket27-Jan-09 1:05
memberthakursaket27-Jan-09 1:05 
Generalfor Framework 2.0 Pin
Neo63566110-Jan-09 13:26
memberNeo63566110-Jan-09 13:26 
GeneralRe: for Framework 2.0 Pin
WolfMoon18-Mar-09 7:09
memberWolfMoon18-Mar-09 7:09 
GeneralMake it a free source project Pin
simon.cropp1-Jan-09 18:16
membersimon.cropp1-Jan-09 18:16 
Any change of making this a free source project?
For example
-codeplex
-google code
-source forge

All these site make it much easier to deliver your code to people and get feedback on it.

Regards

Simon
QuestionTwo connections overlapping...how to separe ? Pin
pbisiac27-Dec-08 7:20
memberpbisiac27-Dec-08 7:20 
AnswerRe: Two connections overlapping...how to separe ? Pin
Mitch Belew27-Mar-12 8:05
memberMitch Belew27-Mar-12 8:05 
General[Message Removed] Pin
Katekortez25-Oct-08 10:07
memberKatekortez25-Oct-08 10:07 
GeneralMaking strait line connections Pin
Kevin101022-Oct-08 6:15
memberKevin101022-Oct-08 6:15 
GeneralRe: Making strait line connections Pin
sukram24-Oct-08 6:25
membersukram24-Oct-08 6:25 
GeneralRe: Making strait line connections Pin
Kevin101031-Oct-08 19:42
memberKevin101031-Oct-08 19:42 
GeneralCode optimization Pin
Mertsch31-Jul-08 22:36
memberMertsch31-Jul-08 22:36 
GeneralConnectorDecoratorTemplate at Runtime Pin
yasser_hamed29-Jul-08 7:40
memberyasser_hamed29-Jul-08 7:40 
GeneralRe: ConnectorDecoratorTemplate at Runtime Pin
yasser_hamed30-Jul-08 20:34
memberyasser_hamed30-Jul-08 20:34 
GeneralRe: ConnectorDecoratorTemplate at Runtime Pin
Mouaici Mohamed11-Aug-14 1:45
memberMouaici Mohamed11-Aug-14 1:45 
GeneralConnectorDecoratorTemplate - Add a centered handle Pin
ggealy23-Jun-08 13:09
memberggealy23-Jun-08 13:09 
GeneralRe: ConnectorDecoratorTemplate - Add a centered handle Pin
sukram27-Aug-08 1:11
membersukram27-Aug-08 1:11 
General[Message Deleted] Pin
sarahere5-Jun-08 2:01
membersarahere5-Jun-08 2:01 
GeneralRe: orthogonal connection Pin
sukram27-Aug-08 1:05
membersukram27-Aug-08 1:05 
GeneralThanks a lot! Pin
bxf20022-Jun-08 2:54
memberbxf20022-Jun-08 2:54 
GeneralRe: Thanks a lot! Pin
pawlatko3-Jun-08 3:36
memberpawlatko3-Jun-08 3:36 
Generalconnecting items in silverlight Pin
sarahere15-May-08 3:39
membersarahere15-May-08 3:39 
GeneralRe: connecting items in silverlight Pin
sukram26-May-08 7:19
membersukram26-May-08 7:19 
QuestionConnection between DesignerItem Pin
Boustta8-May-08 9:54
memberBoustta8-May-08 9:54 
AnswerRe: Connection between DesignerItem Pin
sukram15-May-08 0:39
membersukram15-May-08 0:39 
Generalbase.Template == null in DesignerItem load event Pin
moondaddy30-Apr-08 19:44
membermoondaddy30-Apr-08 19:44 
AnswerRe: base.Template == null in DesignerItem load event Pin
moondaddy30-Apr-08 21:11
membermoondaddy30-Apr-08 21:11 
GeneralNeed help with dragging a custom userControl Pin
moondaddy28-Apr-08 21:20
membermoondaddy28-Apr-08 21:20 
GeneralRe: Need help with dragging a custom userControl Pin
moondaddy30-Apr-08 19:45
membermoondaddy30-Apr-08 19:45 
GeneralRe: Need help with dragging a custom userControl Pin
dherv3-Dec-08 5:14
memberdherv3-Dec-08 5:14 
GeneralRe: Need help with dragging a custom userControl Pin
moondaddy3-Dec-08 6:30
membermoondaddy3-Dec-08 6:30 
QuestionRe: Need help with dragging a custom userControl Pin
thakursaket27-Jan-09 0:55
memberthakursaket27-Jan-09 0:55 
AnswerRe: Need help with dragging a custom userControl Pin
Member 229128222-Feb-09 22:09
memberMember 229128222-Feb-09 22:09 
GeneralRe: Need help with dragging a custom userControl Pin
willitblend?23-Feb-09 1:48
memberwillitblend?23-Feb-09 1:48 
GeneralGreat job Pin
otigli20-Apr-08 19:43
memberotigli20-Apr-08 19:43 
GeneralGrouping and Foldering Pin
bilyboy8-Apr-08 0:01
memberbilyboy8-Apr-08 0:01 
GeneralRe: Grouping and Foldering Pin
sukram9-Apr-08 7:27
membersukram9-Apr-08 7:27 
GeneralOpen source expression blend Pin
Leblanc Meneses2-Apr-08 9:27
memberLeblanc Meneses2-Apr-08 9:27 
QuestionWhat about the Web? Pin
Bilal_Issa2-Apr-08 0:11
memberBilal_Issa2-Apr-08 0:11 
AnswerRe: What about the Web? Pin
sukram6-Apr-08 7:34
membersukram6-Apr-08 7:34 
Generalzoom in and zoom out Pin
jenfer1-Apr-08 0:51
memberjenfer1-Apr-08 0:51 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.150520.1 | Last Updated 29 Feb 2008
Article Copyright 2008 by sukram
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid