Quick Command in WPF Diagram (SfDiagram)

11 Jan 20243 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.

Define Custom QuickCommand

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

XAML

<Style TargetType="Path" x:Key="QuickCommandstyle">
           <Setter Property="Stretch" Value="Fill"/>
           <Setter Property="Fill" Value="Black"/>
           <Setter Property="Stroke" Value="White"/>
        </Style>

C#

// 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()
            {
                quick
            };

Customize quick command appearance

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

NOTE

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

Alignment

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

How to create a quick command in diagram?

How to enable or disable QuickCommands?

How to hide specific default QuickCommands of Node?

How to Notify when diagramming object is duplicated with source?

How to remove the rotator thumb of the node?