Adding BringIntoCenter to an Application

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

//Call the BringIntoCenter method to bring the “node” object into the center of the viewport.

diagramView.BringIntoCenter(node);
  • vbnet
    • Dim diagramView As New DiagramView()

'Call the BringIntoCenter method to bring the “node” object into the center of the viewport.

diagramView.BringIntoCenter(node)

    The BringIntoCenter method of the DiagramView class is used to bring the object into the center of the viewport. This method will accept only parameters of type Node, LineConnector, or Rect.

    Snap to Grid

    The Snap to Grid feature enables dragging nodes and connectors in multiples of offset values, which is specified by using DiagramView’s SnapOffsetX and SnapOffsetY properties. For example, if a node is dragged when SnapOffsetX is set to 25, then the nodes OffsetX value will change in multiples of 25.

    Use Case Scenarios

    Users can snap objects with respect to grid lines in the Design environment by using Snap to Grid instead of smooth dragging.

    Node Before Snapping

    Node After Snapping

    Enabling Snap to Grid

    The Snap to Grid feature for nodes and connectors can be enabled by setting DiagramView’s SnapToHorizontalGrid and SnapToVerticalGrid properties to ”True”, as shown in the following code snippets.

    In the following code snippets, diagramView is an instance of DiagramView.

  • xaml
    • <syncfusion:DiagramView  x:Name="diagramView" SnapToHorizontalGrid="True" SnapToVerticalGrid="True" >

</syncfusion:DiagramView>
  • c#
    • // Enable snap to vertical grid.

diagramView.SnapToVerticalGrid = true;

// Enable snap to horizontal grid.

diagramView.SnapToHorizontalGrid = true;
  • vbnet
    • 'Enable snap to vertical grid.

diagramView.SnapToVerticalGrid = True

'Enable snap to horizontal grid.

diagramView.SnapToHorizontalGrid = True

    Snap to Grid Enabled

    Customizing Snap to Grid Offset Values

    By default, the SnapOffsetX and SnapOffsetY values are set to 25 pixels. However, these values can be changed so that objects will snap to the horizontal grid by using SnapOffsetX and snap to the vertical grid by using SnapOffsetY, as shown in the following code snippets.

    In the following code snippets, diagramView is an instance of DiagramView.

  • xaml
    • <syncfusion:DiagramView  x:Name="diagramView" SnapOffsetX ="50" SnapOffsetY ="50">

</syncfusion:DiagramView>
  • c#
    • diagramView.SnapOffsetX = 50;

diagramView.SnapOffsetY = 50;
  • vbnet
    • diagramView.SnapOffsetX = 50

diagramView.SnapOffsetY = 50

    NOTE

    SnapToGrid will snap objects based on the offset values specified in DiagramView’s SnapOffsetX and SnapOffsetY values and it works independently from grid lines. However, to snap objects along with the grid lines, specify the same offset values for grid lines and snap offset.

    Also, snapping of objects will occur only when the objects are dragged during runtime. Even after snapping is enabled, users can specify their own offset values in code behind.

    Properties

    The properties of the Snap to Grid feature are described in the following tabulation:

    Property Description Type Data Type Reference links
    SnapOffsetX Snaps to the horizontal offset value. Dependency property double Not applicable
    SnapOffsetY Snaps to the vertical offset value. Dependency property double Not applicable
    SnapToHorizontalGrid Enables or disables snap to horizontal grid. Dependency property bool, true/false Not applicable
    SnapToVerticalGrid Enables or disables snap to vertical grid. Dependency property bool, true/false Not applicable

    To view a sample:

    1. Open the Diagram Sample Browser from the dashboard. (Refer to the Samples and Location chapter.)
    2. Navigate to Editable Diagram -> SnapToGrid Demo.

    Measurement Units

    Different fields require different units of measure, and therefore several measurement units are provided such that you can choose the unit that is most comfortable and suitable to use. All basic properties can be defined in the specified measurement unit. It is also possible to dynamically change the units at run-time. The rulers are updated accordingly to represent the coordinates in the currently selected unit.

    Use Case Scenarios

    Measurement units will be usefull when the user wants to access objects in any of the available units.

    Units changed to Inches

    Specification of Units

    The measurement units property can be specified in the following ways:

  • xaml
    • <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" MeasurementUnits="Inch"/>

            </syncfusion:DiagramView.Page>

        </sfdiagram:DiagramView>

    </sfdiagram:DiagramControl.View>

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

dc.IsSymbolPaletteEnabled = true;

DiagramView view = new DiagramView();

(view.Page as DiagramPage).MeasurementUnits = MeasureUnits.Inch;
  • vbnet
    • Dim dc As New DiagramControl()

dc.IsSymbolPaletteEnabled = True

Dim view As New DiagramView()

TryCast(view.Page, DiagramPage).MeasurementUnits = MeasureUnits.Inch

    Once the measurement unit is specified, all the values must be specified with respect to that unit. Forexample, if the unit is set to Inch, then the node’s properties can be set as follows:

  • c#
    • Node n1 = new Node(Guid.NewGuid(), "Node1"); 

n1.IsLabelEditable = true;

n1.Label = "Alarm Rings";

n1.OffsetX = 1.5;

n1.OffsetY = 1.25;

n1.Width = 1.5;

n1.Height = 0.75;

n1.LabelVerticalAlignment = VerticalAlignment.Center;

diagramModel.Nodes.Add(n1);
  • vbnet
    • Dim n1 As New Node(Guid.NewGuid(), "Node1")

n1.IsLabelEditable = True

n1.Label = "Alarm Rings"

n1.OffsetX = 1.5

n1.OffsetY = 1.25

n1.Width = 1.5

n1.Height = 0.75

n1.LabelVerticalAlignment = VerticalAlignment.Center

