Getting Started

This section helps you to get started with Essential Diagram and has the following topics:

Diagram Architecture

The following is a general description about the important classes of Diagram Silverlight. These classes form the base of the control.

Diagram Control

The Diagram control is the base class, which contains the view and the model. It receives
user input and translates it into actions on the model and view. It also implements symbol
palette and scrolling, and enables horizontal and vertical scrollbars when the size of the
view exceeds the size of the window.

Diagram Model

A model represents data for an application and contains the logic for adding, accessing,
and manipulating the data. Nodes and connectors are added to the Diagram Control using the
Model property. A predefined layout can be applied using the LayoutType property of the
DiagramModel, or the position of the nodes can be manually specified.

Diagram View

The view obtains data from the model and presents them to the user. It typically manages the overall layout of the data obtained from the model.
Apart from presenting the data, view also handles navigation between the items, and some aspects of item selection. The views also implements basic user interface features, such as rulers, and drag-and-drop.
A view can be constructed without a model, but a model must be provided before it can display useful information. Views can also render additional visual information that does not exist inside the model such as bounding boxes and grids. These additional view-specific objects are referred to as decorators, because they provide additional visual aids and window dressing to the view; but they are not actually a part of the model.

Diagram Page

The DiagramPage is just a container to hold the objects (nodes and connectors) added
through the model .The DiagramView uses the page to display the diagram objects. As mentioned
before, the view implements several basic user interface features like rulers and grids.
Therefore a page is just a container to hold the graphical objects added through the model and the DiagramView uses it to display the objects.

SymbolPalette:

The Symbol Palette control displays node shapes and allows a user to drag and drop symbols
onto diagrams. It supports grouping and filtering symbols. It allows users to classify items
as groups, so they can be navigated easily. Also, custom shapes can be added to the Symbol
Palette.

SymbolPaletteGroup:

A SymbolPalette group is a collection of SymbolPalette items. It is used to group the items in the SymbolPalette control based on classifications provided. The SymbolPalette group can be added to the SymbolPalette using the SymbolGroups property.

SymbolPaletteFilter:

A Symbol Palette filter can be added to the Symbol Palette control, using the SymbolFilters property, so that only the desired Symbol Palette groups get displayed.

SymbolPaletteItem:

Symbol Palette items are contained in the Symbol Palette group. A Symbol Palette item does not restrict users to the type of content that can be added to it. A Symbol Palette item can be a text box, combo box, image, button, and so on.

Horizontal / Vertical Ruler:

Rulers display the coordinates of elements on the diagram page. At any point, the ruler value always indicates the exact coordinates of the page and its elements.

Diagram Page

Class Diagram

The class diagram for Essential Diagram Silverlight is as follows.

Class Diagram

Creating a Silverlight application

This section illustrates the step-by-step procedure to create a Silverlight application.

1.Open Microsoft Visual Studio.

2.Click New Project on the Start Page.

New Project

3.In the New Project dialog, select Silverlight Application template and name the project

4.Click OK.

New Project dialog box

A new Silverlight application is created.

Creating a Diagram

Essential Diagram Silverlight can be used to create a rich Visio-like application. This framework provides many utility controls to help you easily put an application together. End users can get started in minutes using this diagram control.

The following is a basic step to create DiagramControl and initializing the necessary properties. Details about individual parts are explained later in this documentation.

Creating DiagramControl

The Diagram Control can be added to the application using the following code:

DiagramControl can be created in two ways namely:

Through XAML
Through Code Behind

xaml

<UserControl x:Class="SilverlightApplication1.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  Height="400" Width="600"

xmlns:sfdiagram="clr-namespace:Syncfusion.Windows.Diagram;assembly=Syncfusion.Diagram.Silverlight" xmlns:local="clr-namespace:SilverlightApplication1">

<Grid Name="diagramgrid">

<sfdiagram:DiagramControl></sfdiagram:DiagramControl>

</Grid>

</UserControl>

DiagramControl dc = new DiagramControl();

vbnet

Dim dc As New DiagramControl()

This shows a window with empty diagramcontrol.

1.Enabling Symbol Palette

Now we need to add the Symbol Palette to our newly created Diagram control. The Symbol Palette is displayed by setting the IsSymbolPaletteEnabled property to true. By default, it is set to false. The following code enables the Symbol Palette.

