Diagram View

The Diagram View is responsible for bringing the objects and the data, which are added into the view through the model. In other words, it deals with the visual representation of data. The following code can be used to add the view.

Properties

Property Description Type of the property Value it accepts Any other dependencies/ sub properties associated
Bounds Gets or sets the bounds value which specifies the position of the root node in case of tree layout. CLR Property Thickness No
IsPageEditable Gets or sets a value indicating whether the page is enabled or not.Default value: True Dependency property Boolean(True/False) No
ShowVerticalRulers Gets or sets a value indicating whether vertical rulers are displayed or not.Default value: True Dependency property Boolean(True/False) No
ShowHorizontalRulers Gets or sets a value indicating whether horizontal rulers are displayed or not.Default value: True Dependency property Boolean(True/False) No
PortVisibility Gets or sets a value indicating whether all the ports of all the nodes on the page are visible or not.If individual node’s PortVisibility is set, then the node’s PortVisibility property will take precedence.Default value: Visibility.Visible Dependency property Visibility.Visible
Visibility.Collapsed
Visibility.Hidden		 No
Page Gets or sets the DiagramPage. Dependency property Panel No
GetHorizontalScrollBarVisibility Gets the horizontal scroll bar visibility. CLR property ScrollBarVisibility.Auto
ScrollBarVisibility.Disabled
ScrollBarVisibility.Hidden
ScrollBarVisibility.Visible		 No
GetVerticalScrollBarVisibility Gets the vertical scroll bar visibility. CLR property ScrollBarVisibility.Auto
ScrollBarVisibility.Disabled
ScrollBarVisibility.Hidden
ScrollBarVisibility.Visible		 No
ShowPage Gets or sets a value indicating whether a page can be shown. CLR property Boolean (true/false) No
NudgeIncrement Gets or sets a value for a nudge increment. Dependency property Double No
  • 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>
  • c#
    • DiagramControl dc = new DiagramControl();

dc.IsSymbolPaletteEnabled = true;

DiagramView view = new DiagramView();

view.Bounds = new 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 Thickness(0, 0, 1000, 1000)

dc.View = view

diagramgrid.Children.Add(dc)

    The drawing area has many properties that can be used to customize a view.

    See Also

    Creating Rulers

    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. By default, labels of the major lines in rulers will represent the pixel values using a label.

    The Horizontal and Vertical ruler can be initialized for DiagramView in two ways namely:

    • Through XAML
    • Through Code Behind
  • xaml
    • <syncfusion:DiagramView IsPageEditable="True" Bounds="0,0,12,12" 

Name="diagramView">

<syncfusion:DiagramView.HorizontalRuler>

    <syncfusion:HorizontalRuler Name="horizontalRuler" Background="#FFC6C6C6" 
		LabelFontColor="Green"/>

</syncfusion:DiagramView.HorizontalRuler>

<syncfusion:DiagramView.VerticalRuler>

    <syncfusion:VerticalRuler Name="verticalRuler" Background="#FFC6C6C6" 
		LabelFontColor="Green"/>

</syncfusion:DiagramView.VerticalRuler >

</syncfusion:DiagramView>
  • c#
    • DiagramView diagramView = new DiagramView();

(diagramView.HorizontalRuler as HorizontalRuler).LabelFontColor = Brushes.Green;

(diagramView.VerticalRuler as VerticalRuler).LabelFontColor = Brushes.Green;
  • vbnet
    • Dim diagramView As New DiagramView()

TryCast(diagramView.HorizontalRuler, HorizontalRuler).LabelFontColor = Brushes.Green

