Node in WPF Diagram (SfDiagram)

The nodes are graphical objects used to visually represent the geometrical information, process flow, internal business procedure, or any other kind of data and it represents the functions of a complete system in regards to how it interacts with external entities.

Node Content

Create node

A node can be created and added to the Diagram, either programmatically or interactively. Nodes are stacked on the Diagram area from bottom to top in the order they are added.

Add Node through Nodes collection

To create a node, you have to define the node object and add that to nodes collection of the Diagram.

<!--Resource Dictionary which contains predefined shapes for Node-->
<ResourceDictionary.MergedDictionaries>
   <ResourceDictionary Source="/Syncfusion.SfDiagram.Wpf;component/Resources/BasicShapes.xaml"/>
</ResourceDictionary.MergedDictionaries>

<!--Shape style for Node-->
<Style x:Key="ShapeStyle" TargetType="Path">
  <Setter Property="Fill" Value="#FF5B9BD5"/>
  <Setter Property="Stretch" Value="Fill"/>
  <Setter Property="Stroke" Value="#FFEDF1F6"/>
</Style>

<!--Initialize the Sfdiagram-->
<syncfusion:SfDiagram x:Name="diagram">
  <syncfusion:SfDiagram.Nodes>
    <!--Initialize the NodeCollection-->
    <syncfusion:NodeCollection>
      <!--Initialize the Node-->
      <syncfusion:NodeViewModel ID="Begin" OffsetX="300" OffsetY="60" Shape="{StaticResource Ellipse}" ShapeStyle="{StaticResource ShapeStyle}" 
                                UnitHeight="40" UnitWidth="120"/>      
      </syncfusion:NodeCollection>
  </syncfusion:SfDiagram.Nodes>
</syncfusion:SfDiagram>
//Initialize the SfDiagram
SfDiagram diagram = new SfDiagram();
//Initialize NodeCollection to SfDiagram
diagram.Nodes = new NodeCollection();
//Initialize ConnectorCollection to SfDiagram
diagram.Connectors = new ConnectorCollection();

//Creating the NodeViewModel
NodeViewModel Begin = new NodeViewModel()
{
    ID = "Begin",
    UnitWidth = 120,
    UnitHeight = 40,
    OffsetX = 300,
    OffsetY = 60,
    //Specify shape to the Node from built-in Shape Dictionary
    Shape = this.Resources["Ellipse"],
    //Apply style to Shape
    ShapeStyle = this.Resources["ShapeStyle"] as Style,
};

//Add Node to Nodes property of the Diagram
(diagram.Nodes as NodeCollection).Add(Begin);

Now, node will be as follows.

Add node

Add node from stencil

Nodes can be predefined and added to the stencil and can be dropped into the Diagram when needed. For more information about adding Nodes from Stencil, refer to Stencil.

Create node through data source

Nodes can be generated automatically with the information provided through data source. For more information about data source,

refer to Data Source.

Draw nodes

Nodes can be interactively drawn by clicking and dragging the Diagram surface by using the Drawing Tool. For more information about drawing nodes, refer to Draw Nodes.

Visualize a node

You can use text, image, controls, panels, or any UIElement or template to visualize a node as follows:
1)Content template
2)Content
3)Geometry
4)Custom path
5)Built-in resource

Using content template

Node is a ContentControl, so you can use data template to display the content of the node using the ContentTemplate property. Refer to the following code example to define node’s shape through ContentTemplate.

<DataTemplate x:Key="NodeTemplate">
    <Border BorderThickness="2" BorderBrush="Black">
        <TextBlock Text="NodeTemplate" Width="100" Height="100" Background="White"/>
    </Border>
</DataTemplate>

<!--Initialize the Node-->
<syncfusion:NodeViewModel UnitHeight="100" UnitWidth="100" OffsetX="100" OffsetY="100" ContentTemplate="{StaticResource NodeTemplate}"/>
//Define the Node
NodeViewModel node = new NodeViewModel()
{
    //sets the size
    UnitHeight = 100,
    UnitWidth = 100,
    //sets the position
    OffsetX = 100,
    OffsetY = 100,    
    ContentTemplate = this.Resources["NodeTemplate"] as DataTemplate 
};
//Adding Node to Collection
(diagram.Nodes as NodeCollection).Add(node);

Using content

Node is a ContentControl, so you can set text, image, or any UIElement as node content using the Content property. Refer to the following code example to define image as content of the node.

