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.

Layout

The following are general spacing properties used in many automatic layouts. Spacing refers to spaces between the nodes that lie at different levels of the tree layout, and the space between each node with their sibling.

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
LayoutVerticalAlignment	Specifies the vertical alignment for layout. Default value is center.	Dependency property	VerticalAlignment.Center VerticalAlignment.Top VerticalAlignment.Bottom VerticalAlignment.Stretch	No
LayoutHorizontalAlignment	Specifies horizontal alignment for layout.	Dependency property	HorizontalAlignment.Center HorizontalAlignment.Left HorizontalAlignment.Right HorizontalAlignment.Stretch	No
LayoutRoot	Gets or sets the layout root.	CLR property	IShape	No

The user can set the horizontal and the vertical distance between the nodes in a tree layout using the HorizontalSpacing and VerticalSpacing properties. The spaces between sub-trees are specified using the SpaceBetweenSubTrees property.

NOTE

In case of Table layout, only the HorizontalSpacing and VerticalSpacing properties should be specified.

The following code illustrates these settings.

xaml

<syncfusion:DiagramControl.Model>

<syncfusion:DiagramModel LayoutType="DirectedTreeLayout" HorizontalSpacing="50" VerticalSpacing="50" SpaceBetweenSubTrees="100"

    x:Name="diagramModel">

</syncfusion:DiagramModel>

</syncfusion:DiagramControl.Model>

DiagramModel diagramModel = new DiagramModel();

diagramModel.VerticalSpacing = 50;

diagramModel.HorizontalSpacing = 50;

diagramModel.SpaceBetweenSubTrees = 100;

vbnet

Dim diagramModel As New DiagramModel()

diagramModel.VerticalSpacing = 50

diagramModel.HorizontalSpacing = 50

diagramModel.SpaceBetweenSubTrees = 100

Tree Orientation

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

Properties

Property	Description	Type of the property	Value it accepts	Any other dependencies/ sub properties associated
Orientation	Gets or sets the orientation.	CLR Property	TreeOrientation.LeftRight TreeOrientation.RightLeft TreeOrientation.TopBottom TreeOrientation.BottomTop	No

The following are the four orientations supported:

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.

The tree orientation can be set using the following code:

xaml

<syncfusion:DiagramControl.Model>

    <syncfusion:DiagramModel LayoutType="DirectedTreeLayout" Orientation="BottomTop" x:Name="diagramModel">

    </syncfusion:DiagramModel>

</syncfusion:DiagramControl.Model>

DiagramModel diagramModel = new DiagramModel();

diagramModel.Orientation = TreeOrientation.BottomTop;

vbnet

Dim diagramModel As New DiagramModel()

diagramModel.Orientation = TreeOrientation.BottomTop

The tree orientation can be changed dynamically at run time using the following code for the corresponding orientation types.

The following code may be specified in a Combobox SelectionChanged event.

DirectedTreeLayout tree = new DirectedTreeLayout(diagramModel, diagramView);

diagramModel.Orientation = TreeOrientation.RightLeft;

tree.PrepareActivity(tree);

tree.StartNodeArrangement();

(diagramView.Page as DiagramPage).InvalidateMeasure();

(diagramView.Page as DiagramPage).InvalidateArrange();

vbnet

Dim tree As New DirectedTreeLayout(diagramModel, DiagramView)

diagramModel.Orientation = TreeOrientation.RightLeft

tree.PrepareActivity(tree)

tree.StartNodeArrangement()

TryCast(diagramView.Page, DiagramPage).InvalidateMeasure()

TryCast(diagramView.Page, DiagramPage).InvalidateArrange()

The orientations are illustrated in the following figure:

BottomTop Orientation

TopBottom Orientation

LeftRight Orientation

RightLeft Orientation

Clearing Nodes and Connections

Essential Diagram Silverlight allows the user to clear the nodes and connections added to the diagram. It can be done by clearing the collections of nodes and connections from DiagramModel.

Properties

Property	Description	Type of the property	Value it accepts	Any other dependencies/ sub properties associated
Connections	Gets the connections.	CLR Property	CollectionExt	No
Nodes	Gets the shapes.	CLR Property	CollectionExt	No