TryCast(diagramView.VerticalRuler, VerticalRuler).LabelFontColor = Brushes.Green

    Rulers

    Several customizable options have been provided for the horizontal and vertical rulers. These are common for both the rulers.

    Properties

    Property Description Type of the property Value it accepts Any other dependencies/ sub properties associated
    Background Get or sets the ruler's background color. Dependency property Brush No
    MarkerBrush Gets or sets the MarkerBrush. Dependency property Brush No
    LabelFontColor Gets or sets the LabelFontColor. Dependency property Brush No
    MinorLinesStroke Gets or sets the MinorLinesStroke. Dependency property Brush No
    MajorLinesStroke Gets or sets the MajorLinesStroke. Dependency property Brush No
    MajorLinesThickness Gets or sets the MajorLinesThickness. Dependency property Double No
    MinorLinesThickness Gets or sets the MinorLinesThickness. Dependency property Double No
    MarkerThickness Gets or sets the MarkerThickness. Dependency property Double No

    Ruler Terminology

    The following code shows how the properties that can be set.

  • xaml
    • <syncfusion:DiagramView IsPageEditable="True" Bounds="0,0,12,12" Name="diagramView">

<syncfusion:DiagramView.HorizontalRuler>

    <syncfusion:HorizontalRuler Name="horizontalRuler" Background="#FFC6C6C6" LabelFontColor="Green"/>

</syncfusion:DiagramView.HorizontalRuler>

<syncfusion:DiagramView.VerticalRuler>

    <syncfusion:VerticalRuler Name="verticalRuler" Background="#FFC6C6C6" LabelFontColor="Green"/>

</syncfusion:DiagramView.VerticalRuler >

</syncfusion:DiagramView>
  • c#
    • DiagramView diagramView = new DiagramView();

(diagramView.HorizontalRuler as HorizontalRuler).LabelFontColor = Brushes.Green;

(diagramView.VerticalRuler as VerticalRuler).LabelFontColor = Brushes.Green;
  • vbnet
    • Dim diagramView As New DiagramView()

TryCast(diagramView.HorizontalRuler, HorizontalRuler).LabelFontColor = Brushes.Green

TryCast(diagramView.VerticalRuler, VerticalRuler).LabelFontColor = Brushes.Green

    Custom Ruler

    Specifying Bounds

    The Bounds property of the Diagram View class enables a user to specify the rectangular area where the tree layout is to be displayed. The root of the tree layout is placed at the center of the bounds value.

    Property:

    Property Description Type of the property Value it accepts Any other dependencies/ sub properties associated
    Bounds Gets or sets the bounds value which specifies the position of the root node in case of the tree layout. CLR Property Thickness No

    The following code can be used to set the Bounds property.

    Bounds can be specified 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.View >

    <sfdiagram:DiagramView Bounds="0,0,500,500">

    </sfdiagram:DiagramView>

    </sfdiagram:DiagramControl.View>

    </sfdiagram:DiagramControl>

</Grid>

</UserControl>
  • c#
    • DiagramControl dc = new DiagramControl();

dc.IsSymbolPaletteEnabled = true;

DiagramView view = new DiagramView();

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

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, 500, 500)

dc.View = view

diagramgrid.Children.Add(dc)

    Panning

    Panning support enables you to view diagram elements outside the viewport by clicking and dragging the DiagramPage. You can also disable the panning option.

    Property

    Name Description Type Data Type Reference Link
    IsPanEnabled Specifies whether panning is enabled or disabled. DependencyProperty bool NA

    Enabling Panning support

    To enable panning, set the IsPanEnabled property of DiagramView to true. To disable panning, set this to false. Default value is false.

    Following code illustrates how to enable panning:

  • xaml
    • <syncfusion:DiagramControl  Name="diagramControl" IsSymbolPaletteEnabled="True">

    <syncfusion:DiagramControl.Model>

    <syncfusion:DiagramModel   x:Name="diagramModel">
		</syncfusion:DiagramModel>

    </syncfusion:DiagramControl.Model>

    <syncfusion:DiagramControl.View>

    <syncfusion:DiagramView IsPanEnabled="True"  Name="diagramView"/>

    </syncfusion:DiagramControl.View>

    </syncfusion:DiagramControl>
  • c#
    • DiagramView diagramView = new DiagramView();

    diagramView.IsPanEnabled = true;

    Creating a Page

    The DiagramView has a Page property which refers to the DiagramPage class. The DiagramPage displays the nodes and connections, which are added through the model.

    Property:

    Property Description Type of the property Value it accepts Any other dependencies/ sub properties associated
    Page Gets or sets the DiagramPage. Dependency property DiagramPage No

    The DiagramPage can be created for DiagramView in the following 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 x:Name="diagramModel" >

</sfdiagram:DiagramModel>

</sfdiagram:DiagramControl.Model>

<sfdiagram:DiagramControl.View >

<sfdiagram:DiagramView ShowHorizontalGridLine="True" ShowVerticalGridLine="True">

<syncfusion:DiagramView.Page>

  <syncfusion:DiagramPage x:Name="diagramPage" GridHorizontalOffset="50" 
	GridVerticalOffset="50"/>

</syncfusion:DiagramView.Page>

</sfdiagram:DiagramView>

</sfdiagram:DiagramControl.View>

</sfdiagram:DiagramControl>

</Grid>

</UserControl>
  • c#
    • DiagramControl dc = new DiagramControl();

dc.IsSymbolPaletteEnabled = true;

DiagramView view = new DiagramView();

dc.View = view;

(diagramView.Page as DiagramPage).GridHorizontalOffset = 50;

(diagramView.Page as DiagramPage).GridVerticalOffset = 50;
  • vbnet
    • Dim dc As New DiagramControl()

dc.IsSymbolPaletteEnabled = True

Dim view As New DiagramView()

dc.View = view

TryCast(diagramView.Page, DiagramPage).GridHorizontalOffset = 50

TryCast(diagramView.Page, DiagramPage).GridVerticalOffset = 50

    Page editing option

    The user can disable editing the page by setting the IsPageEditable property to false. Then no operation can be performed on the page or its contents. The default value is true.

    Property:

    Property Description Type of the property Value it accepts Any other dependencies/ sub properties associated
    IsPageEditable Gets or sets a value indicating whether the page is enabled or not.Default value: True Dependency property Boolean(True/False) No

    This property is in DiagramView and can be set in the following ways:

    • Through XAML
    • Through Code Behind
  • xaml
    • <syncfusion:DiagramControl.View>

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

   </syncfusion:DiagramView>

</syncfusion:DiagramControl.View>
  • c#
    • DiagramView diagramView = new DiagramView();

diagramView.IsPageEditable = true;
  • vbnet
    • Dim diagramView As New DiagramView()

diagramView.IsPageEditable = True

    Option to Clear Selection List on Right-Click

    By default the selection list will be cleared when right click on the DiagramPage. This clearing can be customized enable or disabled using the ClearSelectionOnRightClick property.

    Properties

    Property Description Type Data Type
    ClearSelectionOnRightClick This property is used enable/disable the Selectionlist clearing on right click. Dependency Boolean

    Adding ClearSelectionListOnRightClick Property to an Application

    By default, the selection list will be cleared when right-clicking on the diagram page. To disable this behavior, ClearSelectionOnRightClick should be set to false.

  • c#
    • DiagramView diagramView = new DiagramView();

// Disable Clearing Selection list on RightClick.

diagramView.ClearSelectionOnRightClick = false;
  • vbnet
    • Dim diagramView As New DiagramView()

'Disable Clearing Selection list on RightClick.

diagramView.ClearSelectionOnRightClick = False

    PageMargin

    The PageMargin property is used to set the space between the DiagramPage and the DiagramView element.

    Property

    Property Description Type Data Type Reference links
    PageMargin Gets or sets the diagram page margin. Dependency Property   Thickness NA

    Adding PageMargin to an Application

    You can sets the diagram page margin using the PageMargin property of DiagramView. The default value is 0. The following code illustrates how to set page margin:

  • xaml
    • <syncfusion:DiagramControl Name="diagramControl"IsSymbolPaletteEnabled="True">

<syncfusion:DiagramControl.Model>

<syncfusion:DiagramModel x:Name="diagramModel"/>

</syncfusion:DiagramControl.Model>


<syncfusion:DiagramControl.View>

<syncfusion:DiagramView Name="diagramView" PageMargin="10,20,10,20"/>

</syncfusion:DiagramControl.View>

</syncfusion:DiagramControl>
  • c#
    • DiagramView diagramView = new DiagramView();

