How to implement color palette functionality using context menu in WPF Diagram (SfDiagram)?

WPF Diagram (SfDiagram) provides support for creating custom menu items and sub-menu items using the DiagramMenuItem class. To implement a custom color palette, you simply need to create an instance of a Grid and a custom menu item, adding the Grid as the content of the custom menu item. In this example, we have achieved a color palette within a sub-menu by placing buttons in a grid, organized neatly with a stack panel. Each button signifies a specific color, and when clicked, it dynamically changes the color of the selected node.

Code snippet:

//Initialize the new custom Menu for color palette grid
DiagramMenuItem ChangeColor = new DiagramMenuItem()
{
   Content = "Change Color",
};

//Initialize grid for color palette container
Grid colorgrid = new Grid();

//Rows definition for the grid
RowDefinition firstrowdef = new RowDefinition() { Height = new GridLength(25) };
RowDefinition secondrowdef = new RowDefinition() { Height = new GridLength(25) };
colorgrid.RowDefinitions.Add(firstrowdef);
colorgrid.RowDefinitions.Add(secondrowdef);

//Creating stack panels to the grid
StackPanel firstrow = new StackPanel() { Orientation = Orientation.Horizontal };
StackPanel secondrow = new StackPanel() { Orientation = Orientation.Horizontal };

Grid.SetRow(firstrow, 0);
Grid.SetRow(secondrow, 1);

//Buttons for the grid control 
Button redcolor = new Button() { Width = 20, Height = 20, Margin = new Thickness(20, 0, 0, 0) };
redcolor.Background = new SolidColorBrush(Colors.Red);
redcolor.Click += Redcolor_Click;

Button greencolor = new Button() { Width = 20, Height = 20, Margin = new Thickness(20, 0, 0, 0) };
greencolor.Background = new SolidColorBrush(Colors.Green);
greencolor.Click += Greencolor_Click;

Button yellowcolor = new Button() { Width = 20, Height = 20, Margin = new Thickness(20, 0, 0, 0) };
yellowcolor.Background = new SolidColorBrush(Colors.Yellow);
yellowcolor.Click += Yellowcolor_Click;

//adding buttons to the stack panel
firstrow.Children.Add(redcolor);
firstrow.Children.Add(greencolor);
firstrow.Children.Add(yellowcolor);

Button bluecolor = new Button() { Width = 20, Height = 20, Margin = new Thickness(20, 0, 0, 0) };
bluecolor.Background = new SolidColorBrush(Colors.Blue);
bluecolor.Click += Bluecolor_Click;

Button blackcolor = new Button() { Width = 20, Height = 20, Margin = new Thickness(20, 0, 0, 0) };
blackcolor.Background = new SolidColorBrush(Colors.Black);
blackcolor.Click += Blackcolor_Click;

Button browncolor = new Button() { Width = 20, Height = 20, Margin = new Thickness(20, 0, 0, 0) };
browncolor.Background = new SolidColorBrush(Colors.Brown);
browncolor.Click += Browncolor_Click;

secondrow.Children.Add(bluecolor);
secondrow.Children.Add(blackcolor);
secondrow.Children.Add(browncolor);

//Adding stack panel to the grid
colorgrid.Children.Add(firstrow);
colorgrid.Children.Add(secondrow);

//Initialize the sub-menu item for color palette
DiagramMenuItem ColorsItem = new DiagramMenuItem()
{
   // Defines the content of menu item as grid
   Content = colorgrid,
};

ChangeColor.Items = new ObservableCollection<DiagramMenuItem>();
//Adding color palette menu item into diagram menu as to add sub-menu items.
ChangeColor.Items.Add(ColorsItem);

//Adding color palette menu item into diagram default menu.
Diagram.Menu.MenuItems.Add(ChangeColor);

View Sample in GitHub

Conclusion

I hope you enjoyed learning about How to Add Grid Control as a Context Menu Sub Item in the WPF Diagram(SfDiagram).
You can refer to our WPF Diagram feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!