Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Collapse]WinForms Controls
  Prerequisites
 [Expand]What's Installed
 [Expand]Build an Application
 [Collapse]Controls and Libraries
  [Expand]Forms and User Controls
  [Expand]Messages, Notifications and Dialogs
  [Expand]Editors and Simple Controls
  [Expand]Ribbon, Bars and Menu
  [Expand]Application UI Manager
  [Expand]Docking Library
  [Expand]Data Grid
  [Expand]Vertical Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Chart Control
  [Collapse]Diagrams
    Getting Started
   [Expand]Diagram Designer
    Diagram Control
   [Expand]End-User Interaction
   [Collapse]Diagram Items
     Shapes
     Default Shapes
     Connectors
     Images
     SVG Shapes
     Containers
   [Expand]Automatic Layout
   [Expand]Data Binding Functionality
    Themes and Styles
    Printing and Exporting
    Saving and Loading Diagrams
   [Expand]Examples
  [Expand]Gauges
  [Expand]Map Control
  [Expand]Scheduler
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Expand]Navigation Controls
  [Expand]Printing-Exporting
  [Expand]PDF Viewer
   Reporting
  [Expand]Snap
  [Expand]TreeMap Control
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Connectors

Connectors are lines that connect shapes. When any of two connected shapes is being moved, the connector moves with the shape.

Connectors are encapsulated by DiagramConnector class objects.

There are two connection types.

  • Point connection - a connector is glued to a specific connection point on a shape.

    To create the point connection in runtime:

    1. Select the Connector tool in the Ribbon menu or by pressing the CTRL+3 key combination.

    2. Hover over a shape's connection point so it becomes selected.

    3. Click and drag to create a connector.

    In code, the point connection is enabled by setting the DiagramConnector.BeginItemPointIndex/DiagramConnector.EndItemPointIndex property to the index of the desired shape's connection point.

  • Dynamic connection - a connector is glued to a connection point that is nearest to the connector's point of origin.

    To create the dynamic connection in runtime:

    1. Select the Connector tool in the Ribbon menu or by pressing the CTRL+3 key combination.

    2. Hover over a shape so it becomes selected.

    3. Click and drag to create a connector.

    In code, the dynamic connection is enabled by setting the DiagramConnector.BeginItemPointIndex/DiagramConnector.EndItemPointIndex property to -1.

A connector can have either connection type on either of its ends. The animation below illustrates two connection types.

According to the DiagramConnector.Type property, a connector can be:

  • Straight Line
  • Curve
  • Right angle.

A Straight Line connector with the dynamic connection type is glued to the center of a shape rather than to any of its connection points.

The connector's starting and ending points can be:

The connector can display arrows at the starting and ending points. Use the DiagramConnector.BeginArrow and DiagramConnector.EndArrow properties to choose arrow styles.

To display text, assign a text string to the DiagramConnector.Content property.

A connector's bending points are specified by the DiagramConnector.Points collection.

The DevExpress.Diagram.Core.Native.DiagramExtensionsCore.Connectors extension method returns the collection of connectors contained in the diagram. Using this method is more efficient than iterating through the DiagramControl.Items collection.

End-users can customize connectors in the Diagram Designer Control using the Properties Panel.

How would you rate this topic?​​​​​​​