Skip to main content

Create Runtime Diagram Designer

  • 2 minutes to read

When you add a DiagramControl to your application, only basic diagram customization operations are available to users at runtime. These include:

  • modifying shape text;
  • moving and deleting shapes;
  • cut/copy/paste operations;
  • undo/redo functionality.

Follow the steps below to create the Diagram Designer and enable additional diagram customization features. You can skip a step if the corresponding functionality is not required.

  1. Add the Ribbon menu.

    After dropping the DiagramControl onto the form, select Create Ribbon Menu from the control’s smart tag.

    Creating Designer

    The Ribbon menu is added to the top of the form with diagram-specific commands. These commands allow users to modify shape text attributes, create shape connectors, save/load diagrams to/from files, and so on.

    CustomDiagramDesigner-1-CreatedRibbon.png

    The corresponding method is DiagramControl.CreateRibbon.

    Note

    You can convert your form to the RibbonForm. The RibbonForm shows the name of the current document as the window’s title and can display the Ribbon’s Quick Access Toolbar.

  2. Add the Toolbox and Property Grid. The Toolbox allows users to add new diagram shapes, and the Property Grid allows users to configure a selected diagram item’s settings. Select the Create Toolbox and Property Grid smart tag item to add the the panels. This step also adds the DockManager functionality.

    CustomDiagramDesigner-2-CreatedPropertyGrid.png

    The corresponding method is DiagramControl.CreateDocking.

  3. Add the Pan and Zoom Panel to help users navigate large and complex diagrams. Select the Create Pan and Zoom panel item to generate a PanAndZoomDockPanel that contains a DiagramPanAndZoomControl.

    image