<!--Initialize the Node-->
      <syncfusion:NodeViewModel UnitHeight="100" UnitWidth="100" OffsetX="100" OffsetY="100">
       <!--Assigning user image as Node's Content-->
       <syncfusion:NodeViewModel.Content>         
            <Image Source="/Image/user_image.png" Height="100" Width="100"/>         
       </syncfusion:NodeViewModel.Content>
      </syncfusion:NodeViewModel>
Image img = new Image();
 BitmapImage bmp = new BitmapImage();
 bmp.BeginInit();
 bmp.UriSource = new Uri("Image/user_image.png", UriKind.Relative);
 bmp.EndInit();
 img.Stretch = Stretch.Fill;
 img.Source = bmp;
 img.Height = 100;
 img.Width = 100;  

//Define the Node
NodeViewModel node = new NodeViewModel()
{
    //sets the size
    UnitHeight = 100,
    UnitWidth = 100,
    //sets the position
    OffsetX = 100,
    OffsetY = 100,
    //set image as content
    Content = img   
};
//Adding Node to Collection
(diagram.Nodes as NodeCollection).Add(node);

Using geometry

The Shape property of node class allows you to visualize any geometry path as node’s content. Refer to the following code example to define geometry for node’s shape.

<Style TargetType="syncfusion:Node">
  <Setter Property="ShapeStyle">
    <Setter.Value>
      <Style TargetType="Path">
         <Setter Property="Fill" Value="#FF5B9BD5"/>
         <Setter Property="Stretch" Value="Fill"/>
         <Setter Property="Stroke" Value="#FFEDF1F6 "/>
      </Style>
    </Setter.Value>
  </Setter>
</Style>

<!--Initialize the Node-->
  <syncfusion:NodeViewModel UnitWidth="100"
                                  UnitHeight="100" 
                                  OffsetX="100" 
                                  OffsetY="100">
              <syncfusion:NodeViewModel.Shape>
                  <RectangleGeometry Rect="100,100,100,100"/>
              </syncfusion:NodeViewModel.Shape>
      </syncfusion:NodeViewModel>
//Define the Node
NodeViewModel node = new NodeViewModel()
{
    //sets the size
    UnitHeight = 100,
    UnitWidth = 100,
    //sets the position
    OffsetX = 100,
    OffsetY = 100,
    Shape = new RectangleGeometry() { Rect = new Rect(100, 100, 100, 100) }
};
//Adding Node to Collection
(diagram.Nodes as NodeCollection).Add(node);

Custom path

Refer to the following code example to define custom path as node’s shape.

<!--Namespace to define String in XAML-->
xmlns:sys="clr-namespace:System;assembly=mscorlib"

<sys:String x:Key="Rectangle">
            M242,1078L231,1078L231,1067L242,1067z
</sys:String>

<!--Initialize the Sfdiagram-->
<syncfusion:SfDiagram x:Name="diagram">
  <syncfusion:SfDiagram.Nodes>
    <!--Initialize the NodeCollection-->
    <syncfusion:NodeCollection>
      <!--Initialize the Node-->
          <syncfusion:NodeViewModel UnitWidth="100" UnitHeight="100" OffsetX="100" OffsetY="100"  Shape="{StaticResource Rectangle}" 
                                    ShapeStyle="{StaticResource ShapeStyle}"/>            
   </syncfusion:NodeCollection>
  </syncfusion:SfDiagram.Nodes>
</syncfusion:SfDiagram>
//Define the Node
NodeViewModel node = new NodeViewModel()
{
    //sets the size
    UnitHeight = 100,
    UnitWidth = 100,
    //sets the position
    OffsetX = 100,
    OffsetY = 100,
    Shape=this.Resources["Rectangle"] as Style,
    //Apply style to Shape
    ShapeStyle = this.Resources["ShapeStyle"] as Style,

};
//Adding Node to Collection
(diagram.Nodes as NodeCollection).Add(node);

Built-in resource

Some basic built-in shapes are provided as ResourceDictionary. For more information, refer to Shapes.

Position

Position of a node is controlled by using its OffsetX and OffsetY properties. By default, these Offset properties represent the distance between origin of the diagram’s page and node’s center point. You may expect this Offset values to represent the distance between page origin and node’s top left corner instead of center. Pivot property helps solve this problem. Default value of node’s pivot point is (0.5, 0.5), that means center of node.