diagramView.PageMargin = new Thickness(10, 20, 10, 20);
  • vbnet
    • Dim diagramView As New DiagramView()

diagramView.PageMargin = New Thickness(10, 20, 10, 20)

    C:/Users/jananit/AppData/Local/Microsoft/Windows/Temporary Internet Files/Content.Word/PageSettingsDemo.png

    Features Demo

    GridLines

    The GridLines feature enables the proper positioning of nodes to render horizontal and vertical grid lines on the drawing area of DiagramControl.

    GridLines are used as reference lines to position and view the relative distance between the nodes and reference lines during runtime.

    Use Case Scenarios

    Users can use GridLines in the Design evironment to easily position objects with the help of reference lines.

    GridLines

    Showing and Hiding GridLines

    The horizontal and vertical grid lines can be enabled or disabled by using the ShowHorizontalGridLine and ShowVerticalGridLine properties, as shown in the following code snippets. 

  • xaml
    • <UserControl x:Class="Syncfusion.Diagram.Silverlight.Samples.NodeContentsDemo"    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">

    <Grid x:Name="LayoutRoot">

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

    <syncfusion:DiagramControl.Model>

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

    </syncfusion:DiagramModel>

    </syncfusion:DiagramControl.Model>

    <syncfusion:DiagramControl.View>

    <syncfusion:DiagramView  x:Name="diagramView" ShowHorizontalGridLine="True" ShowVerticalGridLine="True">

    </syncfusion:DiagramView>

    </syncfusion:DiagramControl.View>

    </syncfusion:DiagramControl>    

    </Grid>

</UserControl>
  • c#
    • DiagramControl dc = new DiagramControl();

dc.IsSymbolPaletteEnabled = true;

DiagramView view = new DiagramView();

view.ShowHorizontalGridLine = true;

view.ShowVerticalGridLine = true;

view.Bounds = new 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.ShowHorizontalGridLine = True

view.ShowVerticalGridLine = True

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

dc.View = view

diagramgrid.Children.Add(dc)

    GridLines

    Customizing the GridLine Offset

    The vertical and horizontal spacing between the grid lines can be customized by using the GridVerticalOffset and GridHorizontalOffset properties, as shown in the following code snippets. The default value for the GridVerticalOffset and GridHorizontalOffset properties is 25d. 

  • xaml
    • <UserControl x:Class="Syncfusion.Diagram.Silverlight.Samples.NodeContentsDemo"

    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">

    <Grid x:Name="LayoutRoot">

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

    <syncfusion:DiagramControl.Model>

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

    </syncfusion:DiagramModel>

    </syncfusion:DiagramControl.Model>

    <syncfusion:DiagramControl.View>

    <syncfusion:DiagramView  x:Name="diagramView" ShowHorizontalGridLine="True" ShowVerticalGridLine="True">

    <syncfusion:DiagramView.Page>

    <syncfusion:DiagramPage GridHorizontalOffset="100" GridVerticalOffset="100"/>

    </syncfusion:DiagramView.Page>

    </syncfusion:DiagramView>

    </syncfusion:DiagramControl.View>

    </syncfusion:DiagramControl>    

    </Grid>

</UserControl>
  • c#
    • DiagramControl dc = new DiagramControl();

dc.IsSymbolPaletteEnabled = true;

DiagramView view = new DiagramView();

view.ShowHorizontalGridLine = true;

view.ShowVerticalGridLine = true;

(view.Page as DiagramPage).GridHorizontalOffset = 100;

(view.Page as DiagramPage).GridVerticalOffset = 100;

dc.View = view;

diagramgrid.Children.Add(dc);
  • vbnet
    • Dim dc As New DiagramControl()

dc.IsSymbolPaletteEnabled = True

Dim view As New DiagramView()

view.ShowHorizontalGridLine = True

view.ShowVerticalGridLine = True

TryCast(view.Page, DiagramPage).GridHorizontalOffset = 100

TryCast(view.Page, DiagramPage).GridVerticalOffset = 100

dc.View = view