The following lines of code can be used to clear nodes and connections.

DiagramModel diagramModel = new DiagramModel();

diagramModel.Nodes.Clear();

diagramModel.Connections.Clear();

vbnet

Dim diagramModel As New DiagramModel()

diagramModel.Nodes.Clear()

diagramModel.Connections.Clear()

Binding data to Diagram Control

DiagramModel supports binding with business objects. Depending upon the business object and template provided, the nodes will be created and added into the model.

Properties

Property	Description	Type of the property	Value it accepts	Any other dependencies/ sub properties associated
ItemsSource	Gets or sets the source for the list of the items,and the containers about to be represented.	DependencyProperty	IEnumerable	No
HierarchicalDataTemplate	Gets or sets the HierarchicalDataTemplate for items.	DependencyProperty	HierarchicalDataTemplate	No
ItemTemplate	Gets or sets the ItemTemplate for items.	DependencyProperty	DataTemplate	No

HierarchicalDataTemplate and ItemsSource Properties

The ItemsSource property gets the source for the list of nodes to be added to the tree. The ItemTemplate property uses the items specified through the ItemsSource property specified in the data type.

The following code illustrates this.

xaml

<UserControl x:Class="Syncfusion.Diagram.Silverlight.Samples.BusinessObjectDemo"

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

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

    xmlns:syncfusion="clr-namespace:Syncfusion.Windows.Diagram;assembly=Syncfusion.Diagram.Silverlight"

    xmlns:Utils="clr-namespace:Syncfusion.Silverlight.SampleBrowserUtils.Controls;
	
	  assembly=Syncfusion.SampleBrowserUtils.Silverlight"

    xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows" 

    xmlns:local="clr-namespace:Syncfusion.Diagram.Silverlight.Samples" 

    xmlns:shared="clr-namespace:System.Windows;assembly=System.Windows.Controls">



<UserControl.Resources>

    <ResourceDictionary>

        <local:Root x:Key="myList"/>

        <!--Creating a hierarchical data from the XML data for generating a tree view-->

        <shared:HierarchicalDataTemplate x:Key="dataTemplate" ItemsSource="{Binding Path=CountrySales}">

        <shared:HierarchicalDataTemplate.ItemTemplate>

        <shared:HierarchicalDataTemplate ItemsSource="{Binding Path=RegionSales}">

        </shared:HierarchicalDataTemplate>

        </shared:HierarchicalDataTemplate.ItemTemplate>

        </shared:HierarchicalDataTemplate>

    </ResourceDictionary>

</UserControl.Resources>

    <!--Diagram Control-->

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

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

    <syncfusion:DiagramControl.Model>

    <syncfusion:DiagramModel LayoutType="HierarchicalTreeLayout" VerticalSpacing="100" 
		HorizontalSpacing="50" ItemTemplate="{StaticResource dataTemplate}"
        ItemsSource="{StaticResource myList}" x:Name="diagramModel">

    </syncfusion:DiagramModel>

    </syncfusion:DiagramControl.Model>


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

    <syncfusion:DiagramControl.View>

    <syncfusion:DiagramView IsPageEditable="False" Bounds="0,0,1200,100" Name="diagramView">

    </syncfusion:DiagramView>

    </syncfusion:DiagramControl.View>

    </syncfusion:DiagramControl>

</UserControl>

this.Add(new CountrySalesList());

this[0].CountrySales.Add(new CountrySale() { Name = "US", Revenue = 500000, Expense = 100000 });

this[0].CountrySales.Add(new CountrySale() { Name = "Canada", Revenue = 400000, Expense = 43523 });

this[0].CountrySales[0].RegionSales.Add(new RegionSale() { Name = "New York", Revenue = 200000, Expenditure = 2353 });

this[0].CountrySales[0].RegionSales.Add(new RegionSale() { Name = "Los Angeles", Revenue = 300000, Expenditure = 3453 });

this[0].CountrySales[1].RegionSales.Add(new RegionSale() { Name = "Manitoba", Revenue = 200000, Expenditure = 2353 });

this[0].CountrySales[1].RegionSales.Add(new RegionSale() { Name = "Alberta", Revenue = 200000, Expenditure = 3453 });

vbnet