SymbolPalette can be enabled in two ways namely:

Through XAML
Through Code Behind

xaml

<UserControl x:Class="SilverlightApplication1.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  Height="400" Width="600"

xmlns:sfdiagram="clr-namespace:Syncfusion.Windows.Diagram;assembly=Syncfusion.Diagram.Silverlight" xmlns:local="clr-namespace:SilverlightApplication1">

<Grid Name="diagramgrid">

<sfdiagram:DiagramControl IsSymbolPaletteEnabled="True">

</sfdiagram:DiagramControl>

</Grid>

</UserControl>

DiagramControl diagramcontrol = new DiagramControl();

diagramcontrol.IsSymbolPaletteEnabled = true;

vbnet

Dim diagramcontrol As New DiagramControl()

diagramcontrol.IsSymbolPaletteEnabled = True

2.Creating DiagramModel

To add contents into the drawing area, use the Model property of the diagram control. The following code can be used to add the model.

DiagramModel can be created and assigned to DiagramControl’s View Property using two ways:

Through XAML
Through Code Behind

xaml

<UserControl x:Class="SilverlightApplication1.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  Height="400" Width="600"

xmlns:sfdiagram="clr-namespace:Syncfusion.Windows.Diagram;assembly=Syncfusion.Diagram.Silverlight" xmlns:local="clr-namespace:SilverlightApplication1">

    <Grid Name="diagramgrid">

        <sfdiagram:DiagramControl IsSymbolPaletteEnabled="True">

           <sfdiagram:DiagramControl.Model>

                <sfdiagram:DiagramModel></sfdiagram:DiagramModel>

            </sfdiagram:DiagramControl.Model>

        </sfdiagram:DiagramControl>

    </Grid>

</UserControl>

DiagramControl dc = new DiagramControl();

dc.IsSymbolPaletteEnabled = true;

DiagramModel model = new DiagramModel();

dc.Model = model;

diagramgrid.Children.Add(dc);

vbnet

Dim dc As New DiagramControl()

dc.IsSymbolPaletteEnabled = True

Dim model As New DiagramModel()

dc.Model = model

diagramgrid.Children.Add(dc)

3.Creating DiagramView

To display the drawing area, use the View property of the diagram control. The following code can be used to add the view.

DiagramView can be Created and assigned to DiagramControl’s View Property using two ways

Through XAML
Through Code Behind

xaml

<UserControl x:Class="SilverlightApplication1.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  Height="400" Width="600"

xmlns:sfdiagram="clr-namespace:Syncfusion.Windows.Diagram;assembly=Syncfusion.Diagram.Silverlight" xmlns:local="clr-namespace:SilverlightApplication1">

    <Grid Name="diagramgrid">

        <sfdiagram:DiagramControl IsSymbolPaletteEnabled="True">

            <sfdiagram:DiagramControl.Model>

                <sfdiagram:DiagramModel></sfdiagram:DiagramModel>

            </sfdiagram:DiagramControl.Model>



            <sfdiagram:DiagramControl.View>

                <sfdiagram:DiagramView ></sfdiagram:DiagramView>

            </sfdiagram:DiagramControl.View>

        </sfdiagram:DiagramControl>

    </Grid>

</UserControl>

DiagramControl dc = new DiagramControl();

dc.IsSymbolPaletteEnabled = true;

DiagramView view = new DiagramView();

view.Bounds = new System.Drawing.Thickness(0, 0, 1000, 1000);

dc.View = view;

diagramgrid.Children.Add(dc);

vbnet

DiagramControl dc = new DiagramControl();

dc.IsSymbolPaletteEnabled = true;

DiagramView view = new DiagramView();

view.Bounds = new System.Drawing.Thickness(0, 0, 1000, 1000);

dc.View = view;

diagramgrid.Children.Add(dc);

This creates a Diagram Control with the Symbol Palette and the drawing area as illustrated in the following image.

C:/Users/deepav/Pictures/diagramcontrol.jpg

Diagram Control

Creating Diagram control through Designer

The Diagram Control can be added to the application using designer.

The following are the steps to create Diagram Control through Designer.

1.Open the XAML page of the application.