diagramgrid.Children.Add(dc)

    Customized GridLine Offset

    Customizing the GridLineStyle

    The Brush and StrokeThickness of the grid lines can be customized by using DiagramView’s HorizontalGridLineStyle and VerticalGridLineStyle properties, as shown in the following code snippet.

  • c#
    • DiagramView diagramView = new DiagramView();

diagramView.HorizontalGridLineStyle.Brush = new SolidColorBrush(Colors.Black);

diagramView.HorizontalGridLineStyle.StrokeThickness = 1d;
  • vbnet
    • Dim diagramView As New DiagramView()

diagramView.HorizontalGridLineStyle.Brush = New SolidColorBrush(Colors.Black)

diagramView.HorizontalGridLineStyle.StrokeThickness = 1R

    GridLineStyle

    Properties

    The properties of the GridLines feature are described in the following tabulation:

    Property Description Type Data Type Reference links
    ShowVerticalGridLine Gets or sets a value indicating whether the vertical grid lines will be displayed or not. The default value is False. Dependency property Binary, true/false Not applicable
    ShowHorizontalGridLine Gets or sets a value indicating whether the horizontal grid lines will be displayed or not. The default value is False. Dependency property Binary, true/false Not applicable
    GridHorizontalOffset Gets or sets the HorizontalOffset value for the grid. CLR property Double Not applicable
    GridVerticalOffset Gets or sets the VerticalOffset value for the grid. CLR property Double Not applicable
    HorizontalGridLineStyle Gets or sets the GridLineStyle for the horizontal grid lines. Dependency property GridLineStyle Not applicable
    VerticalGridLineStyle Gets or sets the GridLineStyle for the vertical grid lines. Dependency property GridLineStyle Not applicable

    To view a sample:

    Open the Diagram Sample Browser from the dashboard. (Refer to the Samples and Location chapter.)

    Navigate to Product Showcase -> Features Demo.

    Overview

    The Overview control enables you to focus a particular area of the entire content. Overview control displays a preview of the entire content with a ZoomPan window. The ZoomPan window is a resizable red rectangle, which helps you focus the required area.

    For more details about Overview control refer to the user guide of Essential Tools for Silverlight > Tools Silverlight Controls > Overview

    Use Case Scenarios

    This control helps you view huge content hosted within scroll viewer.

    Using Overview Control in DiagramControl

    Follow the below steps to use the Overview control in the DiagramControl:

    1.Create an instance of DiagramControl.

  • xaml
    • <!-- Diagram Control -->

<syncfusion:DiagramControl Name="diagramControl" IsSymbolPaletteEnabled="True">

<syncfusion:DiagramControl.Model>

<syncfusion:DiagramModel x:Name="diagramModel"/>

</syncfusion:DiagramControl.Model>

<syncfusion:DiagramControl.View>

<syncfusion:DiagramView Name="diagramView"/>

</syncfusion:DiagramControl.View>

</syncfusion:DiagramControl>

    2.Create an instance of Overview and set the OverviewSourceAncestor property to DiagramControl.

  • xaml
    • <!-- Overview Control -->

        <shared:Overview Grid.Column="1" OverviewSourceAncestor="{Binding ElementName=diagramView}"/>

    </Grid>

    Overview control showing a preview of DiagramPage

    NOTE

    At present DiagramControl only supports panning and not Zooming through Overview control.

    Bring into Center

    The bring-into-center feature provides the option to bring the element or Rect area into the center of the viewport.

    This can be used to clearly view the particular element and its neighbor elements in the center of the viewport.

    Methods

    Method Description Parameters Type Return Type
    BringIntoCenter To focus on a particular element (node or line connector) by bringing it into center of the view. BringIntoCenter(Object pageElement)This method only acceptsNode, LineConnector,or Rect type objects. SL Void

    Scroll-to-Node

    The scroll-to-node feature provides the option to bring the node into the viewport. This can be used to clearly view the particular node and its neighbor in the viewport.

    Method Description Parameters Return Type Reference links
    ScrollToNode Focuses on a particular node by bringing it into the viewport. ScrollToNode(Node node)This method only accepts the node. Void N/A