Supported Controls in Windows Forms Diagram

The controls supported by Essential Diagram are as follows.

The controls associated with the Diagram control are illustrated in the following image.

Overvies of Supported Controls

Overview Control

Overview Control provides a perspective view of a diagram model, and allows users to dynamically pan and zoom the diagrams. The control features a view port window that can be moved and / or resized using the mouse to modify the diagrams’ origin and magnification properties at run-time.

The important property of the Overview Control is the Diagram property. The following are the list of properties of the Overview control.

Property Description
BackColor Background color of the component.
AllowDrop Gets or sets a value indicating whether the control can accept the data that the user can drops on it.
BackgroundImage Background image of the component.
BorderStyle Sets the border style for the component. It can be FixedSingle, Fixed3D or None.
Controls Indicates the collection of control within the component.
Enabled Indicates if the control is enabled.
Dock Indicates which control borders are docked to its parent control and determine how the control is resized with its parent.
Diagram Sets the corresponding diagram to the Overview Control.
Visible Sets the visibility of the control.

The important events of Overview Control are listed below with their corresponding descriptions.

Event Description
Click Occurs when the component is clicked.
DoubleClick Occurs when the component is double-clicked.
ViewPortBoundsChanged Occurs when the controls viewport bounds is changed.
ViewPortBoundsChanging Event Occurs when the controls viewport bounds is changing.