The following table explains how pivot relates Offset values with node boundaries:

Pivot Offset
(0,5, 0.5) OffsetX and OffsetY values are considered as the node’s center point.
(0,0) OffsetX and OffsetY values are considered as the top left corner of node.
(1,1) OffsetX and OffsetY values are considered as the bottom right corner of the node.
<!--Initialize the Node with Pivot-->
   <syncfusion:NodeViewModel UnitHeight="65" UnitWidth="100" OffsetX="100" OffsetY="100" Pivot="0,0" Shape="{StaticResource Rectangle}"/>
//Define the Node
NodeViewModel node = new NodeViewModel()
{
    //sets the size
    UnitHeight = 65,
    UnitWidth = 100,
    //sets the position
    OffsetX = 100,
    OffsetY = 100,
    //sets the Pivot point
    Pivot=new Point(0,0),
    Shape = new RectangleGeometry() { Rect = new Rect(0, 0, 10, 10) },
};
//Adding Node to Collection
(diagram.Nodes as NodeCollection).Add(node);

Node Position

Flip

Diagram provides support to flip the node.Flip is performed to give the mirrored node of the original element.
The flip types are:

  • Flip
    Flip, which involves both vertical and horizontal changes of the element.
  • VerticalFlip
    VerticalFlip, which involves changes in the vertical direction of the element.
  • HorizontalFlip
    HorizontalFlip, which involves changes in the horizontal direction of the element.
<!--Initialize Vertical Flip to the Node-->
  <Syncfusion:NodeViewModel Flip="VerticalFlip" UnitHeight="100" UnitWidth="100" OffsetX="200" OffsetY="100" 
                                              Shape="{StaticResource Triangle}" ShapeStyle="{StaticResource ShapeStyle}"/>
//Define the Node
 NodeViewModel node = new NodeViewModel()
  {
    UnitHeight = 100,
    UnitWidth = 100,        
    OffsetX=200,
    OffsetY=100,
    //Initialize Vertical Flip to the Node
    Flip = Flip.VerticalFlip,
    Shape = this.Resources["Triangle"],
    ShapeStyle = this.Resources["ShapeStyle"] as Style,
  };
            
//Adding Node to Collection
(diagram.Nodes as NodeCollection).Add(node);

Node Flip

Padding

Padding is used to leave space between the connector’s end point and the object to where it is connected. The ConnectorPadding property of node defines the space to be left between the node bounds and its edges.

<Syncfusion:SfDiagram.Nodes>
 <Syncfusion:NodeCollection>
  <!--Initialize connector padding to the Node-->
  <Syncfusion:NodeViewModel ID="node1" ConnectorPadding="5" UnitHeight="65" UnitWidth="100" OffsetX="200" OffsetY="200"                                                  Shape="{StaticResource Rectangle}" ShapeStyle="{StaticResource ShapeStyle}"/>

  <Syncfusion:NodeViewModel ID="node2" UnitHeight="65" UnitWidth="100" OffsetX="400" OffsetY="200" Shape="{StaticResource Rectangle}"                                    ShapeStyle="{StaticResource ShapeStyle}"/>
                 
 </Syncfusion:NodeCollection>
</Syncfusion:SfDiagram.Nodes>
<Syncfusion:SfDiagram.Connectors>
  <Syncfusion:ConnectorCollection>
   <!--Establish connection between the nodes-->
   <Syncfusion:ConnectorViewModel SourceNodeID="node1" TargetNodeID="node2"/>
  </Syncfusion:ConnectorCollection>
</Syncfusion:SfDiagram.Connectors>
//Define NodeProperty
NodeViewModel node1 = AddNode(200,200,65,100);
//Space between Connector and Node
node1.ConnectorPadding = 5;
//Adding Node to Collection
(diagram.Nodes as NodeCollection).Add(node1);
NodeViewModel node2 = AddNode(400,200,65,100);
(diagram.Nodes as NodeCollection).Add(node2);
//Define ConnectorCollection
diagram.Connectors = new ConnectorCollection();
ConnectorViewModel conn1 = new ConnectorViewModel()
{
    SourceNode = node1,
    TargetNode=node2
};
//Adding Connector to Collection
(diagram.Connectors as ConnectorCollection).Add(conn1);