XAML page

2.Select Diagram Control from Toolbox.

Diagram Control

3.Drag the Diagram Control onto the Designer.

Drag the Diagram Control onto the Designer.

4.DiagramControl is added to the Page and also the assembly reference is added to the Project file.

Project file

Kindly refer to Add Diagram Model to the Diagram Control and Add Diagram View to the Diagram Control to add the model and view to the control.

Adding Diagram Model to the Diagram Control

A model represents data for an application and contains the logic for adding, accessing, and manipulating the data.

Features

Nodes and connectors are added to the Diagram Control using the Model property.
A predefined layout is applied using the LayoutType property.
A data template is applied to the layout using the Hierarchical DataTemplate property.

The following code shows how the Model property that can be applied to the Diagram control.

xaml

<UserControl x:Class="SilverlightApplication1.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  Height="420" Width="600"

xmlns:sfdiagram="clr-namespace:Syncfusion.Windows.Diagram;assembly=Syncfusion.Diagram.Silverlight" xmlns:local="clr-namespace:SilverlightApplication1">

    <Grid Name="diagramgrid">

        <sfdiagram:DiagramControl IsSymbolPaletteEnabled="True">

            <sfdiagram:DiagramControl.Model>

                <sfdiagram:DiagramModel x:Name="diagramModel">

                </sfdiagram:DiagramModel>

            </sfdiagram:DiagramControl.Model>

            <sfdiagram:DiagramControl.View>

                <sfdiagram:DiagramView></sfdiagram:DiagramView>

            </sfdiagram:DiagramControl.View>

        </sfdiagram:DiagramControl>

    </Grid>

</UserControl>

DiagramControl dc = new DiagramControl();

dc.IsSymbolPaletteEnabled = true;

DiagramView view = new DiagramView();

view.Bounds = new System.Drawing.Thickness(0, 0, 1000, 1000);

dc.View = view;

DiagramModel diagramModel = new DiagramModel();

dc.Model = diagramModel;

diagramgrid.Children.Add(dc);

vbnet

Dim dc As New DiagramControl()

dc.IsSymbolPaletteEnabled = True

Dim view As New DiagramView()

view.Bounds = New System.Drawing.Thickness(0, 0, 1000, 1000)

dc.View = view

Dim diagramModel As New DiagramModel()

dc.Model = diagramModel

diagramgrid.Children.Add(dc)

This adds a model to the Diagram Control, and defines Bounds Property for DiagramModel.

Adding Diagram View to the Diagram Control

The view obtains items of data from the model and presents them to the user. It typically manages the overall layout of the data obtained from the model.

Apart from presenting the data, view also handles navigation between the items, and some aspects of item selection. The views also implement basic user interface features, such as rulers, and drag and drop.

A view can be constructed without a model, but a model must be provided before it can display useful information. Views can also render additional visual information that does not exist inside the model such as bounding boxes and grids. These additional view-specific objects are referred to as decorators, because they provide additional visual aids and window dressing to the view; but they are not actually a part of the model.

The following code illustrates adding a Diagram View to the Diagram control:

xaml

<UserControl x:Class="SilverlightApplication1.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  Height="400" Width="600"

xmlns:sfdiagram="clr-namespace:Syncfusion.Windows.Diagram;assembly=Syncfusion.Diagram.Silverlight" xmlns:local="clr-namespace:SilverlightApplication1">

    <Grid Name="diagramgrid">

        <sfdiagram:DiagramControl IsSymbolPaletteEnabled="True">

            <sfdiagram:DiagramControl.View>

                <sfdiagram:DiagramView ></sfdiagram:DiagramView>

            </sfdiagram:DiagramControl.View>

        </sfdiagram:DiagramControl>

    </Grid>

</UserControl>

DiagramControl dc = new DiagramControl();

dc.IsSymbolPaletteEnabled = true;

DiagramView view = new DiagramView();

view.Bounds = new System.Drawing.Thickness(0, 0, 1000, 1000);

dc.View = view;

diagramgrid.Children.Add(dc);

vbnet

Dim dc As New DiagramControl()

dc.IsSymbolPaletteEnabled = True

Dim view As New DiagramView()

view.Bounds = New System.Drawing.Thickness(0, 0, 1000, 1000)

