We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to Fire Event on SFDiagram Node Selection

Thread ID:





127392 Nov 11,2016 11:19 PM UTC Nov 14,2016 12:38 PM UTC WPF 2
Tags: SfDiagram
John Rewolinski
Asked On November 11, 2016 11:19 PM UTC


So I'm bashing my head against a wall trying to figure out what should be simple.  However the documentation doesn't really give a good answer.

I have an SFDiagram filled with nodes.  I am using MVVM design.

I want to be able to click one of the nodes, and have it do something.

I tried to add an event handler for clicking on the SFDiagram, but it doesn't seem to work:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using Syncfusion;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using Syncfusion.UI.Xaml.Diagram.Layout;
using Syncfusion.UI.Xaml.Diagram;
using System.Collections.ObjectModel;
using Link_Map.Classes;
using Syncfusion.SfSkinManager;
using Syncfusion.Windows.Shared;
using Syncfusion.Windows.Tools.Controls;
using Syncfusion.UI.Xaml.Diagram.Controls;

namespace Link_Map
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : ChromelessWindow
        Controller controller = new Controller();
        DirectedTreeLayout tree = new DirectedTreeLayout();

        public MainWindow()
            Link_Grid.ItemsSource = controller.viewmodel.Links;

        private void InitDiagram()
            lmWindow.Nodes = new ObservableCollection<Node>();
            lmWindow.Connectors = new ObservableCollection<Connector>();
            DataSourceSettings settings = new DataSourceSettings();
            settings.DataSource = controller.viewmodel.Links;
            settings.ParentId = "ParentID";
            settings.Id = "LinkID";
            settings.Root = "0";
            lmWindow.DataSourceSettings = settings;
            settings.DataSource = controller.viewmodel.Links;
            (lmWindow.Info as IGraphInfo).ItemAdded += MainWindow_ItemAdded;


            lmWindow.LayoutManager = new LayoutManager()
                Layout = new RadialTreeLayout()

            (lmWindow.LayoutManager.Layout as RadialTreeLayout).HorizontalSpacing = 10;
            (lmWindow.LayoutManager.Layout as RadialTreeLayout).VerticalSpacing = 35;

            lmWindow.Menu = null;
            lmWindow.Tool = Tool.ZoomPan;

            lmWindow.DefaultConnectorType = ConnectorType.Line;
            lmWindow.PageSettings.PageBorderBrush = new SolidColorBrush(Colors.Transparent);
                         Diagrammy.Constraints = Diagrammy.Constraints &
                                         ~(GraphConstraints.Draggable | GraphConstraints.Selectable);


        private void Metro_Theme_Click(object sender, RoutedEventArgs e)
            SkinStorage.SetVisualStyle(this, "Metro");

        private void Blend_Theme_Click(object sender, RoutedEventArgs e)
            SkinStorage.SetVisualStyle(this, "Blend");

        private void Add_Click(object sender, RoutedEventArgs e)
            for(int i=0; i<100; i++)

        //Apply Node and Connector Style
        private void MainWindow_ItemAdded(object sender, ItemAddedEventArgs args)
            if (args.Item is INode)
                (args.Item as INode).UnitWidth = 10;
                (args.Item as INode).UnitHeight = 10;
                (args.Item as INode).ContentTemplate = this.lmWindow.Resources["contentTemplate"] as DataTemplate;
            else if (args.Item is IConnector)
                SolidColorBrush solid = new SolidColorBrush();
                solid.Color = Color.FromArgb(255, 186, 186, 186);
                (args.Item as IConnector).TargetDecoratorStyle = this.Resources["style"] as Style;

John Rewolinski
Replied On November 12, 2016 03:51 AM UTC

Also, if I could figure out which node I selected?  And what the collections index of the node is?

Keerthivasan Ramamoorthy [Syncfusion]
Replied On November 14, 2016 12:38 PM UTC

 Hi John, 
Thank you for contacting Syncfusion Support. 
Please find the responses to your queries as below. 
I want to be able to click one of the nodes, and have it do something. 
Requirement:” Need to fire an Event When the Node is Selected”. 
We have ItemSelectedEvent support for Diagram which will fire when an item (Node and Connector) is Selected. We have provided a code Example to represent this. Please refer to the code example as below.  
Code Example: 
(diagram.Info as IGraphInfo).ItemSelectedEvent += MainWindow_ItemSelectedEvent; 
private void MainWindow_ItemSelectedEvent(object sender, DiagramEventArgs args) 
   if (args.Item != null && args.Item is INode) 
       INode node = args.Item as INode; 
Here, diagram is instance of SfDiagram. 
Also, if I could figure out which node I selected?   
We have IsSelected Property for Node/Connector which is used to know the Selected item from the Diagram (Nodes and Connector). Please refer the above code example. 
And what the collections index of the node is? 
We have ZIndex Property for Node/Connector which is used to know the Index. Please refer the above code example. 
Keerthivasan R. 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon