Supported Controls in Windows Forms Diagram

The controls associated with the WinForms Diagram control are illustrated in the following image. Each control can be added to a Windows Form from the Visual Studio .NET toolbox after the Syncfusion WinForms package is referenced.

Overvies of Supported Controls

Overview Control

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

The most important property of the Overview Control is Diagram, which binds the overview to the target diagram.

Properties

Property	Description
BackColor	Gets or sets the background color of the overview. Default value is the system control color.
BackgroundImage	Gets or sets the background image of the overview.
BorderStyle	Gets or sets the border style. Valid values are FixedSingle, Fixed3D, or None.
Diagram	Gets or sets the diagram that the overview control renders. This is the primary binding property.

Standard WinForms properties

The overview also inherits the standard System.Windows.Forms.Control properties: Enabled, Visible, Dock, Anchor, AllowDrop, BackColor, Controls, Location, Size, TabIndex, BackgroundImage, and ForeColor.

Events

Event	Description
ViewPortBoundsChanged	Occurs after the viewport bounds have changed.
ViewPortBoundsChanging	Occurs when the viewport bounds are about to change. Cancelable.

The standard Click, DoubleClick, MouseDown, MouseUp, and MouseMove events are also inherited from System.Windows.Forms.Control.

Programmatically, the properties can be set as follows. Add a Diagram control named diagram1 and an Overview Control named overviewControl1 to the form before running this sample.

overviewControl1.BackColor = System.Drawing.SystemColors.AppWorkspace;
overviewControl1.Diagram = diagram1;
overviewControl1.Dock = System.Windows.Forms.DockStyle.Bottom;
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.Location = New System.Drawing.Point(0, 377)
overviewControl1.Name = "overviewControl"
overviewControl1.Size = New System.Drawing.Size(200, 100)
overviewControl1.TabIndex = 1

Pan and Zoom

PaletteGroupBar and GroupView

The PaletteGroupBar control provides a way for users to drag and drop the symbols onto a diagram. It is based on the WinForms 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 design time, you can attach a symbol palette to a PaletteGroupView control on a form. Selecting the PaletteGroupView and clicking the Palette property in the Visual Studio .NET properties window opens a standard Open File dialog that allows the user to select a symbol palette file created using the Symbol Designer.

Properties

Property	Description
BackColor	Gets or sets the background color of the control.
BorderStyle	Gets or sets the border style. Valid values are FixedSingle, Fixed3D, or None.
Collapsed	Gets or sets whether the GroupBar is collapsed.
CollapsedText	Gets or sets the text shown for the collapsed client area of the GroupBar.
CollapsedWidth	Gets or sets the width of the collapsed GroupBar in pixels.
CollapseImage	Gets or sets the image shown for the expand button.
DrawClientBorder	Gets or sets whether a border is drawn around the GroupBar's client window.
ExpandImage	Gets or sets the image shown for the collapse button.
FlatLook	Gets or sets whether the control is displayed with a flat look.
Font	Gets or sets the font used for text in the control.
ForeColor	Gets or sets the foreground color of the display text.
GroupBarItemCursor	Gets or sets the cursor displayed when the mouse pointer is over a GroupBar item.
Office2007Theme	Gets or sets the Office 2007 theme color (blue, black, or silver) used to draw the control.
PopupClientSize	Gets or sets the initial size of the pop-up for the GroupBar client.
PopupResizeMode	Gets or sets the pop-up resize mode.
ShowPopupGripper	Gets or sets whether a gripper is shown on the pop-up.
Text	Gets or sets the caption text of the control.
TextAlign	Gets or sets the alignment of the caption text.
ThemesEnabled	Gets or sets the Office 2003 / 2007 themes. Use VisualStyle to apply the theme. Default value is true.
VisualStyle	Gets or sets the visual style used to draw the control. Valid values are Default, OfficeXP, Office2003, VS2005, and Office2007.
AllowCollapse	Gets or sets whether the GroupBar can be collapsed.
AnimatedSelection	Gets or sets whether an animated selection indicator is shown.
BarHighlight	Gets or sets whether a GroupBar item is highlighted when the mouse hovers over it.
EditMode	Gets or sets whether symbols from the palette can be dragged and dropped onto the diagram.
ExpandButtonToolTip	Gets or sets the tooltip shown for the expand button when the control is collapsed.
GroupBarItemHeight	Gets or sets the height of the GroupBar items in pixels.
MinimizeButtonToolTip	Gets or sets the tooltip shown for the collapse button when the control is expanded.
NavigationPaneToolTip	Gets or sets the tooltip shown for the navigation pane.
PopupAutoClose	Gets or sets whether the pop-up closes automatically after a click.
SelectedItem	Gets or sets the index of the selected GroupBar item.
StackedMode	Gets or sets whether GroupBar items are stacked.
Visible	Gets or sets whether the control is visible.
GroupBarItems	Gets or sets the GroupBarItem collection owned by the control.
ShowChevron	Gets or sets whether a chevron button is shown on the navigation panel when needed.
ShowItemImageInHeader	Gets or sets whether the selected item's image is shown in the header when StackedMode is enabled.
Palette	Gets or sets the loaded palette file for the palette view.

Methods

Method	Description
LoadPalette	Loads a Symbol Palette file (.edp, .vss, .vsx, .vsd, or .vdx) into the PaletteGroupView.
AddPalette	Adds a SymbolPalette object to the PaletteGroupBar at run time.

Events

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

The standard Click, DoubleClick, and other Control events are also inherited.

The following code example shows how to set up the PaletteGroupBar, PaletteGroupView, and load palettes into them. Add a PaletteGroupBar named paletteGroupBar1, two PaletteGroupView controls named paletteGroupView1 and paletteGroupView2, and two GroupBarItem objects named groupBarItem1 and groupBarItem2 to the form before running this sample. Update the file paths to match the location of the Syncfusion sample data on your machine.

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 adding a Symbol Palette into PaletteGroupBar