dc.View = view

diagramgrid.Children.Add(dc)

Manual Layout

The Essential Diagram Silverlight allows the user to manually specify the layout of the page. The nodes can be positioned at any point on the diagram page. The OffsetX and OffsetY properties can be used to specify the position. Connections can then be made between the nodes using the various line connectors.

The nodes and the connectors need to be added to the Nodes and Connections collection of DiagramModel respectively. This gives a complete control over the placement of nodes on the page and enables the user to create diagrams as suited for their business needs.

The following code snippet shows how the manual layout may be specified.

Node EssentialSL = new Node(Guid.NewGuid(), "EssentialSL");

EssentialSL.Shape = Shapes.Ellipse;

EssentialSL.Width = 125;

EssentialSL.Height = 75;

EssentialSL.OffsetX = 300;

EssentialSL.OffsetY = 300;

EssentialSL.Content = "Essential SL";


Node EssentialTools = new Node(Guid.NewGuid(), "EssentialTools");

EssentialTools.Shape = Shapes.Ellipse;

EssentialTools.Width = 125;

EssentialTools.Height = 75;

EssentialTools.OffsetX = 300;

EssentialTools.OffsetY = 500;

EssentialTools.Content = "Essential Tools";


Node EssentialChart = new Node(Guid.NewGuid(), "EssentialChart");

EssentialChart.Shape = Shapes.Ellipse;

EssentialChart.Width = 125;

EssentialChart.Height = 75;

EssentialChart.OffsetX = 300;

EssentialChart.OffsetY = 100;

EssentialChart.Content = "Essential Chart";


Node EssentialDiagram = new Node(Guid.NewGuid(), "EssentialDiagram");

EssentialDiagram.Shape = Shapes.Ellipse;

EssentialDiagram.Width = 125;

EssentialDiagram.Height = 75;

EssentialDiagram.OffsetX = 100;

EssentialDiagram.OffsetY = 300;

EssentialDiagram.Content = "Essential Diagram";


Node EssentialEdit = new Node(Guid.NewGuid(), "EssentialEdit");

EssentialEdit.Shape = Shapes.Ellipse;

EssentialEdit.Width = 125;

EssentialEdit.Height = 75;

EssentialEdit.OffsetX = 500;

EssentialEdit.OffsetY = 300;

EssentialEdit.Content = "Essential Edit";


// Adding the nodes to the Diagram Model.

diagramModel.Nodes.Add(EssentialSL);

diagramModel.Nodes.Add(EssentialTools);

diagramModel.Nodes.Add(EssentialChart);

diagramModel.Nodes.Add(EssentialDiagram);

diagramModel.Nodes.Add(EssentialEdit);


// Making Connections between the nodes.

LineConnector Connectionone = new LineConnector();

Connectionone.Name = "conn1";

Connectionone.ConnectorType = ConnectorType.Straight;

Connectionone.TailNode = EssentialTools;

Connectionone.HeadNode = EssentialSL;


LineConnector ConnectionTwo = new LineConnector();

ConnectionTwo.Name = "conn2";

ConnectionTwo.ConnectorType = ConnectorType.Straight;

ConnectionTwo.TailNode = EssentialSL;

ConnectionTwo.HeadNode = EssentialChart;


LineConnector ConnectionThree = new LineConnector();

ConnectionThree.Name = "conn3";

ConnectionThree.ConnectorType = ConnectorType.Straight;

ConnectionThree.TailNode = EssentialSL;

ConnectionThree.HeadNode = EssentialDiagram;


LineConnector ConnectionFour = new LineConnector();

ConnectionFour.Name = "conn4";

ConnectionFour.ConnectorType = ConnectorType.Straight;

ConnectionFour.TailNode = EssentialSL;

ConnectionFour.HeadNode = EssentialEdit;


// Adding the connections to the Model.

diagramModel.Connections.Add(Connectionone);

diagramModel.Connections.Add(ConnectionTwo);

diagramModel.Connections.Add(ConnectionThree);

diagramModel.Connections.Add(ConnectionFour);

vbnet

Dim EssentialSL As New Node(Guid.NewGuid(), "EssentialSL")

EssentialSL.Shape = Shapes.Ellipse

