Drag&Drop new Edges

Mar 9, 2012 at 2:39 PM


I would like to add a functionality to my Vertices that allows the user to drag&drop to another Vertices and create thereby a new edge between those two edges. The problem is, that several events like MouseMove, MouseLeftButtonUp or the property MouseEventArgs e.LeftButton won't work as expected if they are placed on a Vertex (by a DataTemplate).

Does anybody know a way to do this?


Mar 12, 2012 at 3:52 PM

I did this by hooking the events within the Template.  As you can see below on the content presenter i have a mouseDown, MouseUp and MouseEnter.

        <Style TargetType="{x:Type Controls:VertexControl}">
            <Setter Property="Template">
                    <ControlTemplate TargetType="{x:Type Controls:VertexControl}">
                        <Border BorderBrush="White" 
							        Padding="{TemplateBinding Padding}">
                            <StackPanel Orientation="Vertical">                               
                                    <ContentPresenter Content="{TemplateBinding Vertex}"
                                            ContentTemplate="{StaticResource demoTemplate}" MouseUp="ContentPresenter_MouseUp" MouseEnter="ContentPresenter_MouseEnter" MouseDown="ContentPresenter_MouseDown"/>                                
                                <DropShadowEffect BlurRadius="2" Color="LightGray" 
                                    Opacity="0.3" Direction="315"/>
With doing the above I was able to use the MouseDown to capture the Vertex im starting with, then the MouseUp to find the last vertex to connect with. I then added it as a new connection via my viewmodel. 
I did however have to put a button on the page to capture when i wanted to do a new connection and add the below piece of code otherwise the mousedown would just keep moving the vertex. 
     //Dont move the item.
                StartDrive= (Drives)((ContentPresenter)e.Source).DataContext;
                _startDriveControl = (VertexControl)((ContentPresenter)e.Source).TemplatedParent;
                _startDriveControl.IsEnabled = false;
Dont forget to activate the vertex again after the connection has finised. 
Hope this helps
Mar 13, 2012 at 1:17 PM

Thanks for your Reply! I haven't tried it yet because I use another approach at the moment. What exactly do you mean by "page"? The vertex that is supposed to get dragged?

Mar 13, 2012 at 2:30 PM

just a button somewhere on the XAML page to ensure you disable the vertex you want to connect with. Otherwise when you click down on the vertex (to start connecting to another) it will automatically start dragging the vertex around with your mouse.  This means the user will need to click a button 'Add Connection' (which sets a flag) then click on the vertex to start the connection.

My mouse down even then checks to see if my 'add connection' button has been clicked and if so disables the vertex and allows for the connection to continue

hope this makes sense

Mar 13, 2012 at 2:36 PM

Thanks, that makes sense for me. I'll try it soon.

Apr 6, 2012 at 10:41 AM

what's demoTemplate?


can u post the code?



Apr 22, 2012 at 10:12 AM

Have you tried to connect to the same vertex a self edge , it's not working how to solve that ?!