Me.Add(New CountrySalesList())

Me(0).CountrySales.Add(New CountrySale() With {.Name = "US", .Revenue = 500000, .Expense = 100000})

Me(0).CountrySales.Add(New CountrySale() With {.Name = "Canada", .Revenue = 400000, .Expense = 43523})

Me(0).CountrySales(0).RegionSales.Add(New RegionSale() With {.Name = "New York", .Revenue = 200000, .Expenditure = 2353})

Me(0).CountrySales(0).RegionSales.Add(New RegionSale() With {.Name = "Los Angeles", .Revenue = 300000, .Expenditure = 3453})

Me(0).CountrySales(1).RegionSales.Add(New RegionSale() With {.Name = "Manitoba", .Revenue = 200000, .Expenditure = 2353})

Me(0).CountrySales(1).RegionSales.Add(New RegionSale() With {.Name = "Alberta", .Revenue = 200000, .Expenditure = 3453})

This creates a Tree View with CountrySalesList as the root node, CountrySale as the child node and RegionSale as CountrySale’s child.

Data bound to the Diagram Control

Cyclic path in Hierarchical-Tree Layout

The Hierarchical-Tree layout provides support for creating cyclic paths. A cycle is said to exist, if nodes are connected in a chain such that the last node in the chain is connected back to the first node. For example, if there are four nodes namely n1, n2, n3 and n4, such that n1 is connected to n2, n2 is connected to n3, n3 is connected to n4, and n4 is again connected to n1 (n1–>n2–>n3–>n4), then these nodes are said to form a cycle.

Property:

Property	Description	Type of the property	Value it accepts	Any other dependencies/ sub properties associated
EnableCycleDetection	Gets or sets a value indicating whether Cycle detection is enabled or not.	DependencyProperty	Boolean (true/ false)	No

To specify a cyclic path as an input to the Hierarchical-Tree layout, the EnableCycleDetection property must be set to True. Enabling this property checks for cycles and makes connections accordingly.

Property	Description
EnableCycleDetection	Enables the cyclic path to be created in the hierarchical-tree layout. This property is set to True if cyclic paths exist and False otherwise. Default value is False.Dependent property is LayoutType property of DiagramModel which should be set to HierarchicalTreeLayout.

NOTE

The EnableCycleDetection property takes effect only for the Hierarchical-Tree layout type of the Diagram Model.

The following code example describes the setting of the EnableCycleDetection property.

xaml

<syncfusion:DiagramControl.Model>

<syncfusion:DiagramModel x:Name="diagramModel" LayoutType="HierarchicalTreeLayout" EnableCycleDetection="True"

	Orientation="TopBottom" >

</syncfusion:DiagramModel>

</syncfusion:DiagramControl.Model>

DiagramModel diagramModel = new DiagramModel();

diagramModel.Orientation = TreeOrientation.TopBottom;

diagramModel.LayoutType = LayoutType.HierarchicalTreeLayout;

diagramModel.EnableCycleDetection = true;

diagramControl.Model = diagramModel;

vbnet

Dim diagramModel As New DiagramModel()

diagramModel.Orientation = TreeOrientation.TopBottom

diagramModel.LayoutType = LayoutType.HierarchicalTreeLayout

diagramModel.EnableCycleDetection = True

diagramControl.Model = diagramModel

The following screen shot illustrates Cyclic Paths in the Hierarchical-Tree layout.

Cyclic Paths In Hierarchical-Tree Layout

NOTE

If a cyclic path is specified as an input when the EnableCycleDetection property is set to False, then a stack overflow exception is thrown as the loop goes on forever.

Advantages

Cyclic paths are very useful to demonstrate work flows, which involve a repeated process.

Table Expand Mode

The TableExpandMode property is an enumeration which takes two values, Horizontal and Vertical. Default value is Horizontal. It specifies how the table gets expanded when more items are added to the model.

Property:

Property	Description	Type of the property	Value it accepts	Any other dependencies/ sub properties associated
TableExpandMode	Gets or sets the table expand mode.	DependencyProperty	ExpandMode.HorizontalExpandMode.Vertical	No