EssentialSL.Width = 125

EssentialSL.Height = 75

EssentialSL.OffsetX = 300

EssentialSL.OffsetY = 300

EssentialSL.Content = "Essential SL"


Dim EssentialTools As New Node(Guid.NewGuid(), "EssentialTools")

EssentialTools.Shape = Shapes.Ellipse

EssentialTools.Width = 125

EssentialTools.Height = 75

EssentialTools.OffsetX = 300

EssentialTools.OffsetY = 500

EssentialTools.Content = "Essential Tools"


Dim EssentialChart As New Node(Guid.NewGuid(), "EssentialChart")

EssentialChart.Shape = Shapes.Ellipse

EssentialChart.Width = 125

EssentialChart.Height = 75

EssentialChart.OffsetX = 300

EssentialChart.OffsetY = 100

EssentialChart.Content = "Essential Chart"


Dim EssentialDiagram As New Node(Guid.NewGuid(), "EssentialDiagram")

EssentialDiagram.Shape = Shapes.Ellipse

EssentialDiagram.Width = 125

EssentialDiagram.Height = 75

EssentialDiagram.OffsetX = 100

EssentialDiagram.OffsetY = 300

EssentialDiagram.Content = "Essential Diagram"


Dim EssentialEdit As New Node(Guid.NewGuid(), "EssentialEdit")

EssentialEdit.Shape = Shapes.Ellipse

EssentialEdit.Width = 125

EssentialEdit.Height = 75

EssentialEdit.OffsetX = 500

EssentialEdit.OffsetY = 300

EssentialEdit.Content = "Essential Edit"


'Adding the nodes to the Diagram Model.

diagramModel.Nodes.Add(EssentialSL)

diagramModel.Nodes.Add(EssentialTools)

diagramModel.Nodes.Add(EssentialChart)

diagramModel.Nodes.Add(EssentialDiagram)

diagramModel.Nodes.Add(EssentialEdit)


'Making Connections between the nodes.

Dim Connectionone As New LineConnector()

Connectionone.Name = "conn1"

Connectionone.ConnectorType = ConnectorType.Straight

Connectionone.TailNode = EssentialTools

Connectionone.HeadNode = EssentialSL


Dim ConnectionTwo As New LineConnector()

ConnectionTwo.Name = "conn2"

ConnectionTwo.ConnectorType = ConnectorType.Straight

ConnectionTwo.TailNode = EssentialSL

ConnectionTwo.HeadNode = EssentialChart


Dim ConnectionThree As New LineConnector()

ConnectionThree.Name = "conn3"

ConnectionThree.ConnectorType = ConnectorType.Straight

ConnectionThree.TailNode = EssentialSL

ConnectionThree.HeadNode = EssentialDiagram


Dim ConnectionFour As New LineConnector()

ConnectionFour.Name = "conn4"

ConnectionFour.ConnectorType = ConnectorType.Straight

ConnectionFour.TailNode = EssentialSL

ConnectionFour.HeadNode = EssentialEdit


'Adding the connections to the Model.

diagramModel.Connections.Add(Connectionone)

diagramModel.Connections.Add(ConnectionTwo)

diagramModel.Connections.Add(ConnectionThree)

diagramModel.Connections.Add(ConnectionFour)

Manual Layout

Automatic Layout

Essential Diagram Silverlight allows the user to specify automatic layouts for the nodes. The following layout types are available:

Directed-Tree layout
Hierarchical-Tree layout
Radial-Tree layout and
Table layout

Properties

Property	Description	Type of the property	Value it accepts	Any other dependencies/ sub properties associated
VerticalSpacing	Gets or sets the Vertical spacing between nodes.	CLR Property	Double	No
HorizontalSpacing	Gets or sets the Horizontal spacing between nodes.	CLR Property	Double	No
SpaceBetweenSubTrees	Gets or sets the space between sub trees	CLR Property	Double	No
Orientation	Gets or sets the orientation.	CLR Property	TreeOrientation.LeftRight TreeOrientation.RightLeft TreeOrientation.TopBottom TreeOrientation.BottomTop	No
EnableCycleDetection	Gets or sets a value indicating whether Cycle detection is enabled or not.	DependencyProperty	Booleantrue/ false	No
TableExpandMode	Gets or sets the table expand mode.	DependencyProperty	ExpandMode.Horizontal ExpandMode.Vertical	No
RowCount	Gets or sets the Row Count for the table layout.	DependencyProperty	int	No
ColumnCount	Gets or sets the Column Count for the table layout.	DependencyProperty	int	No
EnableLayoutWithVariedSizes	Gets or sets a value indicating whether to enable the varied size algorithm. In case the Model consists of nodes of different sizes, this property can be set to true. This will align the differently sized nodes with respect to the center.	DependencyProperty	Boolean (true/ false)	No
Bounds	Gets or sets the bounds value which specifies the position of the root node in case of a tree layout.	CLR Property	Thickness	No

