Context Menu in WPF SfDiagram

18 Nov 20186 minutes to read

In graphical user interface (GUI), a ContextMenu is a type of Menu that appears on right-click. Nested-level Context Menu items can be created. WPF Diagram provides built-in ContextMenu items and lets you define custom menu items.

Default Context Menu

The ContextMenu constraint enables or disables the default context menu. The default value of GraphConstraints includes ContextMenu, so the context menu is enabled by default. The following code illustrates how to toggle the default context menu.

// Disable the context menu.
diagram.Constraints = GraphConstraints.Default & ~GraphConstraints.ContextMenu;

// Enable the context menu.
diagram.Constraints = GraphConstraints.Default | GraphConstraints.ContextMenu;

Diagram provides the following default context menu items to ease the execution of frequently used commands:

  • Cut
  • Copy
  • Paste
  • Select All

Default context menu on the diagram surface

Customize Context Menu

Apart from the default context menu items, you can add additional items by using the Menu property of SfDiagram, Node, and Connector. Add each new item to the MenuItems collection.

The DiagramMenuItem class exposes the following properties:

Property Description Type Default
Content Sets the label for the context menu item. object null
Icon Sets the icon shown next to the menu item. Accepts an ImageSource or a pack:// URI string for a project resource. object null
Command Sets the ICommand invoked when the item is clicked. Bind to IGraphInfo.Commands.* for built-in commands. ICommand null
IsSeparator When true, renders the item as a non-selectable horizontal line used to group menu items. bool false
Items Nested child DiagramMenuItems for sub-menus. IList<DiagramMenuItem> null

The following code example illustrates how to add custom context menu items to the Menu property of SfDiagram:

DiagramMenuItem menu = new DiagramMenuItem()
{
    Content = "Delete",
    Command = (diagram.Info as IGraphInfo).Commands.Delete,
    Icon = @"pack://application:,,,/delete.ico"
};
diagram.Menu.MenuItems.Add(menu);

Custom menu items appended to the diagram context menu

The default value of the Menu property for Node and Connector is null. The following code example illustrates how to set the Menu and MenuItems on a node. Add the .ico file to your project as a Resource, then reference it with the pack:// URI.

node.Constraints = node.Constraints | NodeConstraints.Menu;
node.Constraints = node.Constraints & ~NodeConstraints.InheritMenu;
node.Menu = new DiagramMenu();
node.Menu.MenuItems=new ObservableCollection<DiagramMenuItem>();
DiagramMenuItem mi = new DiagramMenuItem()
{
	Content = "Delete",
	Command = (diagram.Info as IGraphInfo).Commands.Delete,
	Icon = @"pack://application:,,,/delete.ico"
};
(node.Menu.MenuItems as ICollection<DiagramMenuItem>).Add(mi);

Custom context menu on a node

View Sample in GitHub

Events

The MenuItemClickedEvent fires when you click a menu item. The event arguments expose two properties: Source (the diagram object that raised the event) and Item (the clicked DiagramMenuItem). To explore about arguments, refer to MenuItemClickedEventArgs.

The following code example illustrates how to subscribe to that event:

(diagram.Info as IGraphInfo).MenuItemClickedEvent +=
    MainWindow_MenuItemClickedEvent;

private void MainWindow_MenuItemClickedEvent(object sender, MenuItemClickedEventArgs args)
{
    // Source - The diagram object that raised the event.
    // Item - The clicked DiagramMenuItem.
}

The MenuOpening event fires when you right-click on the diagram, a node, or a connector. To explore about arguments, refer to MenuOpeningEventArgs. To subscribe to it:

(diagram.Info as IGraphInfo).MenuOpening += MainWindow_MenuOpening;

private void MainWindow_MenuOpening(object sender, MenuOpeningEventArgs args)
{
    // Inspect args.Source / args.Args here, or set args.Cancel = true to suppress the menu.
}

See Also