How to create a quick command in WPF Diagram?

Quick Command

Quick Commands are used to execute the commonly or frequently used commands around the Nodes, Connectors, and Groups. The Quick Commands are shown based on the selection of WPF Diagram (SfDiagram) elements.

The Appearance of the quick command can be customized with the Content, Shape, and ShapeStyle properties.

Refer to the following code example for creation of Quick Command.

// Element to represent the frequently used commands
QuickCommandViewModel quick = new QuickCommandViewModel()
{
   // Outer part of quick command and  it allows the path data
   Shape = this.Resources["Ellipse"],
   // appearance of shape.
   ShapeStyle = this.Resources["QuickCommandstyle"] as Style,
   //Inner part of quick command and it allows to host any UI elements
   Content ="M3.7399902,0L16,12.258972 28.26001,0 32,3.7399902 19.73999,16   32,28.258972 28.26001,32 16,19.73999 3.7399902,32 0,28.258972 12.26001,16  0,3.7399902z",
};

The Quick Command can be aligned relative to the node boundaries. It has Margin, OffsetX, OffsetY, HorizontalAlignment, and VerticalAlignmemt. It is quite tricky when all four alignments are used together but gives more control over alignment.

Refer to the following code example to position the Quick Commands around the node.

// Align the Quick Command based on the fractions X and Y-Axis
OffsetX = 1,
OffsetY = 0.5,
// It is an absolute value used to add some blank space in any one of its four sides.
Margin = new Thickness(30,0,0,0),

The action for the Quick Command can be assigned with the Command property. The Quick Command also has the CommandParameter and DragCommand properties.

// Assign Delete Command. Custom Command can also be assigned.
Command = (Diagram.Info as IGraphInfo).Commands.Delete

The Quick Commands should be added in the Commands property of SelectedItems.

Refer to the following code example to add quick command to the Commands property.

// Initialize the commands and adding new Quick Command in Commands collection
(Diagram.SelectedItems as SelectorViewModel).Commands = new QuickCommandCollection()
{
   quick
};

The VisibilityMode property will help to decide on whether the Quick Command is for Node or Connector or both. By default, it is shown to the Node alone.

View sample in GitHub.