Directed-Tree Layout

The Directed-Tree Layout automatically arranges nodes in a tree-like structure. This enables the user to position nodes in a tree-like fashion without specifying the coordinate location for each node. However, it is necessary to specify a layout root for the tree layout. The Directed-Tree layout will position the nodes based on the layout root.

Hierarchical-Tree Layout

The Hierarchical Tree Layout arranges nodes in a tree-like structure, where the nodes in hierarchical layout may have multiple parents. As a result, there is no need to specify the layout root.

Radial-Tree Layout

The Radial-Tree Layout Manager arranges nodes in a circular layout and positions the root-node at the center of the graph and child-nodes in a circular fashion around the root. Sub-trees formed by the branching of the child-node are located radially around the child-node.

Table Layout

Table layout is a layout manager that arranges the nodes in rows and column basis. The number of nodes in each row and column can be specified and the layout will take place accordingly.

Directed Tree Layout

The Directed Tree layout allows the user to arrange the nodes in a tree-like structure. This layout can be applied to any diagram that comprises a directed tree graph with unique root and child nodes. This makes creating diagrams easier because the node position is determined automatically, based on the connections. However, it is necessary to specify a layout root for the tree layout. The Directed-Tree layout will position the nodes based on the layout root.

Orientation

The Layout Manager lets you orient the tree in many directions and create sophisticated arrangements. The Orientation property of the Diagram model can be used to specify the tree orientation.

TopBottom - Places the root node at the top and the child nodes are arranged below the root node.
BottomTop - Places the root node at the bottom and the child nodes are arranged above the root node.
LeftRight - Places the root node at the left and the child nodes are arranged on the right side of the root node.
RightLeft - Places the root node at the right and the child nodes are arranged on the left side of the root node.

The Bounds property of the DiagramView class can be used to specify the position of the root node based on which the entire tree gets generated.

Properties

Property	Description	Type of the property	Value it accepts	Any other dependencies/sub properties associated
VerticalSpacing	Gets or sets the Vertical spacing between nodes.	CLR Property	Double	No
HorizontalSpacing	Gets or sets the Horizontal spacing between nodes.	CLR Property	Double	No
SpaceBetweenSubTrees	Gets or sets the space between sub trees	CLR Property	Double	No
Orientation	Gets or sets the orientation.	CLR Property	TreeOrientation.LeftRight TreeOrientation.RightLeft TreeOrientation.TopBottom TreeOrientation.BottomTop	No
Bounds	Gets or sets the bounds value which specifies the position of the root node in case of tree layout.	CLR Property	Thickness	No

The following code shows how the automatic layout can be generated.

1.The LayoutType should be set to DirectedTreeLayout in DiagramModel class.

xaml

<UserControl x:Class="DirectedTreeLayout_2008.MainPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d"  xmlns:syncfusion="clr-namespace:Syncfusion.Windows.Diagram;assembly=Syncfusion.Diagram.Silverlight">

    <!--Diagram Control-->

    <syncfusion:DiagramControl  Name="diagramControl" Grid.Row="1">

        <!-- Model to add nodes and connections-->

        <syncfusion:DiagramControl.Model>

             <syncfusion:DiagramModel LayoutType="DirectedTreeLayout" Orientation="TopBottom" 

                                        x:Name="diagramModel">

             </syncfusion:DiagramModel>

        </syncfusion:DiagramControl.Model>

        <!--View to display nodes and connections added through model.-->

        <syncfusion:DiagramControl.View>

            <syncfusion:DiagramView IsPageEditable="False" Name="diagramView">

            </syncfusion:DiagramView>

        </syncfusion:DiagramControl.View>

    </syncfusion:DiagramControl>

