Context Menu in WPF Diagram control

29 Nov 20243 minutes to read

In graphical user interface (GUI), a ContextMenu is a type of Menu that appears when you perform right-click operation. Nested level of Context Menu items can be created. Diagram provided some in-built ContextMenu items and allows to define custom menu items.

The ContextMenu Constraint helps you to enable/disable the context menu. The following code illustrates how to enable/disable the default context menu items.

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

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

Diagram provides some default context menu items to ease the execution of some frequently used commands.

Default Menu

Apart from the default ContextMenu items, you can define some additional menu items by using Menu property of SfDiagram, Node and Connector. Those additional items have to be defined and added to MenuItems Property.
The Content property allows you to set Content for the context menu item.
The Icon property allows you to set icon for the context menu item.
The Command property of the Context menu item allows you to define command for it.
The IsSeparator property defines the horizontal lines that are used to separate the menu items. You cannot select the separators. You can enable separators to group the menu items using the IsSeparator property.

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

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

The default value of Menu property for Node and Connector is null.The following code example illustrates how to set ContextMenu and ContextMenuItems to Node.

C#
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);

Node Custom Menu

View Sample in GitHub

Events

MenuItemClickedEventwill invoke when you click the menu items. To explore about arguments, refer to MenuItemClickedEventArgs

The following code example illustrates how to define those events.

C#
(diagram.Info as IGraphInfo).MenuItemClickedEvent += 
	MainPage_MenuItemClickedEvent;

void MainPage_MenuItemClickedEvent(object sender, 
	MenuItemClickedEventArgs args)
{
	//Source – in which object Event get fired
    //Item - MenuItem
}

MenuOpening event will notify when you perform right click on Diagram/Node/Connector.To explore about arguments, refer to MenuOpeningEventArgs.

Context Menu in WPF Diagram (SfDiagram)

Default Context Menu

Customize Context Menu

Menu for Node and Connector

Events

See Also