You can add Symbol Palettes into a PaletteGroupBar at run time by deserializing the palette (*.edp) file. The PaletteGroupBar.AddPalette() method lets you append a deserialized SymbolPalette instance to the bar.

Before running the code below:

Add an OpenFileDialog control named openPaletteDialog to the form.
Set its Filter property to the following value (paste this as a single string):
WinForms Diagram Palettes|*.edp|Visio Stencils|*.vss; *.vsx|Visio Drawings (Shapes only)|*.vsd; *.vdx|All files|*.*
Add a button whose click handler runs the code below. Add using directives for System.IO, System.Runtime.Serialization.Formatters.Binary, and System.Text.RegularExpressions if they are not already present.

private void buttonLoadPalette_Click(object sender, EventArgs e)
{
    if (openPaletteDialog.ShowDialog(this) != DialogResult.OK)
        return;

    SymbolPalette curSymbolPalette = null;
    string strFileName = openPaletteDialog.FileName;
    Match match = Regex.Match(strFileName, ".vss|.vsx|.vsd|.vdx",
                              RegexOptions.IgnoreCase | RegexOptions.RightToLeft);
    if (match.Success)
    {
        VisioStencilConverter converter = new VisioStencilConverter(strFileName, this);
        converter.ShowProgressDialog = true;
        curSymbolPalette = converter.Convert();
        if (curSymbolPalette != null)
            paletteGroupBar1.AddPalette(curSymbolPalette);
    }
    else
    {
        using (FileStream iStream = new FileStream(strFileName, FileMode.Open, FileAccess.Read))
        {
            try
            {
                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);
            }
        }
    }
}

Saving the Active Palette

You can save the currently active palette of the PaletteGroupBar window by serializing it as a .edp file. The PaletteGroupBar.CurrentSymbolPalette property returns the selected palette.

Before running the code below:

Add a SaveFileDialog control named savePaletteDialog to the form.
Set its Filter property to: WinForms Diagram Palettes|*.edp|All files|*.*
Add a button whose click handler calls the code below. Add using System.IO; and using System.Runtime.Serialization.Formatters.Binary; if they are not present.

private void buttonSavePalette_Click(object sender, EventArgs e)
{
    if (savePaletteDialog.ShowDialog(this) != DialogResult.OK)
        return;

    SymbolPalette symbolPalette = paletteGroupBar1.CurrentSymbolPalette;
    string strSavePath = savePaletteDialog.FileName;
    if (symbolPalette != null)
    {
        using (FileStream fStream = new FileStream(strSavePath, FileMode.OpenOrCreate, FileAccess.Write))
        {
            BinaryFormatter formatter = new BinaryFormatter();
            formatter.Serialize(fStream, symbolPalette);
        }
    }
}

Palette Groupbar And GroupView

Adding Shapes by Clicking the Diagram Page

WinForms 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.

C#
VBNET
//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

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

Sample Link

To view a sample:

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

Preview for Symbol Palette Item

WinForms Diagram control 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:

C#
VBNET
//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:

C#
VBNET
//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:

Open the Syncfusion® Dashboard.
Click the Windows Forms drop-down list and select Run Locally Installed Samples.
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.

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

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 WinForms 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 that allows users to set or modify properties of the selected object or the model. The Property Editor provides an easy interface for setting and viewing property values.

Add a Diagram control named diagram1 and a Property Editor named propertyEditor1 to the form before running the samples below.

Property	Description
Diagram	Gets or sets the diagram that this property editor is attached to. The property editor receives events from the diagram when the current selection changes and updates the object displayed in the grid.
PropertyGrid	Gets the reference to the underlying `System.Windows.Forms.PropertyGrid` for advanced styling.
ShowCombo	Gets or sets whether the toolbar combo list is visible on top of the grid. Default value is true.

ProductName and ProductVersion are read-only properties inherited from System.Windows.Forms.Control and cannot be set in the property editor.

The following code example shows how to style the Property Editor. Add using System.Drawing; if it is not already present.

this.propertyEditor1.PropertyGrid.BackColor = Color.FromArgb(227, 239, 255);
this.propertyEditor1.PropertyGrid.CommandsBackColor = Color.FromArgb(227, 239, 255);
this.propertyEditor1.PropertyGrid.CommandsForeColor = Color.MidnightBlue;
this.propertyEditor1.PropertyGrid.Font = new Font("Arial", 8.25f, FontStyle.Regular, GraphicsUnit.Point);
this.propertyEditor1.PropertyGrid.HelpBackColor = Color.FromArgb(227, 239, 255);
this.propertyEditor1.PropertyGrid.HelpForeColor = Color.MidnightBlue;
this.propertyEditor1.PropertyGrid.LineColor = Color.FromArgb(185, 216, 255);
this.propertyEditor1.PropertyGrid.ViewBackColor = Color.FromArgb(227, 239, 255);
this.propertyEditor1.PropertyGrid.ViewForeColor = Color.MidnightBlue;
this.propertyEditor1.ShowCombo = true;
this.propertyEditor1.Diagram = diagram1;

Property Editor

Search docs

Ask Syncfusion AI Assistant

Search docs

Ask Syncfusion AI Assistant

Supported Controls in Windows Forms Diagram

Overview Control

Properties

Standard WinForms properties

Events

PaletteGroupBar and GroupView

Properties

Methods

Events

Dynamically adding a Symbol Palette into PaletteGroupBar

Saving the Active Palette

Adding Shapes by Clicking the Diagram Page

Preview for Symbol Palette Item

Use Case Scenario

Enabling Preview Support

Document Explorer

Property Editor