</UserControl>

2.Then, the nodes are defined and the connections are made.

public void createNodes()

{

    double a = 100;

    double b = 75;

    Node CEO = new Node(Guid.NewGuid(), "CEO");

    CEO.Shape = Shapes.Rectangle;

    CEO.Width = a;

    CEO.Height = b;

    CEO.Content = "CEO";

    diagramModel.LayoutRoot = CEO;


    Node SLS = new Node(Guid.NewGuid(), "ManagerSLS");

    SLS.Shape = Shapes.Rectangle;

    SLS.Width = a;

    SLS.Height = b;

    SLS.Content = "ManagerSLS";

    Node Marketing = new Node(Guid.NewGuid(), "ManagerMarketing");

    Marketing.Shape = Shapes.Rectangle;

    Marketing.Width = a;

    Marketing.Height = b;

    Marketing.Content = "ManagerMarketing";


    Node PM = new Node(Guid.NewGuid(), "PM");

    PM.Shape = Shapes.Rectangle;

    PM.Width = a;

    PM.Height = b;

    PM.Content = "PM";

    Node DEV = new Node(Guid.NewGuid(), "ManagerDEV");

    DEV.Shape = Shapes.Rectangle;

    DEV.Width = a;

    DEV.Height = b;

    DEV.Content = "ManagerDEV";


    Node CSR1 = new Node(Guid.NewGuid(), "CSR1");

    CSR1.Shape = Shapes.Rectangle;

    CSR1.Width = a;

    CSR1.Height = b;

    CSR1.Content = "CSR1";


    Node Engineer1 = new Node(Guid.NewGuid(), "Engineer1");

    Engineer1.Shape = Shapes.Rectangle;

    Engineer1.Width = a;

    Engineer1.Height = b;

    Engineer1.Content = "Engineer1";


    //The layout happens with respect to the layout root.

    diagramModel.LayoutRoot = CEO;


    //Add the nodes to the model.

    diagramModel.Nodes.Add(CEO);

    diagramModel.Nodes.Add(Marketing);

    diagramModel.Nodes.Add(SLS);

    diagramModel.Nodes.Add(DEV);

    diagramModel.Nodes.Add(PM);

    diagramModel.Nodes.Add(CSR1);

    diagramModel.Nodes.Add(Engineer1);


    //Creating the Connections between the nodes.

    Connect(CEO, Marketing, "line1");

    Connect(CEO, SLS, "line2");

    Connect(CEO, DEV, "line3");

    Connect(Marketing, PM, "line4");

    Connect(SLS, CSR1, "line5");

    Connect(DEV, Engineer1, "line6");

    }


    //Creating connection and adding to the model

    void Connect(Node HeadNode, Node TailNode, string name)

    {

    LineConnector connection = new LineConnector();

    connection.Name = name;

    connection.ConnectorType = ConnectorType.Orthogonal;


    // Specify the TailNode node

    connection.TailNode = TailNode;


    //Specifying the Head Node

    connection.HeadNode = HeadNode;


    // connection.TailDecoratorShape = DecoratorShape.Arrow;

    //Adding to the Diagram Model

    diagramModel.Connections.Add(connection);

    }

vbnet

