We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to create a quick command in WPF Diagram (SfDiagram)?

Platform: WPF |
Control: SfDiagram

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()

QuickCommand for deleting the item

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.

2X faster development

The ultimate WPF UI toolkit to boost your development speed.
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile