Quick Command in WPF Diagram

18 Nov 20184 minutes to read

Define QuickCommand

Quick Commands are used to execute commonly used commands for the Nodes, Connectors and Groups. There are three default Quick Commands for Nodes and Groups to execute Draw, Delete and Duplicate commands.For example, if you select the node then the node’s QuickCommands become visible.

frequently used commands around the Nodes

Define Custom QuickCommand

WPF Diagram provides support to define custom QuickCommands for the Nodes, Connectors and Groups.

<ResourceDictionary.MergedDictionaries>
    <ResourceDictionary Source="/Syncfusion.SfDiagram.Wpf;component/Resources/BasicShapes.xaml"/>
</ResourceDictionary.MergedDictionaries>

<Style TargetType="Path" x:Key="QuickCommandstyle">
    <Setter Property="Stretch" Value="Fill"/>
    <Setter Property="Fill" Value="Black"/>
    <Setter Property="Stroke" Value="White"/>
</Style>
SfDiagram Diagram = new SfDiagram();

 // Element to represent the frequently used commands
QuickCommandViewModel quickcommand = new QuickCommandViewModel()
{
    // Outer part of quick command.
    Shape = this.Resources["Ellipse"],
    // appearence of the 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()
{
    quickcommand
};

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, QuickCommands are hosted on nodes. VisibilityMode property defines where the QuickCommand is hosted 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 QuickCommands horizontally and vertically.
  • 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.

<ResourceDictionary.MergedDictionaries>
    <ResourceDictionary Source="/Syncfusion.SfDiagram.Wpf;component/Resources/BasicShapes.xaml"/>
</ResourceDictionary.MergedDictionaries>

<Style TargetType="Path" x:Key="QuickCommandstyle">
    <Setter Property="Stretch" Value="Fill"/>
    <Setter Property="Fill" Value="Black"/>
    <Setter Property="Stroke" Value="White"/>
</Style>
SfDiagram Diagram = new SfDiagram();

QuickCommandViewModel quickcommand = new QuickCommandViewModel()
{
    OffsetX = 1,

    OffsetY = 1,

    HorizontalAlignment = HorizontalAlignment.Center,

    VerticalAlignment = VerticalAlignment.Center,

    Shape = this.Resources["Ellipse"],

    ShapeStyle = this.Resources["QuickCommandstyle"] as Style,

    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,

    Margin = new Thickness(20,20,0,0),
};

(Diagram.SelectedItems as SelectorViewModel).Commands = new QuickCommandCollection()
{
    quickcommand
};

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?