Context menu support for Stencil in WPF Diagram (SfDiagram)

6 Aug 20219 minutes to read

Stencil includes some default context menu items to make it easier to execute some frequently used stencil symbol commands.

Default context menu

Context menu items can be enabled or disabled by adding or removing the ContextMenu constraint from
StencilConstraints property. By default, context menu items will be displayed with Cut, Copy, and Paste menu items.

  • C#
  • //Enables the the symbols reordering.
    stencil.StencilConstraints |= StencilConstraints.ContextMenu;
    
    //Disables the symbols reordering.
    stencil.StencilConstraints &= ~StencilConstraints.ContextMenu;

    Symbol ContextMenu

    Custom context menu

    You can define some additional menu items to the stencil symbols by using Menu property of Stencil class. Those additional menu items must be defined and added to MenuItems collection.

    The following properties should be added to custom context menu items of stencil symbols.

    • Content - allows you to set Content for the context menu item.
    • Icon - allows you to set icon for the context menu item.
    • Command - allows you to define command for context menu item.
    • CommandParameter - allows you to define command parameter value to execute command for the context menu item.
    • IsSeparator - allows you to define the horizontal lines that separate the menu items from icon position.
  • C#
  • SfDiagram diagram = new SfDiagram();
    Stencil BasicStencil = new Stencil() { ShowDisplayModeToggleButton = false, ShowSearchTextBox = false, ExpandMode = ExpandMode.All, Constraints = StencilConstraints.Default | StencilConstraints.AllowDragDrop };
    
    BasicStencil.SymbolGroups = new SymbolGroups()
    {
        new SymbolGroupProvider()
        {
            MappingName = "Key",
        },
    };
    
    BasicStencil.Menu = new DiagramMenu()
    {
        MenuItems = new ObservableCollection<DiagramMenuItem>()
        {
            new DiagramMenuItem()
            {
                Content = "Cut",
                IsSeparator = true,
                Command = StencilCommands.Cut,
                Icon = @"pack://application:,,,/Icons/Cut.png",
            },
    
            new DiagramMenuItem()
            {
                Content = "Copy",
                IsSeparator = true,
                Command = StencilCommands.Copy,
                Icon = @"pack://application:,,,/Icons/Copy.png"
            },
    
            new DiagramMenuItem()
            {
                Content = "Paste",
                IsSeparator = true,
                Command = StencilCommands.Paste,
                CommandParameter = this,
                Icon = @"pack://application:,,,/Icons/Paste.png"
            },
    
            new DiagramMenuItem()
            {
                Content = "Delete",
                IsSeparator = true,
                Command = StencilCommands.Delete,
                Icon = @"pack://application:,,,/Icons/Delete.png"            
            },
    
            new DiagramMenuItem()
            {
                Content = "Rename",
                IsSeparator = true,
                Command = RenameCommand,
                Icon = @"pack://application:,,,/Icons/Rename.png",
            },
        },
    };
    
    BasicStencil.SymbolSource = new SymbolCollection()
    {
        new NodeViewModel()
        {
            UnitWidth = 100,
            UnitHeight = 100,
            Shape = this.Resources["Ellipse"],
            Key = "Basic Shapes",
        },
                          
       new SymbolViewModel()
       {
            Symbol = "Diamond",
            Key = "Basic Shapes",
            SymbolTemplate = this.Resources["Diamond"] as DataTemplate,
        },
    };

    Symbol Custom ContextMenu

    You can define specific menu items to each stencil symbols by using the Menu property of symbols.

  • C#
  • BasicStencil.SymbolSource = new SymbolCollection()
    {
        new NodeViewModel()
        {
            UnitWidth = 100,
            UnitHeight = 100,
            Shape = this.Resources["Ellipse"],
            Key = "Basic Shapes",
            Menu = new DiagramMenu()
            {
                MenuItems = new ObservableCollection<DiagramMenuItem>()
                {
                    new DiagramMenuItem()
                    {
                        Content = "Cut",
                        Command = StencilCommands.Cut,
                        CommandParameter = this,
                        Icon = @"pack://application:,,,/Icons/Cut.png",
                    },
                },
            },
        },
                          
        new SymbolViewModel()
        {
            Symbol = "Diamond",
            Key = "Basic Shapes",
            SymbolTemplate = this.Resources["Diamond"] as DataTemplate,
            Menu = new DiagramMenu()
            {
                MenuItems = new ObservableCollection<DiagramMenuItem>()
                {
                    new DiagramMenuItem()
                    {
                        Content = "Delete",
                        Command = StencilCommands.Delete,
                        CommandParameter = this,
                        Icon = @"pack://application:,,,/Icons/Delete.png",
                    },
                },
            },
        },
    
        new NodeViewModel()
        {
            UnitWidth = 100,
            UnitHeight = 100,
            Shape = this.Resources["Rectangle"],
            Key = "Basic Shapes",
        },
    };

    Symbol Custom ContextMenu

    View Sample in GitHub