When TableExpandMode is set to Horizontal, the row count is automatically calculated based on the number of nodes. The ColumnCount must be specified and the nodes will be arranged in the specified number of columns. When the maximum column count is reached, it starts placing the nodes in a new row.
When TableExpandMode is set to Vertical, the column count is automatically calculated based on the number of nodes. The row count must be specified and the nodes will be arranged in the specified number of rows. When the maximum row count is reached, the nodes are placed in a new column.

The TableExpandMode can be set in the following way:

DiagramControl dc = new DiagramControl();

DiagramModel diagramModel = new DiagramModel();

dc.Model = diagramModel;

diagramModel.TableExpandMode=TableExpandMode.Horizontal;

vbnet

Dim dc As New DiagramControl()

Dim diagramModel As New DiagramModel()

dc.Model = diagramModel

diagramModel.TableExpandMode=TableExpandMode.Horizontal

xaml

<syncfusion:DiagramModel

    LayoutType="TableLayout" 

    TableExpandMode="Horizontal" 

    HorizontalSpacing="50" 

    VerticalSpacing="50" 

    RowCount="4" 

    ColumnCount="4"  

    x:Name="diagramModel">

</syncfusion:DiagramModel>

Table layout with TableExpandMode as Horizontal and ColumnCount as 4

Table layout with TableExpandMode as Vertical and RowCount as 4

Row Count and Column Count

RowCount and ColumnCount properties are used to specify the maximum number of rows and columns allowed in the table. Refer TableExpandMode property for more details.

Properties

Property	Description	Type of the property	Value it accepts	Any other dependencies/ sub properties associated
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

The RowCount and ColumnCount can be set in the following way:

DiagramControl dc = new DiagramControl();

DiagramModel diagramModel = new DiagramModel();

dc.Model = diagramModel;

diagramModel.RowCount=6;

diagramModel.ColumnCount=5;

vbnet

Dim dc As New DiagramControl()

Dim diagramModel As New DiagramModel()

dc.Model = diagramModel

diagramModel.RowCount=6

diagramModel.ColumnCount=5

xaml

<syncfusion:DiagramModel

    LayoutType="TableLayout" 

    TableExpandMode="Horizontal" 

    HorizontalSpacing="50" 

    VerticalSpacing="50" 

    RowCount="3" 

    ColumnCount="5"  

    x:Name="diagramModel">

</syncfusion:DiagramModel>

RowCount specified as 3

ColumnCount specified as 5

Enabling Table Layout with Varied Node Sizes

The EnableLayoutWithVariedSizes property , when set to true, center aligns the content of each cell so that all the nodes in that row and column in the table, get aligned with respect to the larger cell size. This property can be set to true, if the nodes are of different sizes (width and height).

Property:

Property	Description	Type of the property	Value it accepts	Any other dependencies/ sub properties associated
EnableLayoutWithVariedSizes	Gets or sets a value indicating whether to enable the varied size algorithm. In case the Model consists of the 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

The EnableLayoutWithVariedSizes can be set in the following way:

DiagramControl dc = new DiagramControl();

DiagramModel diagramModel = new DiagramModel();

dc.Model = diagramModel;

diagramModel.EnableLayoutWithVariedSizes = true;

vbnet

Dim dc As New DiagramControl()

Dim diagramModel As New DiagramModel()

dc.Model = diagramModel

diagramModel.EnableLayoutWithVariedSizes = True

xaml

<syncfusion:DiagramModel

    LayoutType="TableLayout" 

    TableExpandMode="Horizontal" 

    HorizontalSpacing="50" 

    VerticalSpacing="50" 

    RowCount="3" 

    ColumnCount="5"  

    EnableLayoutWithVariedSizes="True"

    x:Name="diagramModel">

</syncfusion:DiagramModel>

EnableLayoutWithVariedSize set to false

EnableLayoutWithVariedSize set to true

Diagram Model

See Also

Layout

Properties

Tree Orientation

Clearing Nodes and Connections

Properties

Binding data to Diagram Control

Properties

HierarchicalDataTemplate and ItemsSource Properties

Cyclic path in Hierarchical-Tree Layout

Property:

Advantages

See Also

Table Expand Mode

Property:

Row Count and Column Count

Properties

Enabling Table Layout with Varied Node Sizes

Property: