[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]Property Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Chart Control
  [Collapse]Diagrams
    Getting Started
   [Expand]Diagram Control
   [Collapse]End-User Interaction
     Shortcuts
   [Expand]Diagram Items
   [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]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Reporting
[Expand]Report and Dashboard Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

End-User Interaction

This document describes end-user operations available in the Diagram Control and Diagram Designer.

Tip

You can restrict end-user operations by setting the DiagramOptionsProtection.IsReadOnly property to true. Setting the desired DiagramOptionsProtection options to true overrides the IsReadOnly property.

Expanded Basic Actions

These operations available both in the Diagram Control and Diagram Designer.

Selecting items on the canvas

Select the Pointer tool in the Tools group of the Ribbon and click an item to select it or drag to draw a marquee over the items you want to select.

Copying

To copy the selected items, drag them while holding down the CTRL key or press the CTRL+C key combination to copy the selection to clipboard and then press the CTRL+V key combination to paste the clipboard content to the canvas.

Corresponding property: DiagramOptionsProtection.AllowCopyItems

Resizing an item

Select the item and drag a selection handle.

Corresponding property: DiagramOptionsProtection.AllowResizeItems

Moving an item

Select the item and use the arrow keys on your keyboard or drag with the mouse.

Corresponding property: DiagramOptionsProtection.AllowMoveItems

Rotating an item

Select the item and drag the rotation handle with the mouse.

Corresponding property: DiagramOptionsProtection.AllowRotateItems

Transforming a shape

Certain shapes display yellow handles when selected. Drag the handle to transform the shape.

Corresponding property: DiagramOptionsProtection.AllowChangeShapesParameter

Initiating text editing

Double-click an item or right-click it and select the Edit text menu item. To accept changes, press the ESC key or click anywhere on the canvas.

Corresponding property: DiagramOptionsProtection.AllowEditItems

Performing undo/redo operations

Press the CTRL+Z / CTRL+Y key combination.

Corresponding property: DiagramOptionsProtection.AllowUndoRedo

Changing the current zoom

Hold the CTRL button and rotate the mouse wheel.

Corresponding property: DiagramOptionsProtection.AllowZoom

Expanding/collapsing subordinate items

Click the expand-collapse button below a shape to show or hide the subordinate items.

Expanded Diagram Designer Actions

These operations are only available in the Diagram Designer.

Adding a shape to the canvas

Drag the shape from the Shapes Panel or select a drawing tool (Rectangle, Ellipse, Right Triangle, Hexagon) in the Tools group of the Ribbon and drag on the canvas to draw the corresponding shape.

Corresponding property: DiagramOptionsProtection.AllowAddRemoveItems

Adding a container to the canvas

Select the Container ribbon item on the Insert ribbon page.

Corresponding property: DiagramOptionsProtection.AllowAddRemoveItems

Resizing an item

Select the item and change the Size property in the Properties Panel.

Setting the DiagramOptionsProtection.AllowResizeItems property to false does not restrict this operation.

Moving an item

Select the item and change the Position property in the Properties panel.

Setting the DiagramOptionsProtection.AllowMoveItems property to false does not restrict this operation.

Rotating an item

Select the item and change the Angle property in the Properties panel.

Setting the DiagramOptionsProtection.AllowRotateItems property to false does not restrict this operation.

Changing the text within an item

Select the item and change the Text property within the Properties panel.

Setting the DiagramOptionsProtection.AllowEditItems property to false does not restrict this operation.

Formatting the text within an item

Select the item and use the Ribbon's Font and Paragraph groups to change the font family, color and size, make text bold, italic, underline or strikethrough and apply horizontal and vertical alignment.

Corresponding properties:

Adding a connector

Select the Connector tool in the Tools group of the Ribbon and drag on the canvas. For a detailed description of connecting shapes, see Connectors.

Corresponding property: DiagramOptionsProtection.AllowAddRemoveItems

Performing undo/redo operations

Click the corresponding button at the top of the Ribbon.

Corresponding property: DiagramOptionsProtection.AllowUndoRedo

Changing the current zoom

Use the zoom trackbar in the Bottom Panel.

Corresponding property: DiagramOptionsProtection.AllowZoom

Applying a theme to the diagram

Select the desired theme it in the Ribbon's Themes group on the Design page.

Corresponding property: DiagramOptionsProtection.AllowChangeTheme

Changing the color of an item

Select the item and pick the desired color using the Background and Stroke color pickers in the Ribbon's Shape Styles group on the Home page or choose a predefined style. You can also change the BackgroundColor, ForegroundColor and Stroke properties in the Properties panel.

Corresponding properties:

Expanded See Also

Is this topic helpful?​​​​​​​