//Method for Creating Node
public NodeViewModel AddNode(double offsetX, double offsetY,double height,double width)
{
    NodeViewModel node = new NodeViewModel();
    node.OffsetX = offsetX;
    node.OffsetY = offsetY;
    node.UnitHeight = height;
    node.UnitWidth = width;
    node.Shape = new RectangleGeometry { Rect = new Rect(0, 0, 10, 10) } ;
    return node;
}

Node Padding

Appearance

You can customize the appearance of a node by changing its ShapeStyle. The following code explains how to customize the appearance of the Shape.

<Style TargetType="Path" x:key="shapestyle">
        <Setter Property="Fill" Value="#FF41719C"/>
        <Setter Property="Stretch" Value="Fill"/>
        <Setter Property="Stroke" Value="#FFEDF1F6"/>
        <Setter Property="StrokeDashArray" Value="4,5"/>
         <Setter Property="StrokeThickness" Value="2"/>
      </Style>
Style style = new Style(typeof(Path));
style.Setters.Add(new Setter(Path.FillProperty, Brushes.SteelBlue));
style.Setters.Add(new Setter(Path.StrokeProperty, Brushes.WhiteSmoke));
style.Setters.Add(new Setter(Path.StrokeThicknessProperty, 2d));
style.Setters.Add(new Setter(Path.StrokeDashArrayProperty, new DoubleCollection() { 5 }));
style.Setters.Add(new Setter(Path.StretchProperty, Stretch.Fill));
return style;

Node appearance

Interaction

Diagram provides support to drag, resize, or rotate the node interactively.

Select

Node can be selected by clicking (tap) it.

  • The IsSelected Property is used to select or unselect the node at runtime.

  • ItemSelectingEvent and ItemSelectedEvent for selecting an element, will notify you the item and its original source. To explore about arguments, refer to DiagramPreviewEventArgs and ItemSelectedEventArgs .

  • ItemUnselectingEvent and ItemUnselectedEvent for unselecting an element, will notify you the item and its original source. To explore about arguments, refer to DiagramPreviewEventArgs and DiagramEventArgs .

Select Node

To explore about selection and selection related events, refer to Selection .

Drag

  • Selected object can be dragged by clicking and dragging it. When multiple elements are selected, dragging any one of the selected elements move every selected element.

  • Instead of dragging original object, preview of the node alone can be dragged. For preview dragging, refer to PreviewSettings.

  • While dragging, the objects are snapped towards the nearest objects to make better alignments. For better alignments, refer to Snapping.

  • NodeChangedEvent will notify the OffsetX and OffsetY changes with their old and new values. Along with that, this event will give information about interaction state. To explore about aruguments, refer to NodeChangedEventArgs .

Drag Node

Resize

  • Selector is surrounded by eight thumbs. When dragging these thumbs, selected items can be resized smaller or larger.
  • When one corner of the selector is dragged, opposite corner is in a static position.
  • Enable AspectRatio NodeConstraints to maintain the aspect ratio of the node while its being resized.
  • While resizing, the objects are snapped towards the nearest objects to make better alignments. For better alignments, refer to Snapping.

  • NodeChangedEvent will notify the UnitHeight and UnitWidth changes with their old and new values. Along with that, this event will give information about interaction state. To explore about arguments, refer to NodeChangedEventArgs .

Resize Node

Rotate

  • A rotate handler is placed above the selector. Clicking and dragging the handler in a circular direction lead to rotate the node.
  • The node is rotated with reference to the static pivot point.
  • Pivot thumb (thumb at the middle of the Node) appears while rotating the node to represent the static point. For more information about pivot, refer to Position.

  • NodeChangedEvent will notify the RotateAngle changes with their old and new values. Along with that, this event will give information about iteraction state. To explore about arguments, refer to the NodeChangedEventArgs .

Rotate Node

Events

  • ItemTappedEvent is invoked on clicking the node. To explore about arguments, refer to ItemTappedEventargs.
  • ItemDoubleTappedEvent is invoked on double-clicking the node. To explore about arguments, refer to ItemDoubleTappedEventargs.
  • MouseDown and MouseUp are invoked as similar to framework element, which is raised together with either MouseLeftButtonUp or MouseRightButtonUp. To explore about arguments, refer to MouseDownEventArgs and
    MouseUpEventArgs.

Constraints

The Constraints property of node allows you to enable or disable certain features. For more information about node constraints, refer to Node Constraints.

See Also