Programmatically, the properties can be set as follows.

  • c#
  • overviewControl1.BackColor = System.Drawing.SystemColors.AppWorkspace;
    
    overviewControl1.Diagram = diagram1;
    
    overviewControl1.Dock = System.Windows.Forms.DockStyle.Bottom;
    
    overviewControl1.ForeColor = System.Drawing.Color.Red;
    
    overviewControl1.Location = new System.Drawing.Point(0, 377);
    
    overviewControl1.Name = "overviewControl";
    
    overviewControl1.Size = new System.Drawing.Size(200, 100);
    
    overviewControl1.TabIndex = 1;
  • vbnet
  • overviewControl1.BackColor = System.Drawing.SystemColors.AppWorkspace
    
    overviewControl1.Diagram = diagram1
    
    overviewControl1.Dock = System.Windows.Forms.DockStyle.Bottom
    
    overviewControl1.ForeColor = System.Drawing.Color.Red
    
    overviewControl1.Location = New System.Drawing.Point(0, 377)
    
    overviewControl1.Name = "overviewControl"
    
    overviewControl1.Size = New System.Drawing.Size(200, 100)
    
    overviewControl1.TabIndex = 1

    Pan and Zoom

    Palette Groupbar And GroupView

    The Palette Groupbar control provides a way for users to drag-and-drop the symbols onto a diagram. It is based on the Syncfusion Essential Tools GroupBar control. Each symbol palette loaded in the PaletteGroupBar occupies a panel that can be selected by a bar button. The bar button is labeled with the name of the symbol palette. The symbols in the palette are shown as icons that can be dragged and dropped onto the diagram. This control allows users to add symbols to a palette, and save or load the palette whenever necessary. It provides a way to classify and maintain the symbols.

    The PaletteGroupView control provides an easy way to serialize a symbol palette to and from the resource file of a form. At the design-time, users can attach a symbol palette to a PaletteGroupView control in a form. Selecting the PaletteGroupView, and clicking the Palette property in the Visual Studio .NET properties window, opens a standard Open File dialog, which allows the user to select a symbol palette file that has been created using the Symbol Designer.

    The properties of the PaletteGroupBar and GroupView with their descriptions are given in the below table.

    PaletteGroupBar and GroupView

    Property Description
    BackColor Sets the background color of the component.
    BorderStyle Sets the border style to FixedSingle, Fixed3D or None.
    Collapsed Indicates whether the GroupBar is collapsed.
    CollapsedText Sets the text for the collapsed client area of the GroupBar.
    CollapsedWidth Specifies the width of the collapsed GroupBar.
    CollapseImage Image of the collapsed button in the expanded state.
    DrawClientBorder Indicates whether border is drawn around the GroupBar's client window.
    ExpandImage Sets image of the collapse button.
    FlatLook Indicates whether control is displayed with a flat look.
    Font Sets font style for text in the control.
    ForeColor Sets fore color of the display text in the component.
    GroupBarItemCursor Cursor that is to be displayed when the mouse pointer is over the GroupBarItems.
    Office2007Theme Sets the (blue, black or silver) office theme used for drawing the control.
    PopupClientSize Sets the initial size of the pop-up for GroupBar client.
    PopupResizeMode Gets / sets the pop-up resize mode.
    ShowPopupGripper Boolean value indicating whether to show GroupBarItem's popup gripper.
    Text Text associated with the control.
    TextAlign Alignment of the text set through Text property.
    ThemesEnabled Specifies whether control should be themed.
    VisualStyle Visual style for drawing the control. Styles are Default, OfficeXP, Office2003, VS2005 and Office2007.
    AllowCollapse Indicates whether GroupBar can be collapsed.
    AnimatedSelection Indicates whether animated selection is enabled.
    BarHighlight Indicates whether GroupBar item is highlighted on mouse hovering over a GroupBar Item.
    EditMode This property determines whether the symbols from the palette can be dragged and dropped onto the Diagram.
    Enabled Indicates whether component is enabled.
    ExpandButtonToolTip Sets tooltip for Collapse button, when the control is collapsed.
    GroupBarItemHeight Height of the GroupBarItems.
    MinimizeButtonToolTip ToolTip for collapse button when control is expanded.
    NavigationPaneToolTip ToolTip for navigation pane.
    PopupAutoClose Indicates whether pop-up is closed after clicking an item.
    SelectedItem Index of the selected GroupBarItem.
    StackedMode Indicates whether GroupBarItem is stacked.
    Visible Sets the visibility of the GroupBar control.
    GroupBarItems GroupBarItem collection in the control.
    ShowChevron Indicates if chevron button of the navigation panel should be displayed when required.
    ShowItemImageInHeader Gets / sets a value indicating whether the selected item's image is shown in the header in Stacked GroupBar.
    Palette Indicates the loaded palette is in palette view.

    PaletteGroupBar and GroupView

    Method Description
    LoadPalette Loads given Symbol Palette to the PaletteGroupView.

    The important events of the PaletteGroupBar and GroupView with their descriptions are given in the below table.

    Event Description
    Click Occurs when component is clicked.
    DoubleClick Occurs when the component is double-clicked.
    GroupViewItemHighlighted Event fired when an item in the GroupView control is highlighted.
    GroupViewItemSelected Event fired when an item in the GroupView control is selected.
    GroupViewItemReordered Event fired after the GroupView control items have been reordered by a drag–and–drop operation.
    GroupViewItemRenamed Event fired after an in-place rename operation.
    ShowContextMenu Event Event fired when the right mouse button is clicked over the control.

    Programmatically, the properties can be set as follows.

  • c#
  • paletteGroupBar1.AllowDrop = true;
    
    paletteGroupBar1.Controls.Add(paletteGroupView1);
    
    paletteGroupBar1.Controls.Add(paletteGroupView2);
    
    paletteGroupBar1.Dock = System.Windows.Forms.DockStyle.Left;
    
    paletteGroupBar1.EditMode = false;
    
    paletteGroupBar1.GroupBarItems.AddRange(new Syncfusion.Windows.Forms.Tools.GroupBarItem[] 								{ groupBarItem1, groupBarItem2 });
    
    
    
    
    
    paletteGroupBar1.Location = new System.Drawing.Point(0, 0);
    
    paletteGroupBar1.Name = "paletteGroupBar1";
    
    paletteGroupBar1.SelectedItem = 1;
    
    paletteGroupBar1.Size = new System.Drawing.Size(114, 477);
    
    paletteGroupBar1.TabIndex = 1;
    
    paletteGroupBar1.Text = "Symbol Palette";
    
    
    
    groupBarItem1.Client = paletteGroupView1;
    
    groupBarItem1.Text = "Basic Shapes";
    
    groupBarItem2.Client = paletteGroupView2;
    
    groupBarItem2.Text = "ElectricalSymbols";
    
    paletteGroupView1.ButtonView = true;
    
    paletteGroupView1.Location = new System.Drawing.Point(2, 24);
    
    paletteGroupView1.Name = "paletteGroupView1";
    
    paletteGroupView1.Size = new System.Drawing.Size(71, 0);
    
    paletteGroupView1.TabIndex = 0;
    
    
    
    paletteGroupView1.Text = "paletteGroupView1";
    
    
    
    paletteGroupView1.LoadPalette
    
    (@"..\..\..\..\..\..\..\..\..\Common\Data\Diagram\BasicShapes.edp");
    
    
    
    
    paletteGroupView2.LoadPalette
    
    (@"..\..\..\..\..\..\..\..\..\Common\Data\Diagram\ElectricalSymbols.edp");
  • vbnet
  • paletteGroupBar1.AllowDrop = True
    
    paletteGroupBar1.Controls.Add(paletteGroupView1)
    
    paletteGroupBar1.Controls.Add(paletteGroupView2)
    
    paletteGroupBar1.Dock = System.Windows.Forms.DockStyle.Left
    
    paletteGroupBar1.EditMode = False
    
    paletteGroupBar1.GroupBarItems.AddRange(New Syncfusion.Windows.Forms.Tools.GroupBarItem() {groupBarItem1, groupBarItem2})
    
    
    
    
    
    paletteGroupBar1.Location = New System.Drawing.Point(0, 0)
    
    paletteGroupBar1.Name = "paletteGroupBar1"
    
    paletteGroupBar1.SelectedItem = 1
    
    paletteGroupBar1.Size = New System.Drawing.Size(114, 477)
    
    paletteGroupBar1.TabIndex = 1
    
    paletteGroupBar1.Text = "Symbol Palette"
    
    
    
    groupBarItem1.Client = paletteGroupView1
    
    groupBarItem1.Text = "Basic Shapes"
    
    groupBarItem2.Client = paletteGroupView2
    
    groupBarItem2.Text = "ElectricalSymbols"
    
    paletteGroupView1.ButtonView = True
    
    paletteGroupView1.Location = New System.Drawing.Point(2, 24)
    
    paletteGroupView1.Name = "paletteGroupView1"
    
    paletteGroupView1.Size = New System.Drawing.Size(71, 0)
    
    paletteGroupView1.TabIndex = 0
    
    
    
    paletteGroupView1.Text = "paletteGroupView1"
    
    
    
    paletteGroupView1.LoadPalette("..\..\..\..\..\..\..\..\..\Common\Data\Diagram\BasicShapes.edp")
    
    
    
    
    
    paletteGroupView2.LoadPalette("..\..\..\..\..\..\..\..\..\Common\Data\Diagram\ElectricalSymbols.edp")

    Dynamically add Symbol Palette into PaletteGroupBar

    You can add Symbol Palettes into PaletteGroupBar by means of deserializing the palette (*.edp) file dynamically. The PaletteGroupBar control supports PaletteGroupBar1.AddPalette() method in order to add a palette into the PaletteGroupBar.

    Follow the steps given below for adding symbol palette into PaletteGroupBar:

    1. Add OpenFileDialog control into form.
    2. Set the Filter property of OpenFileDialog as,
    3. Essential Diagram Palettes *.edp Visio Stencils *.vss; *.vsx Visio Drawings(Shapes only) *.vsd; *.vdx All files .
    4. Add the following lines of code to your button click event.
  • c#
  • if (openPaletteDialog.ShowDialog(this) == DialogResult.OK)
    {
        SymbolPalette curSymbolPalette;
        FileStream iStream;
        string strFileName = openPaletteDialog.FileName;
        RegexOptions options = RegexOptions.IgnoreCase | RegexOptions.RightToLeft;
        Match match = Regex.Match(strFileName, ".vss|.vsx|.vsd|.vdx", options);
        if (match.Success)
        {
            VisioStencilConverter converter = new VisioStencilConverter(strFileName, this);
            converter.ShowProgressDialog = true;
            curSymbolPalette = converter.Convert();
            if (curSymbolPalette != null)
            PaletteGroupBar1.AddPalette(curSymbolPalette);
        }
        else
        {
        try
        {
            iStream = new FileStream(strFileName, FileMode.Open, FileAccess.Read);
            // Deserialize  the Binary format
            IFormatter formatter = new BinaryFormatter();
            AppDomain.CurrentDomain.AssemblyResolve +=
                    new ResolveEventHandler(DiagramBaseAssembly.AssemblyResolver);
            curSymbolPalette = (SymbolPalette)formatter.Deserialize(iStream);
            PaletteGroupBar1.AddPalette(curSymbolPalette);
        }
        catch (Exception se)
        {
            MessageBox.Show(this, se.Message);
        }
        finally
        {
            iStream.Close();
        }
        }
    }

    Saving the active Palette

    You can save the current active palette of PaletteGroupBar window by means of serializing the palette (.edp) file. The PaletteGroupBar.CurrentSymbolPalette property returns the currently selected symbol palette.

    Follow the steps given below for saving current symbol palette.

    1. Add SaveFileDialog control into form.
    2. Set the Filter property of SaveFileDialog as

      Essential Diagram Palettes *.edp All files .
    3. Add the following lines of code to your button click event.
  • c#
  • if (savePaletteDialog.ShowDialog(this) == DialogResult.OK)
    {
        SymbolPalette symbolPalette = PaletteGroupBar1.CurrentSymbolPalette;
        string strSavePath = savePaletteDialog.FileName;
        if (symbolPalette != null)
        {
            FileStream fStream = new FileStream(strSavePath, FileMode.OpenOrCreate, FileAccess.Write);
            BinaryFormatter formatter = new BinaryFormatter();
            formatter.Serialize(fStream, symbolPalette);
            fStream.Close();
        }
    }

    Palette Groupbar And GroupView

    Adding Shapes by Clicking the Diagram Page

    Essential Diagram enables you to draw the selected node by clicking the Diagram page instead of dragging from the Symbol Palette.

    Property Table

    Property Description Type Data Type Reference links
    Diagram Reference to enable drawing the selected node by clicking on the diagram page. NA Diagram NA.

    Enabling Adding Shapes by Clicking Support

    You can enable drawing shapes by clicking the diagram page using the Diagram property.

    //Palette group view
    paletteGroupView1.Diagram = diagram1;
    // Platte group bar
    paletteGroupBar1.Diagram = diagram1;
    'Palette group view	
    paletteGroupView1.Diagram = diagram1;	
    'Palette group bar	
    paletteGroupBar1.Diagram = diagram1;

    Adding-Shapes to the diagram from palette

    NOTE

    Click the Diagram page to add the selected node. Click and drag to get the required size.

    Sample Link

    To view a sample:

    1. Open the Syncfusion Dashboard.
    2. Click the Windows Forms drop-down list and select Run Locally Installed Samples.
    3. Navigate to Diagram Samples > Product Showcase > Diagram Builder.

    Preview for Symbol Palette Item

    Essential Diagram for Windows Forms provides preview support for Symbol Palette. When you drag an item from Symbol Palette to Diagram View, Preview of the dragged item will be displayed. You can enable or disable the preview support.

    Use Case Scenario

    This feature displays a preview of the item you drag from Symbol Palette, thus enables you to identify the item you are dragging from the symbol palette to Diagram view.

    Property Table

    Property Description Type Data Type Reference links
    ShowDragNodeCue Gets or sets a value indicating whether preview is visible.The default value is true. NA Boolean NA
    DragNodeCueEnabled Gets or sets a value indicating whether preview is enabled.The default value is true. NA Boolean NA

    Enabling Preview Support

    To enable preview for the dragged item from Symbol Palette, set the DragNodeCueEnabled property of PaletteGroupBar/PaletteGroupView to true. To disable preview set this to false. By default this is set to true.

    Following code example illustrates how to enable preview support:

    //enable dragged node cue
    paletteGroupBar1.DragNodeCueEnabled = true;
    paletteGroupView1.DragNodeCueEnabled = true
    
    //show dragged node cue
    paletteGroupBar1.ShowDragNodeCue = true;
    paletteGroupView1.ShowDragNodeCue = true;
    'enable dragged node cue
    paletteGroupBar1.DragNodeCueEnabled = True	
    paletteGroupView1.DragNodeCueEnabled = True
    
    'show dragged node cue
    paletteGroupBar1.ShowDragNodeCue = True
    paletteGroupView1.ShowDragNodeCue = True

    Preview Support in Palette

    The following code illustrates how to disable preview support:

    //hide dragged node cue
    paletteGroupBar1.ShowDragNodeCue = false;
    paletteGroupView1.ShowDragNodeCue = false;
    //hide dragged node cue
    paletteGroupBar1.ShowDragNodeCue = False;
    paletteGroupView1.ShowDragNodeCue = False;

    Sample Link

    To view a sample:

    1. Open the Syncfusion Dashboard.
    2. Click the Windows Forms drop-down list and select Run Locally Installed Samples.
    3. Navigate to Diagram Samples > Product Showcase > Diagram Builder.

    Document Explorer

    Document Explorer allows you to visualize the details of various objects that are added onto the diagram control at run-time. The layers will be listed under the Layers node and other objects like shapes, links, lines and text editor will be listed under Nodes node.

    The properties of the Document Explorer are listed below with their respective descriptions.

    Property Description
    BackColor Background color of the component.
    BorderStyle Border style for the component. It can be FixedSingle, Fixed3D or None.
    CheckBoxes Boolean value indicating whether check boxes should be displayed besides the nodes.
    ItemHeight Height of the tree view node.
    Enabled Indicates if the control is enabled.
    FullRowSelect Indicates whether the whole row (through out the width of the TreeView) is selected when the corresponding node is selected.
    HideSelection Removes the highlight from the selected node when the control loses focus.
    HotTracking Indicates whether the selected node will interact with the user by giving a link-like appearance.
    ImageIndex Default image index for the nodes.
    ImageKey Default image key for the nodes.
    ImageList ImageList with images to be used for the nodes.
    Indent Indentation of child nodes in pixels.
    LabelEdit Boolean value indicating whether nodes labels can be edited.
    LineColor Color of the lines that connects the nodes of the TreeView.
    Nodes Node Collection of the TreeView control.
    PathSeparator String Delimiter used for the path returned by a node's FullPath property.
    Scrollable Enables scroll bars if required.
    SelectedImageIndex Default image index for the selected nodes.
    SelectedImageKey Default image key for the selected nodes.
    ShowLines Indicates whether lines are displayed between sibling nodes and between parent and child nodes.
    ShowNodeToolTips Indicates whether tooltips will be displayed on the nodes.
    ShowPlusMinus Indicates whether plus / minus buttons are shown next to  parent nodes.
    ShowRootLines Indicates whether lines are shown between root nodes.
    StateImageList ImageList used for custom state images.
    Visible Sets visibility of the control.

    Document Explorer

    Method Description
    AttachModel Adds Diagram Model to the Document Explorer.

    The important events of Document Explorer are as follows,

    Event Description
    Click Occurs when the component is clicked.
    DoubleClick Occurs when the component is double-clicked.
    AfterCheck Occurs when a check box on a tree node has been checked or unchecked.
    AfterCollapse Occurs when a node has been collapsed.
    AfterExpand Occurs when a node has been expanded.
    AfterLabelEdit Occurs when the text of a node has been edited by the user.
    AfterSelect Occurs when the selection has been changed.
    BeforeCheck Occurs when a check box on a tree node is about to be checked or unchecked.
    BeforeCollapse Occurs when a node is about to be collapsed.
    BeforeExpand Occurs when a node is about to be expanded.
    BeforeLabelEdit Occurs when the text of a node is about to be edited by the user.
    BeforeSelect Occurs when the selection is about to change.
    DrawNode Occurs in owner draw-mode, when a node needs to be drawn.
    NodeMouseClick Occurs when a node is clicked with the mouse.
    NodeMouseDoubleClick Occurs when a node is double-clicked with the mouse.

    Programmatically, the properties can be set as follows.

  • c#
  • documentExplorer1.AttachModel(model1);
    
    documentExplorer1.Dock = DockStyle.Right;
    
    documentExplorer1.BackColor = System.Drawing.SystemColors.Window;
    
    documentExplorer1.Location = new System.Drawing.Point(0, 377);
    
    documentExplorer1.Size = new System.Drawing.Size(200, 100);
    
    documentExplorer1.BorderStyle = System.Windows.Forms.BorderStyle.Fixed3D;
    
    documentExplorer1.ShowNodeToolTips = true;
  • vbnet
  • documentExplorer1.AttachModel(model1)
    
    documentExplorer1.Dock = DockStyle.Right
    
    documentExplorer1.BackColor = System.Drawing.SystemColors.Window
    
    documentExplorer1.Location = New System.Drawing.Point(0, 377)
    
    documentExplorer1.Size = New System.Drawing.Size(200, 100)
    
    documentExplorer1.BorderStyle = System.Windows.Forms.BorderStyle.Fixed3D
    
    documentExplorer1.ShowNodeToolTips = True

    Document Explorer

    Sample code snippet for documentExplorer1.AfterSelect Event

  • c#
  • documentExplorer1.AfterSelect+=new TreeViewEventHandler( documentExplorer1_AfterSelect );
    
    
    
    private void documentExplorer1_AfterSelect(object sender,TreeViewEventArgs e) 
    {
        // Update diagram's selection list depending on TreeNode Tag
        if ( e.Node.Tag is Node )
            {
            Node nodeTemp = e.Node.Tag as Node;
            if ( nodeTemp != null )
                {
                if (nodeTemp.Visible && nodeTemp.Root.Equals(this.diagram1.Model))
                {
                    diagram1.View.SelectionList.Clear();
                    diagram1.View.SelectionList.Add(e.Node.Tag as Node);
                }
                else
                {
                    propertyEditor.PropertyGrid.SelectedObject = nodeTemp;
                }
            }
        }
    }

    Document Explorer with theme

    Property Editor

    The Property Editor in Essential Diagram displays properties of the currently selected object(s) in the diagram. It is a Windows Forms control that can be added to the Visual Studio .NET toolbox. It also allows the users to set or modify various properties of the objects or the model. The Property Editor provides an easy interface, to set and view various property settings.

    The following table lists the properties of the Property Editor. The important property of the Property Editor is the Diagram property.

    Property Description
    Diagram It contains a reference to the diagram that this property editor is attached to. The property editor receives events from the diagram when the current selection changes. It updates the currently displayed object in the property editor.
    Product Name Gets the product name of the assembly containing the control.
    ProductVersion Gets the version of the assembly containing the control.
    PropertyGrid Gets the reference to the PropertyGrid object contained by this property editor.
    ShowCombo Determines if combo box is visible.

    Programmatically, the properties can be set as follows.

  • c#
  • this.propertyEditor.PropertyGrid.BackColor = System.Drawing.Color.FromArgb((( System.Byte)(227)), ((System.Byte)(239)),((System.Byte)(255)));
    
    this.propertyEditor.PropertyGrid.CommandsBackColor = System.Drawing.Color.FromArgb(((System.Byte)(227)),((System.Byte)(239)),((System.Byte)(255)));
    
    this.propertyEditor.PropertyGrid.CommandsForeColor= System.Drawing.Color.MidnightBlue;
    
    this.propertyEditor.PropertyGrid.Font = new System.Drawing.Font("Arial", 8.25F,System.Drawing.FontStyle.Regular,System.Drawing.GraphicsUnit.Point,(System.Byte)(0)));
    
    this.propertyEditor.PropertyGrid.HelpBackColor = System.Drawing.Color.FromArgb(((System.Byte)(227)),((System.Byte)239)), ((System.Byte)(255)));
    
    this.propertyEditor.PropertyGrid.HelpForeColor = System.Drawing.Color.MidnightBlue;  					     
    
    this.propertyEditor.PropertyGrid.LineColor = System.Drawing.Color.FromArgb((( System.Byte)(185)), ((System.Byte)(216)), ((System.Byte)(255)));
    
    this.propertyEditor.PropertyGrid.ViewBackColor = System.Drawing.Color.FromArgb(((System.Byte)(227)), (( System.Byte)(239)), ((System.Byte)(255)));
    
    this.propertyEditor.PropertyGrid.ViewForeColor= System.Drawing.Color.MidnightBlue;
    
    this.propertyEditor.ShowCombo = true;
    
    this.propertyEditor.Diagram = diagram1;

    Property Editor