This project is read-only.

Selection of vertices and edges within a GraphLayout

Nov 11, 2009 at 3:42 PM
Edited May 28, 2010 at 11:06 AM

Hi, has anybody had a go at making GraphLayout into a MultiSelector, Selector or ItemsControl? This would be an extremely handy thing to do.

If not, how have you handled selection?

Cheers,

Graeme.

Nov 13, 2009 at 4:28 PM

Currently is not possible to natively select vertex/edge on the graph layout. Actually I have used a trick to do this.

In a fast way:

_ implement a bool property on your vertex type (exampe. isSelected)

_ catch the click of one vertexControl and set the isSelected property to true (or false) of the vertex property of your vertexcontrol.

_ to store your selection add the vertex control selected to a collection

_ to show the selection use a trigger (i have marked the selected index by adding a strong black border)

Let me know if this help. Otherwise i will provide more code.

 

BadAng

Mar 9, 2010 at 9:54 AM
Edited Mar 9, 2010 at 9:55 AM
badang wrote:

Currently is not possible to natively select vertex/edge on the graph layout. Actually I have used a trick to do this.

In a fast way:

_ implement a bool property on your vertex type (exampe. isSelected)

_ catch the click of one vertexControl and set the isSelected property to true (or false) of the vertex property of your vertexcontrol.

_ to store your selection add the vertex control selected to a collection

_ to show the selection use a trigger (i have marked the selected index by adding a strong black border)

Let me know if this help. Otherwise i will provide more code.

 

BadAng

Please put this code here or send me to icq/e-mail 663619/ducebod(a)gmail.com. Thanks a lot!

Dmitry

Mar 31, 2010 at 11:03 AM

Hey guys,

Ran into the same problem.

Could you please post the code on the forum that we can use it too. :)

Thanking you.

rootme

 

Apr 29, 2010 at 8:52 AM
Edited Apr 29, 2010 at 8:52 AM
I have successfully made a "area select" that enables you to select multiple vertices at once with a on screen block and then move them around.
May 6, 2013 at 3:32 PM
A code sample would still be nice and helpful. Thx.
Jul 21, 2013 at 9:08 AM
Is there anyone that can post the code sample please?
Jul 21, 2013 at 9:29 AM
Edited May 30, 2014 at 7:36 AM
Let me advice you to look at http://panthernet.ru/en/projects-en/graphx-en
This functions are native supported there and there are sample application which shows how to handle multiple selection.
May 30, 2014 at 7:28 AM
plz provide me the code for area-select. Badly in need off
Feb 18, 2015 at 5:41 AM
Hii..
Is there any way to select multiple vertices/nodes through a mouse drag operation like zooming (using alt+mouse drag to zoom a part) ?

With Regards

AMB
Feb 20, 2015 at 5:38 PM
There is such feature in GraphX, if you want it BADLY in GraphSharp you can look how it is implemented in GraphX and try to implement by yourself.
Look at https://github.com/panthernet/GraphX/blob/PCL/Examples/ShowcaseApp.WPF/Pages/DynamicGraph.xaml.cs
for dg_zoomctrl_AreaSelected() method and look for all underlying logic which includes DragBehaviour and ZoomControl modifications.
Feb 27, 2015 at 5:50 AM
Thank you panthernet. I implemented that feature in Graph Sharp itself.. I used an article on
http://www.c-sharpcorner.com/UploadFile/393ac5/simple-drag-selection-of-items-in-wpf/ to implement it.
Feb 27, 2015 at 6:07 AM
Edited Feb 27, 2015 at 6:08 AM
But a small change in ApplyDragSelectionRect() from article http://www.c-sharpcorner.com/UploadFile/393ac5/simple-drag-selection-of-items-in-wpf/

/// <summary>
    /// Select all nodes that are in the drag selection rectangle.
    /// </summary>
    private void ApplyDragSelectionRect()
    {
        dragSelectionCanvas.Visibility = Visibility.Collapsed;
/*
//selected nodes is an global variable, declared as
// public List<String> selected_nodes = new List<string>();
*/

//to clear if already any nodes were selected
            selected_nodes.Clear();
//to make all nodes background color as black in default
            foreach (PocVertex vertex in graphLayout.Graph.Vertices)
            {
                vertex.Color_val = "Black";

            }

        double x = Canvas.GetLeft(dragSelectionBorder);
        double y = Canvas.GetTop(dragSelectionBorder);

        double width = dragSelectionBorder.Width;
        double height = dragSelectionBorder.Height;
        Rect dragRect = new Rect(x, y, width, height);
// creating an item rectangle for each node,and to check whether any nodes is under the selection rectangle dragrect
        foreach (PocVertex vertex in graphLayout.Graph.Vertices)
        {
            VertexControl vs;
            double vertexX=0;
            double vertexY=0;
            vs = graphLayout.GetVertexControl(vertex);
            Point relativePoint = vs.TransformToAncestor(this).Transform(new Point(0, 0));
            vertexX = relativePoint.X;
            vertexY = relativePoint.Y;
            Rect itemrect = new Rect(vertexX,vertexY, vs.ActualWidth, vs.ActualHeight);
//checking itemrectangle (of node) is inside selection rectangle dragRect or not
            if (dragRect.Contains(itemrect))
            {

                selected_nodes.Add(vertex.ID.ToString());
//changing Background of node this particular node which is inside the selection rectangle dragRect from black to red to identify the selected nodes
                vertex.Color_val = "red";
            } 
        }

//mapping graph again
        this.DataContext = vm;

    }



//the pocvertex.cs file

public class PocVertex:INotifyPropertyChanged
{
    public string ID { get;  set; }
    public string colorval="Black";
    public string Color_val { 
        get{
            return colorval;
                }
        set
        {
            colorval = value;
            NotifyPropertyChanged("Color_val");
        }
    }
#region INotifyPropertyChanged Implementation
    public event PropertyChangedEventHandler PropertyChanged;

    private void NotifyPropertyChanged(string info)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(info));
        }
    }

    #endregion

// Vertex Control modification in xml side

<Style TargetType="{x:Type graphsharp:VertexControl}" x:Name="Vertex_Control" >
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type graphsharp:VertexControl}" x:Name="Vertex_Control_Control_Template">

                        <Border x:Name="Vertex_Border"
                               BorderBrush="White"
                                BorderThickness="2" Background="{Binding Color_val,UpdateSourceTrigger=PropertyChanged}"
                                CornerRadius="10,10,10,10"  
                                Padding="{TemplateBinding Padding}">

                            <StackPanel Orientation="Vertical" x:Name="Vertex_Stack_Panel" >
                            <ContentPresenter Content="{TemplateBinding Vertex}" 
                                       ContentTemplate="{StaticResource demoTemplate}" />

                            </StackPanel>

                    </Border>


                </ControlTemplate>

            </Setter.Value>
        </Setter>


    </Style>