diagramModel.Nodes.Add(n1)

    You can also dynamically change the units at runtime. The ruler values get changed according to the measurement unit selected. The rulers then indicate the position of the graphical objects with respect to the selected measurement unit.

    Units changed to Inches

    Tables for Properties, Methods, and Events

    Properties

    Property Description Type Data Type Reference links
    MeasurementUnits Gets or sets the measurement unit property. DependencyProperty MeasureUnits.Pixel
    MeasureUnits.Point
    MeasureUnits.Document
    MeasureUnits.Display
    MeasureUnits.SixteenthInch
    MeasureUnits.EighthInch
    MeasureUnits.QuarterInch
    MeasureUnits.HalfInch
    MeasureUnits.Inch
    MeasureUnits.Foot
    MeasureUnits.Yard
    MeasureUnits.Mile
    MeasureUnits.Millimeter
    MeasureUnits.Centimeter
    MeasureUnits.Meter
    MeasureUnits.Kilometer    		 no

    The sample for Measurement Units is hosted in the following location:

    [sample installation location]\Syncfusion\EssentialStudio\Version Number\ \Silverlight\Syncfusion.Diagram.Silverlight.Samples\Samples\General Features\RulerDemo.xaml

    Clipboard Commands

    Clipboard commands are used to perform cut, copy and paste operations.

    Property Description Type Data Type Reference link
    IsCutEnabled Gets or sets a value indicating whether cut command is enabled. Default value is True. Dependency property Boolean NA
    IsCopyEnabled Gets or sets a value indicating whether copy command is enable. Default value is True. Dependency property Boolean NA
    IsPasteEnabled Gets or sets a value indicating whether paste command is enable. Default value is True. Dependency property Boolean NA

    Clipboard commands enable you to cut or copy the selected objects from the page to the clipboard and paste the valid clipboard content to the page. This can be done in two methods:

    • Using Clipboard Commands
    • Using Shortcut Keys

    Using Clipboard Commands

    Cut Command

    Following code illustrates how to cut the selected objects from the page to the Clipboard:

  • xaml
    • <Button Content="Cut" Command="{Binding Cut, ElementName=diagramControl}"/>
  • c#
    • diagramControl.Cut.Execute(diagramControl.View);
  • vbnet
    • diagramControl.Cut.Execute(diagramControl.View)

    Copy Command

    Following code illustrates how to copies the selected objects from the page into the Clipboard:

  • xaml
    • <Button Content="Copy" Command="{Binding Copy, ElementName=diagramControl}"/>
  • c#
    • diagramControl.Copy.Execute(diagramControl.View);
  • vbnet
    • diagramControl.Copy.Execute(diagramControl.View)

    Paste Command

    Following code illustrates how to paste the contents of the valid clipboard into the page:

  • xaml
    • <Button Content="Paste" Command="{Binding Paste, ElementName=diagramControl}"/>
  • c#
    • diagramControl.Paste.Execute(diagramControl.View);
  • vbnet
    • diagramControl.Paste.Execute(diagramControl.View)

    Using Shortcut Keys

     Following are the shortcut keys for clipboard command:

    • Cut – Ctrl + X
    • Copy – Ctrl + C
    • Paste – Ctrl + V

    Disable Clipboard Commands

    Clipboard command can be disabled. The following code illustrates how to disable them:

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

    <syncfusion:DiagramControl  Name="diagramControl">

        <syncfusion:DiagramControl.Model>

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

            </syncfusion:DiagramModel>

        </syncfusion:DiagramControl.Model>

        <!-- Disable Cut, Copy and Past -->

        <syncfusion:DiagramControl.View>

            <syncfusion:DiagramView IsCutEnabled="False" IsCopyEnabled="False" IsPasteEnabled="False" Name="diagramView">

            </syncfusion:DiagramView>

        </syncfusion:DiagramControl.View>

    </syncfusion:DiagramControl>
  • c#
    •       diagramView.IsCutEnabled = false;

      diagramView.IsCopyEnabled = false;

      diagramView.IsPasteEnabled = false;
  • vbnet
    •       diagramView.IsCutEnabled = False

      diagramView.IsCopyEnabled = False

      diagramView.IsPasteEnabled = False

    NOTE

    Dialog box will open to confirm access to Clipboard. Click Yes to access clipboard as long as application is running. Click No to deny access. You can also save your answer.

    Nudge Commands

    Nudge commands allow you to move the selected objects on the page by one pixel.

    Nudge Operation

    Nudge operation can be performed in two ways namely:

    • Using Nudge Commands

    • Using Arrow Keys

    NudgeUp

    NudgeUp moves the selected object to the top by one pixel. This command can be executed in XAML and code behind. In the following code snippet diagramControl is an instance of DiagramControl, and the XAML code snippet shows a button bound to the MoveUp command.

  • xaml
    • <Button Content="MoveUp" Command="{Binding MoveUp, ElementName=diagramControl}"/>
  • c#
    • diagramControl.NudgeUp.Execute(diagramControl.View);
  • vbnet
    • diagramControl.NudgeUp.Execute(diagramControl.View)

    NudgeDown

    Moves the selected object to the bottom by one pixel. This command can be executed in XAML and code behind. In the following code snippet, diagramControl is an instance of DiagramControl, and the XAML code snippet shows a button bound to the MoveDown command.

  • xaml
    • <Button Content="MoveDown" Command="{Binding MoveDown, ElementName=diagramControl}"/>
  • c#
    • diagramControl.NudgeDown.Execute(diagramControl.View);
  • vbnet
    • diagramControl.NudgeDown.Execute(diagramControl.View)

    NudgeLeft

    NudgeLeft Moves the selected object to the left by one pixel. This command can be executed in XAML and code behind. In the following code snippet, diagramControl is an instance of DiagramControl, and the XAML code snippet shows a button bound to the MoveLeft command.

  • xaml
    • <Button Content="MoveLeft" Command="{Binding MoveLeft, ElementName=diagramControl}"/>
  • c#
    • diagramControl.NudgeLeft.Execute(diagramControl.View);
  • vbnet
    • diagramControl.NudgeLeft.Execute(diagramControl.View)

    NudgeRight

    Moves the selected object to the right by one pixel. This command can be executed in XAML and code behind. In the following code snippet, diagramControl is an instance of DiagramControl, and the XAML code snippet shows a button bound to the MoveRight command.

  • xaml
    • <Button Content="MoveRight" Command="{Binding MoveRight, ElementName=diagramControl}"/>
  • c#
    • diagramControl.NudgeRight.Execute(diagramControl.View);
  • vbnet
    • diagramControl.NudgeRight.Execute(diagramControl.View)

    Nudge by using Arrow Keys

    The corresponding arrow keys can be used to move the selected objects to the top, bottom, left or right.

    Nudge by using Arrow Keys

    Nudge commands are very useful for accurate placement of objects on pages as they allow you to move by one pixel each time.

    To view the samples:

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

    Navigate to Product Showcase -> Feature Demo.

    Z-order Commands

    The ordering commands allow you to change the z-order (order of objects along the Z-axis) value (of the selected objects (nodes and connectors) on the page. The objects can be made to go back or front so that they get displayed over other objects in case two or more objects overlap.

    Z-Order Operation

    There are four Z-Order commands, namely:

    • BringToFront

    • SendToBack

    • MoveForward

    • SendBackward

    BringToFront

    Moves the selected object over other objects by increasing the z-order value to a maximum. This command can be executed in XAML and code behind. In the following code snippet, diagramControl is an instance of DiagramControl, and the XAML code snippet shows a button bound to the BringToFront command.

  • xaml
    • <Button Content="BringToFront" Command="{Binding BringToFront, ElementName=diagramControl}"/>
  • c#
    • diagramControl.BringToFront.Execute(diagramControl.View);
  • vbnet
    • diagramControl.BringToFront.Execute(diagramControl.View)

    Bring To Front

    SendToBack

    SendToBack moves the selected object behind all other objects by setting the z-order value to 0. This command can be executed in XAML and code behind. In the following code snippet, diagramControl is an instance of DiagramControl, and the XAML code snippet shows a button bound to the SendToBack command.

  • xaml
    • <Button Content="SendToBack" Command="{Binding SendToBack, ElementName=diagramControl}"/>
  • c#
    • diagramControl.SendToBack.Execute(diagramControl.View);
  • vbnet
    • diagramControl.SendToBack.Execute(diagramControl.View)

    Send To Back

    MoveForward

    MoveForwrd increases the z-order value of the selected object by one. This command can be executed in XAML and code behind. In the following code snippet, diagramControl is an instance of DiagramControl, and the XAML code snippet shows a button bound to the MoveForward command.

  • xaml
    • <Button Content="BringForward" Command="{Binding BringForward, ElementName=diagramControl}"/>
  • c#
    • diagramControl.MoveForward.Execute(diagramControl.View);
  • vbnet
    • diagramControl.MoveForward.Execute(diagramControl.View)

    Move Forward

    SendBackward

    SendBackward decreases the z-order value of the selected object by one. This command can be executed in XAML and code behind. In the following code snippet, diagramControl is an instance of DiagramControl, and the XAML code snippet shows a button bound to the SendBackward command.

  • xaml
    • <Button Content="SendBackward" Command="{Binding SendBackward, ElementName=diagramControl}"/>
  • c#
    • diagramControl.SendBackward.Execute(diagramControl.View);
  • vbnet
    • diagramControl.SendBackward.Execute(diagramControl.View)

    Send Backward

    To view the samples:

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

    Navigate to Product Showcase -> Feature Demo.

    Alignment Commands

    Alignment commands enable you to align selected objects (nodes and connectors) on a page with respect to a reference object. The first object in the selection is considered as the reference object.

    Perform Alignment Operation

    The following alignment commands are used to align objects:

    Left Alignment

    The AlignLeft command aligns all selected objects along the left corner of the reference object. This command can be executed in XAML and code behind. In the following code snippet, diagramControl is an instance of DiagramControl, and the XAML code snippet shows a button bound to the AlignLeft command.

  • xaml
    • <Button Content="AlignLeft" Command="{Binding AlignLeft, ElementName=diagramControl}"/>
  • c#
    • diagramControl.AlignLeft.Execute(diagramControl.View);
  • vbnet
    • diagramControl.AlignLeft.Execute(diagramControl.View)

    The following screen shot illustrates the allignment of the last two nodes to the left with respect to the first node.

    AlignLeft command applied to Diagram Objects

    Center Alignment (Horizontal Axis)

    The AlignCenter command aligns all the selected objects to the center. This command center-aligns selected objects with respect to the horizontal axis, i.e., by changing the x-coordinate of the object. This command can be executed in XAML and code behind. In the following code snippet, diagramControl is an instance of DiagramControl, and the XAML code snippet shows a button bound to the AlignCenter command.

  • xaml
    • <Button Content="AlignCenter" Command="{Binding AlignCenter, ElementName=diagramControl}"/>
  • c#
    • diagramControl.AlignCenter.Execute(diagramControl.View);
  • vbnet
    • diagramControl.AlignCenter.Execute(diagramControl.View)

    The following screen shot illustrates the allignment of the last two nodes to the center with respect to the horizontal axis of the first node.

    AlignCenter command applied to Diagram Objects

    Right Alignment

    The AlignRight command aligns all selected objects along the right corner of the reference object. This command can be executed in XAML and code behind. In the following code snippet, diagramControl is an instance of DiagramControl, and the XAML code snippet shows a button bound to the AlignRight command.

  • xaml
    • <Button Content="AlignRight" Command="{Binding AlignRight, ElementName=diagramControl}"/>
  • c#
    • diagramControl.AlignRight.Execute(diagramControl.View);
  • vbnet
    • diagramControl.AlignRight.Execute(diagramControl.View)

    The following screen shot illustrates the allignment of the last two nodes to the right with respect to the first node.

    AlignRight command applied to Diagram Objects

    Top Alignment

    The AlignTop command aligns all the selected objects on the top of the reference object. This command can be executed in XAML and code behind. In the following code snippet, diagramControl is an instance of DiagramControl, and the XAML code snippet shows a button bound to the AlignTop command.

  • xaml
    • <Button Content="AlignTop" Command="{Binding AlignTop, ElementName= diagramControl}"/>
  • c#
    • diagramControl.AlignTop.Execute(diagramView.Page, diagramView);
  • vbnet
    • diagramControl.AlignTop.Execute(diagramView.Page, diagramView)

    The following screen shot illustrates the allignment of the last two nodes to the top with respect to the first node.

    AlignTop command applied to Diagram Objects

    Center Alignment (Vertical Axis)

    The AlignMiddle command aligns all the selected objects at the center. This command center-aligns selected objects with respect to the vertical axis, i.e., by changing the y-coordinate of the object. This command can be executed in XAML and code behind. In the following code snippet, diagramControl is an instance of DiagramControl, and the XAML code snippet shows a button bound to the AlignMiddle command.

  • xaml
    • <Button Content="AlignMiddle" Command="{Binding AlignMiddle, ElementName= diagramControl}"/>
  • c#
    • diagramControl.AlignMiddle.Execute(diagramControl.View);
  • vbnet
    • diagramControl.AlignMiddle.Execute(diagramControl.View)

    The following screen shot illustrates the allignment of the last two nodes to the center with respect to the vertical axis of the first node.

    AlignMiddle command applied to Diagram Objects

    Bottom Alignment

    The AlignBottom command aligns all the selected objects along the bottom of the reference object. This command can be executed in XAML and code behind. In the following code snippet, diagramControl is an instance of DiagramControl, and the XAML code snippet shows a button bound to the AlignBottom command.

  • xaml
    • <Button Content="AlignBottom" Command="{Binding AlignBottom, ElementName= diagramControl}"/>
  • c#
    • diagramControl.AlignBottom.Execute(diagramControl.View);
  • vbnet
    • diagramControl.AlignBottom.Execute(diagramControl.View)

    The following screen shot illustrates the allignment of the last two nodes to the bottom with respect to the first node.

    AlignBottom command applied to Diagram Objects

    NOTE

    The connector gets aligned only when the head node and the tail node of the connector is null.

    Alignment commands are useful for ordering the layout of the objects on a page and provides a professional appearance to the diagram.

    To view the samples:

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

    Navigate to Product Showcase -> Feature Demo.

    Spacing Commands

    Spacing commands enable you to place selected objects (nodes and connectors) on the page at equal intervals from each other. The objects are spaced within the boundaries of the first and last objects in the selection object.

    Spacing Operation

    The following spacing commands are used to space objects:

    Horizontal Spacing

    The SpaceAcross command spaces selected objects with equal horizontal distance between them. This command can be executed in XAML and code behind. In the following code snippet, diagramControl is an instance of DiagramControl, and the XAML code snippet shows a button bound to the SpaceAcross command.

  • xaml
    • <Button Content="SpaceAcross" Command="{Binding SpaceAcross, ElementName= diagramControl}"/>
  • c#
    • diagramControl.SpaceAcross.Execute(diagramControl.View);
  • vbnet
    • diagramControl.SpaceAcross.Execute(diagramControl.View)

    The following screen shot illustrates horizontally spaced objects:

    SpaceAcross command applied to Diagram Objects

    Vertical Spacing

    The SpaceDown command spaces selected objects with equal vertical distance between them. This command can be executed in XAML and code behind. In the following code snippet, diagramControl is an instance of DiagramControl, and the XAMl code snippet shows a button bound to the AlignDown command.

  • xaml
    • <Button Content="AlignDown" Command="{Binding AlignDown, ElementName= diagramControl}"/>
  • c#
    • diagramControl.SpaceDown.Execute(diagramControl.View);
  • vbnet
    • diagramControl.SpaceDown.Execute(diagramControl.View)

    The following screen shot illustrates vertically spaced objects:

    SpaceDown command applied to Diagram Objects

    NOTE

    The connector gets spaced only when the head node and the tail node of the connector is null.

    To view the samples:

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

    Navigate to Product Showcase -> Feature Demo.

    Sizing Commands

    Sizing commands enable you to resize selected objects (nodes and connectors) on the page. The selected objects get resized with respect to the first object in the selection list.

    Sizing Operation

    The following sizing commands are used to resize objects.

    Height Customization

    The SameHeight command resizes selected objects to the height of the first object in the selection list. This command can be executed in XAML and code behind. In the following code snippet, diagramControl is an instance of DiagramControl, and the Xaml code snippet shows a button bound to the SameHeight command.

  • xaml
    • <Button Content="SameHeight" Command="{Binding SameHeight, ElementName=diagramControl}"/>
  • c#
    • diagramControl.SameHeight.Execute(diagramControl.View);
  • vbnet
    • diagramControl.SameHeight.Execute(diagramControl.View)

    SameHeight command applied to Diagram Objects

    NOTE

    The width of the selected object remains the same.

    Width Customization

    The SameWidth command resizes selected objects to the width of the first object in the selection list. This command can be executed in XAML and code behind. In the following code snippet, diagramControl is an instance of DiagramControl, and the XAML code snippet shows a button bound to the SameWidth command.

  • xaml
    • <Button Content="SameWidth" Command="{Binding SameWidth, ElementName= diagramControl}"/>
  • c#
    • diagramControl.SameWidth.Execute(diagramContro.View);
  • vbnet
    • diagramControl.SameWidth.Execute(diagramContro.View)

    SameWidth command applied to Diagram Objects

    NOTE

    The height of the selected object remains the same.

    Height and Width Customization

    The SameSize command resizes selected objects to the height and width of the first object in the selection list. This command can be executed in XAML and code behind. In the following code snippet, diagramControl is an instance of DiagramControl, and the XAML code snippet shows a button bound to the SameSize command.

  • xaml
    • <Button Content="SameSize" Command="{Binding SameSize, ElementName= diagramControl}"/>
  • c#
    • diagramControl.SameSize.Execute(diagramControl.View);
  • vbnet
    • diagramControl.SameSize.Execute(diagramControl.View)

    SameSize command applied to Diagram Objects

    NOTE

    The connector gets spaced only when the head node and the tail node of the connector is null.

    To view the samples:

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

    Navigate to Product Showcase -> Feature Demo.

    Undo and Redo Commands

    TheUndo command reverses the last action performed. For example, some of the basic operations such as translation, rotation, resizing, grouping, ungrouping, changing z-order, addition, deletionand so on , that are performed on diagram objects (Nodes and Line Connectors) can be reversed. The Redo command undoes the last Undo action. Alternatively, these commands can be executed using the keyboard shortcuts; Ctrl +Z for Undo command and Ctrl+Y for Redo command.

    Enabling Undo and Redo Operations

    The Undo command can be specified in the following way. This command can be executed in XAML and code behind. In the following code snippet, diagramControl is an instance of DiagramControl, and the XAML code snippet shows a button bound to the Undo command.

  • xaml
    • <Button Content="Undo" Command="{Binding Undo, ElementName= diagramControl}"/>
  • c#
    • diagramControl.Undo.Execute(diagramControl.View);
  • vbnet
    • diagramControl.Undo.Execute(diagramControl.View)

    The Redo command can be specified in the following way. This command can be executed in XAML and code behind. In the following code snippet, diagramControl is an instance of DiagramControl, and the XAML code snippet shows a button bound to the Redo command.

  • xaml
    • <Button Content="Redo" Command="{Binding Redo, ElementName= diagramControl}"/>
  • c#
    • diagramControl.Redo.Execute(diagramControl.View);
  • vbnet
    • diagramControl.Redo.Execute(diagramControl.View)

    Disablling Undo and Redo

    Disabling Undo and Redo is helpful when the Diagram control has a large number of nodes and line connectors where insertion and deletion are very frequently used. This property can be disabled so that all the references are removed for the stack. This implies that the deleted nodes will lose their references.

    The following code snippet explains the disabling of the Undo Redo operation.

  • xaml
    • <sfdiagram:DiagramControl IsSymbolPaletteEnabled="True" >

    <sfdiagram:DiagramControl.Model>

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

        </sfdiagram:DiagramModel>

    </sfdiagram:DiagramControl.Model>

    <sfdiagram:DiagramControl.View >

        <sfdiagram:DiagramView UndoRedoEnabled="False" 

		ShowHorizontalGridLine="True" ShowVerticalGridLine="True">

    </sfdiagram:DiagramView>

    </sfdiagram:DiagramControl.View>

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

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

diagramView.UndoRedoEnabled = False

    Clearing Undo Redo Stack

    The following code snippet illustrates the clearing of Undo Redo stack.

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

diagramView.ClearUndoRedoStack();
  • vbnet
    • Dim diagramView As New DiagramView()

diagramView.ClearUndoRedoStack()

    Tables for Properties, Methods, and Events

    Properties

    Property Description Type Data Type Reference links
    UndoRedoEnabled Gets or sets a value indicating whether undo redo is enabled or not. Dependency property Boolean (True/False) No

    Methods

    Method Description Parameters Type Return Type Reference links
    ClearUndoRedoStack Clears the Undo and Redo stack. Not Applicable Not Applicable Void No

    To view the samples:

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

    Navigate to Product Showcase -> Feature Demo.

    Printing Support for Diagram Page

    Features

    This feature allows you to print a copy of the diagram page, using a print dialog box. The Print feature comes with two functionalities:

    1.Print Dialog

    The Print Dialog box is used to print the diagram page.

    2.Print Preview

    Print Preview is used to see how the page looks before taking a print out. The following are the options to customize the preview.

    • Stretch support
    • Page size
    • Margins

    Use Case Scenarios

    You can see the output of the document before print the document, or diagram that you intend to print, using the print preview. This way, you will not have to take actual prints to see how it turns out.

    Tables for Properties and Methods

    Properties

    Property Description Type Value It Accepts Default Values Any other dependencies/ sub properties associated
    DiagramPrintDialog Gets or sets the width and height, margins and stretch of the page. CLR property. DiagramPrintDialog DiagramPrintDialog No
    DocumentName Gets or sets the name of the printing document. Dependency Property string string.Empty No
    CurrentPage Gets or sets which page is current page. Dependency Property int 1 No
    PageCount Gets the no. of pages to be printed. Dependency Property int 1 No
    PageHeight Gets or sets the page height. Dependency Property double 1169 No
    PageWidth Gets or sets the page width. Dependency Property double 827 No
    PageMargin Gets or sets the page margin(L,T,R,B) for printing page. Dependency Property Thickness(left, top, right, bottom) Left - 50, Top - 50, Right - 50, Bottom - 50 No
    PageStretch Gets or sets the page stretch for printing document. Dependency Property
    Stretch.Fill
    Stretch.None
    Stretch.Uniform
    Stretch.UniformTo
    Fill    		 Stretch.Fill No

    Methods

    Method Description Parameters Return Type Reference links
    PrintDialog Print the diagram page using framework print dialog, without print preview. null void No
    PrintPreview This method is used to show the preview of the diagram to be printed. null void No

    To view the sample for this feature, follow the steps given below:

    1. Open the Silverlight Sample Browser from the Dashboard.
    2. Navigate to Diagram -> Static Diagram ->Print Demo

    Adding Printing support for Diagram Page to an Application

    PrintPreview

    When you call the DiagramView’s PrintPreview method, you will see the Print Preview for the diagram in a child window.

    The method is in the Diagram View and can be used through Code behind:

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

       diagramView.PrintPreview();
  • vbnet
    • Dim diagramView As New DiagramView()

       diagramView.PrintPreview()

    PrintPreview Customizations

    You can customise the preview of the diagram using the following options:

    • Page Stretch
    • Page Size
    • Page Margins

    Page Stretch:

    The Stretch property controls how a diagram is stretched to fill the page it’s on. It accepts the following values:

    • None
    • Fill
    • Uniform
    • UniformToFill

    The default value is Fill.

    The following images show the various output from the example and demonstrates the effect different Stretch settings have when applied to a diagram.

    Different stretch settings:

    • None: The diagram will not be stretched to fill the page area. If the diagram is larger than the page area, the diagram will be split into multiple pages. An option for navigation is provided in the print preview window to view one of the multiple pages.

    PrintStretch = None in PrintPreview

    • Fill: The diagram is scaled to fit the output area. Because the diagram’s height and width are scaled independently, the original aspect ratio of the diagram is not preserved. This means the diagram might be warped, if necessary, in order to completely fill the page area.

    PrintStretch = Fill in PrintPreview

    • Uniform: The diagram is scaled, while preserving its aspect ratio, so that it fits completely within the output area.

    PrintStretch = Uniform in PrintPreview

    • UniformToFill: The diagram is scaled so that it completely fills the page area while preserving the diagram’s original aspect ratio.

    PrintStretch = UniformToFill in PrintPreview

    Page Size:

    The Page size property shows how a diagram is resized. It uses the following values:

    • PageHeight : To change or resize the height of the page. Its default value is 1169.
    • PageWidth : You change or resize the width of the pageusing this value The default value is 827.

    Page Margins:

    The Page margin property is used to set the margin of the page. The Page margin property accepts the four values. That is Left, Top, Right, and Bottom.

    The default is (50,50,50,50).

    These properties are in DiagramPrinDialog in DiagramView and can be used through Code behind.

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

        diagramView.DiagramPrintDialog.DocumentName = "Silverlight";            

        diagramView.DiagramPrintDialog.PageHeight = 1000;

        diagramView.DiagramPrintDialog.PageWidth = 800;

        diagramView.DiagramPrintDialog.PageMargin = new Thickness(20,20,20,20);

        diagramView.DiagramPrintDialog.PageStretch = Stretch.None;

        diagramView.PrintPreview();
  • vbnet
    • Dim diagramView As New DiagramView()

diagramView.DiagramPrintDialog.DocumentName = "Silverlight"

diagramView.DiagramPrintDialog.PageHeight = 1000

diagramView.DiagramPrintDialog.PageWidth = 800

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

diagramView.DiagramPrintDialog.PageStretch = Stretch.None

diagramView.PrintPreview()

    NOTE

    Printing works independently from PrintPreview, and shows the exact preview of the print out, but only when the printer settings and the PrintPreview settings (PageMargin, PageWidth, PageHeight) are the same.

    PrintDialog

    Prints can be made without having to go through a preview.

    The diagram can be printed with a framework print dialog, i.e. without any preview (through code behind) as shown here:

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

       diagramView.PrintDialog();
  • vbnet
    • Dim diagramView As New DiagramView()

       diagramView.PrintDialog()

    DrawingTools

    This feature enables you to draw different shapes and lines. The drawn shapes and lines will be converted into Node and LineConnector respectively.

    The following shapes and lines are available in DrawingTools:

    1. Ellipse
    2. Rectangle
    3. Rounded Rectangle
    4. Polygon
    5. Straight Line
    6. Bezier Line
    7. Orthogonal Line

    Use Case Scenarios

    DrawingTools such as Microsoft Paint and Expression Blend support drawing a particular shape continually on a page. This feature too, enables you to draw a shape repeatedly without selecting it manually each time.

    Properties

    Property Description Type Data Type Reference Link
    EnableDrawingTools Gets or sets a value indicating whether EnableDrawingTools is enabled or dis abled. Dependency property Boolean(True/False) NA
    DrawingTools Gets or sets the ShapeType to be used. Default value isDrawingTools.Ellipse Dependency property Enum
    DrawingTools.Ellipse
    DrawingTools.Rectangle
    DrawingTool.RoundedRectangle
    DrawingTools.Polygon
    DrawingTools.StraightLine
    DrawingTools.BezierLine
    DrawingTools.OrthogonalLine
    DrawingTools.PolyLine    		 NA

    To view a sample:

    1. Open the Silverlight sample browser from the dashboard.
    2. Navigate to SL Diagram -> Product Showcase -> Diagram Builder

    Enable DrawingTools Property

    To enable DrawingTools set the EnableDrawingTools property to true. Shapes and line connectors are enabled, when the EnableDrawingTools property is enabled. By default, the value is set to false.

    DrawingTools can be enabled using two methods:

    • Through XAML.

    The following code illustrates how to enable the DrawingTools:

  • xaml
    • <syncfusion:DiagramControl Name="diagramControl" 

    <syncfusion:DiagramControl.Model>

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

        </syncfusion:DiagramModel>  

    </syncfusion:DiagramControl.Model> 

    <syncfusion:DiagramControl.View>

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

       </syncfusion:DiagramView>

    </syncfusion:DiagramControl.View>

</syncfusion:DiagramControl>
    • Through Code behind

    The following code illustrates how to enable the DrawingTools:

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

       diagramView. EnableDrawingTools = true;

    NOTE

    When the EnableDrawingTools is set to True, it has to be disabled manually, i.e. it cannot be disabled automatically. This will facilitate drawing shapes or lines continually until EnableDrawingTools is set to false manually.

    Select a DrawingTool

    DrawingTools consist of different shapes and line connectors. You can choose one of the DrawingTools at a time. By default, it is set to Ellipse.

    The DrawingTool selection in Diagram View can be set in two methods:

    • Through XAML.

    The following code illustrates how to select a DrawingTool:

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

       <syncfusion:DiagramControl.Model>

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

        </syncfusion:DiagramModel>


        </syncfusion:DiagramControl.Model>

        <syncfusion:DiagramControl.View>

            <syncfusion:DiagramView Name="diagramView" DrawingTool="Polygon">

                <syncfusion:DiagramView.Page>

                </syncfusion:DiagramView>

            </syncfusion:DiagramControl.View>

        </syncfusion:DiagramControl>
    • Through Code behind

    The following code illustrates how to select a DrawingTool:

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

       diagramView.DrawingTool = DrawingTools.Rectangle;    

    Steps for Drawing

    You can draw on a page by click and drag on the page.

    Follow are the below steps to draw a shape or a line:

    1. Set the EnableDrawingTools property of DiagramView to true.
    2. Select the DrawingTool as required from DrawingTools option.
    3. Click and drag. Preview of the drawing will be displayed.
    4. Release the mouse. Shape or line will be drawn.

    NOTE

    These steps are common for all shapes and lines drawing, except Polygon.

    Shape Drawing:

    Preview Ellipse – while Drawing

    C:/Users/labuser/Desktop/a.png

    Ellipse Preview

    Ellipse – After Drawing.

    Ellipse(Node)

    Line Drawing:

    Bezier Line Preview – While Drawing

    Bezier Line Preview

    Bezier Line – After Drawing

    Bezier Line(Line Connector)

    NOTE

    • The drawn shape will be converted into a Node.
    • The drawn line will be converted into a LineConnector.
    • You can continually draw the selected shape.
    • Lines cannot be drawn continually.

    Steps for drawing a Polygon Drawing:

    1. Set the EnableDrawingTools property of DiagramView to be true.
    2. Select the DrawingTool as required from DrawingTools option.
    3. Click, where you want the first point for polygon.
    4. Drag the mouse pointer. Preview of the drawing will be displayed.
    5. Click, where you want to place the Intermediate points of Polygon
    6. Right-click to complete the drawing.

    Preview Polygon – While Drawing

    Polygon Preview

    Polygon – After Drawing

    Polygon(Node)

    Virtualization for Diagram Control

    Virtualization is the process of loading the diagram page elements that are available in the visible area of the diagram control, i.e page elements that lie within the viewport of the ScrollViewer will be in loaded state and the rest will not be loaded until they come into view.

    This feature gives optimizable performance while loading and dragging items to diagram control when many Nodes and LineConnectors are added in the diagram page.

    Use Case Scenarios

    The loading time and the UI response will be proportional to the number of elements used in a page. When you want to display a page with large number of Nodes and LineConnectors the processing speed will be slow in user interaction. If virtualization is enabled, application will load only elements that lie in the visible area. This leads to fast loading and fast user interactivity.

    Properties

    Property Description Type Data Type Reference links
    EnableVirtualization Gets or sets a value indicating whether the diagram page can be virtualized. The default value is set to false. Dependency Property Boolean NA
    EnableCaching Gets or sets a value indicating whether the loaded object in diagram page can be virtualized. The default value is true. Dependency Property Boolean NA

    EnableVirtualization Property:

    To enable virtualization, set the EnableVirtualization property of DiagramView to true. Page elements within the viewport alone will be loaded. The default value is false. Following code illustrates this:

  • xaml
    • <!---DiagramControl--->         

<syncfusion:DiagramControl  Name="diagramControl" >

<syncfusion:DiagramControl.Model>

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

</syncfusion:DiagramModel>

</syncfusion:DiagramControl.Model>

<syncfusion:DiagramControl.View>

<syncfusion:DiagramView EnableVirtualization="True" Name="diagramView" 

</syncfusion:DiagramView>

</syncfusion:DiagramControl.View>

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

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

diagramView.EnableVirtualization = True

    EnableCaching Property:

    The EnableCaching property decides whether the element should be in loaded state or unloaded state, when the element is outside the viewport area. To set the element in unloaded state set the EnableCaching to false. To set it in loaded state set the EnableCaching to true.

    Following code illustrates this:

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

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

diagramView.EnableCaching = True

    Node/LineConnector AllowVirtualization Property:

    The AllowVirtualization property is used to enable/disable the Node/LineConnector virtualization. When the AllowVirtualization is set to false for an element that lies outside the viewport, it will be in loaded state when Virtualization is enabled. The default value is true.

    The AllowVirtualization property can be set as given in the following code.

  • c#
    • // Node Virtualization

Node NodeObject = new Node();

NodeObject.AllowVirtualization = true;


//LineConnector Virtualization  

LineConnector LineConnectorObject = new LineConnector();

LineConnectorObject.AllowVirtualization = true;
  • vbnet
    • 'Node Virtualization

Dim NodeObject As New Node()

NodeObject.AllowVirtualization = True

'LineConnector Virtualization

Dim LineConnectorObject As New LineConnector()

LineConnectorObject.AllowVirtualization = True

    Limitations:

    Due to virtualization behavior there are some limitations in the diagram control. They are:

    1. As Gridlines and Rulers are not visualized, when node or line connector is placed at a distance for example 2,000,000 pixels away, rendering will take place from zero to end. This leads to performance issues in rendering Gridlines or Rulers.
    2. Save and load is not supported for Nodes and LineConnectors that are in unloaded state.
    3. When diagram is virtualized, many nodes will be in unloaded state and their Width and Height will not be set. As the automatic layout depends on the size of the node, predefined width and height for the node is required for updating the layout.

    SizeToContent

    SizeToContent support enables you to resize the diagram page depending upon the content size. This option can also be disabled. You can also define the size of diagram page and restrict the diagram element from moving out of a specified area.

    Properties

    Name Description Type Data Type Reference Links
    SizeToContent Specifies whether SizeToContent behavior is enabled or disabled. Dependency Property Bool NA
    BoundaryConstraintsArea Defines the diagram page area. Dependency Property Rect NA
    BoundaryConstarintsEnabled Restricts the diagram element moving out of a specified area. Dependency Property Bool NA
    PageBackgroundEffect Sets the page background effect. Dependency Property Effect NA
    OffPageBackground Sets the background brush for area outside Diagram Page. Dependency Property Brush NA

    Enabling SizeToContent

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

    Following code illustrates how to enable SizeToContent support:

  • 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 SizeToContent="True"  Name="diagramView"/>

    </syncfusion:DiagramControl.View>

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

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

diagramView.SizeToContent = True

    Defining Diagram Page

    You can define the Diagram Page area. Use the BoundaryConstraintsArea property of DiagramView to define Diagram Page area.

    Following code illustrates how to define Diagram Page area:

  • 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 BoundaryConstraintsArea="100,100,850,1195" Name="diagramView"/>

</syncfusion:DiagramControl.View>

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

diagramView.BoundaryConstraintsArea = new Rect(100, 100, 850, 1195);
  • vbnet
    • Dim diagramView As New DiagramView()

diagramView.BoundaryConstraintsArea = New Rect(100, 100, 850, 1195)

    Restricting the Diagram Element

    You can restrict the diagram element moving out of a specified area. Use the BoundaryConstraintsEnabled property of DiagramView for this purpose.

    Following code illustrates how to restrict diagram element moving out of specific area:

  • 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 BoundaryConstraintsEnabled="True" Name="diagramView"/>

</syncfusion:DiagramControl.View>

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

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

diagramView.BoundaryConstraintsEnabled = True

    Customizing options

    Following properties enables to customize the appearance of the diagram page:

    • PageBackground – specifies the background of the diagram page.
    • OffPageBackground - specifies the off page background.
    • PageEffect - specifies the background effect of the diagram page.

    Customizing Background

    To customize the background, use the PageBackground of DiagramView. Default value is White.

    Following code illustrated how to customize the background:

  • 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 OffPageBackground="White" PageBackground="White" Name="diagramView"/>

    </syncfusion:DiagramControl.View>

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

diagramView.PageBackground = new SolidColorBrush(Colors.Gray);
  • vbnet
    • Dim diagramView As New DiagramView()

diagramView.PageBackground = New SolidColorBrush(Colors.Gray)

    Customizing the Off Page’s Background

    To customize the background of the Off Page, use the OffPageBackground property of DiagramView. Default value is White.

    Following code illustrates how to customize the background of the Off Page:

  • 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 OffPageBackground="White" PageBackground="White" Name="diagramView"/>

    </syncfusion:DiagramControl.View>

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

diagramView.OffPageBackground = new SolidColorBrush(Colors.White);
  • vbnet
    • Dim diagramView As New DiagramView()

diagramView.OffPageBackground = New SolidColorBrush(Colors.White)

    Customizing page effect

    To customize the page effect, use the PageEffect property of DiagramView.

    Following code illustrates how to customize the page effect:

  • 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 OffPageBackground="White" PageBackground="White" Name="diagramView">

        <syncfusion:DiagramView.BackgroundEffect>

        <DropShadowEffect BlurRadius="12" Color="Black" Direction="-350" ShadowDepth="30"/>

        </syncfusion:DiagramView.BackgroundEffect>

        </syncfusion:DiagramView>

    </syncfusion:DiagramControl.View>

</syncfusion:DiagramControl>
  • c#
    • DropShadowEffect drop = new DropShadowEffect();

drop.BlurRadius = 25;

drop.Color = new Color { B = 205, G = 148, R = 79 };

drop.Direction = 450;

drop.ShadowDepth = -2;

diagramView.BackgroundEffect = drop;
  • vbnet
    • Dim drop As New DropShadowEffect()

drop.BlurRadius = 25

drop.Color = New Color With {.B = 205, .G = 148, .R = 79}

drop.Direction = 450

drop.ShadowDepth = -2

diagramView.BackgroundEffect = drop

    C:/Users/jeganr/Desktop/RP9.3/Diagram.WPF/3.5/WindowsSamples/Getting Started/Page Settings Demo/Images/PageSettingsDemo.PNG

    Customized Diagram Page

    Support to Delete Nodes and Connectors

    Essential Diagram for Silverlight provides support to delete selected nodes and connectors.

    Use Case Scenarios

    When you restructure the workflow diagram, you may happen to delete some of the nodes and connectors. Using this feature you can deleted the unwanted nodes and connectors.

    A demo of this feature is available in the following location:

    {Installed Location}\Syncfusion\EssentialStudio__x.x.x.x\Silverlight\Diagram.Silverlight\ProductShowcase\DiagramBuilder

    Deleting Nodes and Connectors

    You can delete the nodes and connectors the following two methods:

    • Using Delete Keyboard
    • Using Delete Command

    Using Delete Keyboard

    This feature provides keyboard support to delete nodes and connectors:

    The following steps illustrate how to delete nodes or connectors using keyboard:

    1. Select the node or the connector to be deleted.

    2. Press the Delete key. The selected node or connector will be deleted. 

    Using the Delete Command

    You can also delete nodes and connectors through commands. To delete nodes and connectors, invoke the Delete command as illustrated in the following code:

  • c#
    • diagramControl.Delete.Execute(diagramView);
  • vbnet
    • diagramControl.Delete.Execute(diagramView);

    NOTE

    When a node is deleted, all the connectors connected to that node will also be deleted. Deleting a connector leads to the deletion of that particular connector only.

    Zooming Support

    Essential Diagram for Silverlight provides support for zoom in and zoom out the diagram page. This can be achieved in the following two methods:

    • Using the zoom commands
    • Using the mouse

    Properties

    Property Description Type Data Type Reference links
    IsZoomEnabled Gets or sets a value indicating whether zoom is enabled or not.Default value is True. Dependency property Boolean NA
    ZoomFactor Gets or sets a factor for the zoom.Default value is 0.2. Dependency property Double NA

    Zooming Diagram Page

    Through Zoom Commands

    Zooming in

    You can add the zoom in command to the Button click event as given in the following code:

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

ZoomCommands.ZoomIn.Execute(diagramView.Page, diagramView);
  • xaml
    • <Button Name="ZoomIn" Content="ZoomIn" Command="{Binding ZoomIn,ElementName=diagramControl}" Width="100" Height="30"/>

    The diagram page elements will be zoomed in each time the button is clicked.

    Zoom out

    You can add the zoom out command to the Button click event as given in the following code:

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

ZoomCommands.ZoomOut.Execute(diagramView.Page, diagramView);
  • xaml
    • <Button Name="ZoomOut" Content="ZoomOut" Command="{Binding ZoomOut, ElementName=diagramControl}" Width="100" Height="30"/>

    The diagram page elements will be zoomed out each time the button is clicked.

    Through Mouse

    You can enable the zooming through mouse scrolling. To enable this set the IsZoomEnabled property to True. By default it is set to true.

    The following code illustrates this:

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

diagramView.IsZoomEnabled = true;
  • 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 Name="diagramView" IsZoomEnabled="True">

       </syncfusion:DiagramView>

    </syncfusion:DiagramControl.View>

</syncfusion:DiagramControl>

    When to code runs, zooming will be enabled. To zoom in, Ctrl + scroll up the diagram page. To zoom out, Ctrl + scroll down the diagram page.

    NOTE

    Enabling IsZoomEnabled property will not affect the performed of any other operations on the page elements.

    Zoom Factor

    Essential Diagram Silverlight allows you to set the factor. you can set the zoom factore using the ZoomFactor property. The default value is 0.2.

    The following code illustrates how to set the zoom factor:

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

diagramView.ZoomFactor = 1;
  • 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 Name="diagramView" ZoomFactor="1">

    </syncfusion:DiagramView>

    </syncfusion:DiagramControl.View>

</syncfusion:DiagramControl>