Public Sub createNodes()

    Dim a As Double = 100

    Dim b As Double = 75


    Dim CEO As New Node(Guid.NewGuid(), "CEO")

    CEO.Shape = Shapes.Rectangle

    CEO.Width = a

    CEO.Height = b

    CEO.Content = "CEO"

    diagramModel.LayoutRoot = CEO


    Dim SLS As New Node(Guid.NewGuid(), "ManagerSLS")

    SLS.Shape = Shapes.Rectangle

    SLS.Width = a

    SLS.Height = b

    SLS.Content = "ManagerSLS"


    Dim Marketing As New Node(Guid.NewGuid(), "ManagerMarketing")

    Marketing.Shape = Shapes.Rectangle

    Marketing.Width = a

    Marketing.Height = b

    Marketing.Content = "ManagerMarketing"


    Dim PM As New Node(Guid.NewGuid(), "PM")

    PM.Shape = Shapes.Rectangle

    PM.Width = a

    PM.Height = b

    PM.Content = "PM"


    Dim DEV As New Node(Guid.NewGuid(), "ManagerDEV")

    DEV.Shape = Shapes.Rectangle

    DEV.Width = a

    DEV.Height = b

    DEV.Content = "ManagerDEV"


    Dim CSR1 As New Node(Guid.NewGuid(), "CSR1")

    CSR1.Shape = Shapes.Rectangle

    CSR1.Width = a

    CSR1.Height = b

    CSR1.Content = "CSR1"


    Dim Engineer1 As New Node(Guid.NewGuid(), "Engineer1")

    Engineer1.Shape = Shapes.Rectangle

    Engineer1.Width = a

    Engineer1.Height = b

    Engineer1.Content = "Engineer1"


    'The layout happens with respect to the layout root.

    diagramModel.LayoutRoot = CEO


    'Add the nodes to the model.

    diagramModel.Nodes.Add(CEO)

    diagramModel.Nodes.Add(Marketing)

    diagramModel.Nodes.Add(SLS)

    diagramModel.Nodes.Add(DEV)

    diagramModel.Nodes.Add(PM)

    diagramModel.Nodes.Add(CSR1)

    diagramModel.Nodes.Add(Engineer1)


    'Creating the Connections between the nodes.

    Connect(CEO, Marketing, "line1")

    Connect(CEO, SLS, "line2")

    Connect(CEO, DEV, "line3")

    Connect(Marketing, PM, "line4")

    Connect(SLS, CSR1, "line5")

    Connect(DEV, Engineer1, "line6")

    End Sub


    'Creating connection and adding to the model

    Private Sub Connect(ByVal HeadNode As Node, ByVal TailNode As Node, ByVal name    As String)

    Dim connection As New LineConnector()

    connection.Name = name

    connection.ConnectorType = ConnectorType.Orthogonal


    'Specify the TailNode node

    connection.TailNode = TailNode


    'Specifying the Head Node

    connection.HeadNode = HeadNode


    'connection.TailDecoratorShape = DecoratorShape.Arrow;

    'Adding to the Diagram Model

    diagramModel.Connections.Add(connection)

    End Sub

Directed-Tree Layout

Layout Spacing

Spacing between the nodes with respect to different levels and siblings are adjustable. This will be helpful to adjust the distance between nodes, so that it will meet many business needs. As this is a general topic between all layouts, detailed explanation about this can be found in Layout Spacing under DiagramModel.

Refresh Layout

When there are changes in the content of the page link, new nodes and connectors are added to the layout and has to be refreshed to get the page’s content aligned again to give space for new contents. To refresh the layout please follow the following code snippet:

DirectedTreeLayout tree = new DirectedTreeLayout(diagramModel, diagramView);

tree.RefreshLayout();

vbnet

Dim tree As New DirectedTreeLayout(diagramModel, diagramView)

tree.RefreshLayout()

Here diagramModel and diagramView is an instance of DiagramModel and DiagramView respectively.

Getting Started

Diagram Architecture

Diagram Control

Diagram Model

Diagram View

Diagram Page

SymbolPalette:

SymbolPaletteGroup:

SymbolPaletteFilter:

SymbolPaletteItem:

Horizontal / Vertical Ruler:

Class Diagram

Creating a Silverlight application

Creating a Diagram

Creating DiagramControl

Creating Diagram control through Designer

Adding Diagram Model to the Diagram Control

Features

Adding Diagram View to the Diagram Control

Manual Layout

Automatic Layout

Properties

Directed-Tree Layout

Hierarchical-Tree Layout

Radial-Tree Layout

Table Layout

Directed Tree Layout

Orientation

Properties

Layout Spacing

Refresh Layout

See Also

Hierarchical Tree Layout

Orientation

Properties

Layout Spacing

Cyclic path in Hierarchical-Tree Layout

Refresh Layout

See Also

Radial Tree Layout

Properties

Layout Spacing

Refresh Layout

Table Layout

Properties

Horizontal:

Vertical:

Layout Spacing

Refresh Layout

See Also

BowTie Layout

Properties

Layout Spacing

Refresh Layout