Quick Command in WPF Diagram (SfDiagram)

8 Jun 20213 minutes to read

Define QuickCommand

Quick Commands are used to execute the commonly or frequently used commands around the Nodes, Connectors and Groups. There are 3 default Quick Commands for Nodes and Groups to execute Draw, Delete and Duplicate commands.For example, if you select the node then the quick command of the node will get visible.

frequently used commands around the Nodes

Define Custom QuickCommand

SfDiagram provides support to define custom quick command around the Nodes, Connectors and Groups.

<Style TargetType="Path" x:Key="QuickCommandstyle">
           <Setter Property="Stretch" Value="Fill"/>
           <Setter Property="Fill" Value="Black"/>
           <Setter Property="Stroke" Value="White"/>
// Element to represent the frequently used commands
            QuickCommandViewModel quick = new QuickCommandViewModel()
                // Outer part of quick command.
                Shape = this.Resources["Ellipse"],
               // appearence 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",
                Command = (Diagram.Info as IGraphInfo).Commands.Cut

            // Adding new QuickCommand object in Commands collection
            (Diagram.SelectedItems as SelectorViewModel).Commands = new QuickCommandCollection()

custom commands around the Nodes

Customize quick command appearance

Appearance of the QuickCommand can be customized by using Shape, ShapeStyle, Content and ContentTemplate properties.

custom appearance of quick command


By default QuickCommand will host on Node. VisibilityMode property is to define the host of the QuickCommand on either Node or Connector or both.


QuickCommand can be aligned relative to boundaries of the Node or segments of the Connector.

  • OffsetX and OffsetY property of QuickCommand is used to align the QuickCommand based on fractions. The default value is 0.5.
  • HorizontalAlignment and VerticalAlignment properties are used to align the quick commands for horizontal and vertical positions.
  • Margin is an absolute value used to add some blank space in any one of its four sides.

The Alignment of QuickCommand is similar to Annotation Alignment.

View Sample in GitHub

See Also