Symbol Palette

The Symbol Palette control displays node shapes and allows a user to drag and drop symbols onto diagrams. It supports grouping and filtering symbols. It allows users to classify items as groups, so they can be navigated easily. Also, custom shapes can be added to the Symbol Palette.

Methods for SymbolGroups in SymbolPalette:

Name Parameters Return Type Description Reference Links
Add(SymbolPaletteGroup) SymbolPaletteGroup Void Adds the SymbolPaletteGroup to the SymbolPalette Symbol Groups
Remove(SymbolPaletteGroup) SymbolPaletteGroup Void Removes the SymbolPaletteGroup from SymbolPalette Symbol Groups
RemoveAt(int) Int Void Removes the SymbolPaletteGroup from SymbolPalette at the given index Symbol Groups
Clear() Null Void Clears all the SymbolPaletteGroups from the SymbolPalette Symbol Groups

Methods for SymbolFilters in SymbolPalette:

Name Parameters Return Type Description Reference Links
Add(SymbolPaletteFilter) SymbolPaletteFilter Void Adds the SymbolPaletteFilter to the SymbolPalette Symbol Filters
Remove(SymbolPaletteFilter) SymbolPaletteFilter Void Removes the SymbolPaletteFilter from the SymbolPalette Symbol Filters
RemoveAt(int) Int Void Removes the SymbolPaletteFilter from the SymbolPalette at the given index Symbol Filters_Symbol_Groups
Clear() Null Void Clears all the SymbolPaletteFilter from the SymbolPalette Symbol Filters

Enabling/Disabling Symbol Palette

The Symbol Palette can be displayed by setting the IsSymbolPaletteEnabled property to true. By default, this property is disabled.

The following code can be used to enable the Symbol Palette.

  • xaml
    • <UserControl x:Class="SilverlightApplication1.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  Height="400" Width="600"

xmlns:sfdiagram="clr-namespace:Syncfusion.Windows.Diagram; assembly=Syncfusion.Diagram.Silverlight" 
	
	xmlns:local="clr-namespace:SilverlightApplication1">

<Grid Name="diagramgrid">

    <sfdiagram:DiagramControl IsSymbolPaletteEnabled="True">

    </sfdiagram:DiagramControl>

</Grid>

</UserControl>
  • c#
    • DiagramControl diagramcontrol = new DiagramControl();

diagramcontrol.IsSymbolPaletteEnabled = true;
  • vbnet
    • Dim diagramcontrol As New DiagramControl()

diagramcontrol.IsSymbolPaletteEnabled = True

    Symbol Palette

    Preview for Symbol Palette Item

    Essential Diagram for Silverlight provides preview support for Symbol Palette. When you drag an item from Symbol Palette to Diagram View, Preview of the dragged item will be displayed. You can enable or disable the preview support. You can also customize the preview.

    Use Case Scenario

    This feature displays a preview of the item you drag from Symbol Palette, thus enables you to identify the item you are dragging from the symbol palette to Diagram view.

    Properties

    Property Description Type Data Type Reference links
    ShowPreview Gets or sets a value indicating whether preview is enabled.The default value is true. Dependency property Boolean NA
    PreviewBrush Gets or sets a value for preview content. Dependency property Brush NA
    PreviewSize Gets or sets the size of the preview brush. Dependency property Size NA

    Enabling Preview Support

    To enable preview for the dragged item from Symbol Palette, set the ShowPreview property of SymbolPalette to true. To disable preview set this to false. By default this is set to true.

    Following code example illustrates how to enable preview support:

  • c#
    • DiagramControl diagramControl1 = new DiagramControl();

diagramControl1.SymbolPalette.ShowPreview = true;
  • vbnet
    • Dim diagramControl1 As New DiagramControl()

diagramControl1.SymbolPalette.ShowPreview = true

    Preview for Symbol Palette Item

    Change the preview content using PreviewBrush

    You can customize the preview content using the PreviewBrush property of SymbolPaletteItem

    Following code example illustrates how to customize preview content:

  • c#
    • DiagramControl diagramControl1 = new DiagramControl();

(diagramControl1.SymbolPalette.SymbolGroups[0].Items[0] as    SymbolPaletteItem).PreviewBrush = Brushes.CornflowerBlue;
  • vbnet
    • Dim diagramControl1 As New DiagramControl()

TryCast(diagramControl1.SymbolPalette.SymbolGroups(0).Items(0),  SymbolPaletteItem).PreviewBrush = Brushes.CornflowerBlue

    Customized Preview

    Changing the size of the PreviewBrush

    You can customize the size of the preview content using the PreviewSize property of SymbolPaletteItem

    The following code illustrates how to customize the size of the preview content:

  • c#
    • DiagramControl diagramControl1 = new DiagramControl();

(diagramControl1.SymbolPalette.SymbolGroups[0].Items[0] as SymbolPaletteItem).PreviewBrush = new SolidColorBrush(Colors.Blue);

(diagramControl1.SymbolPalette.SymbolGroups[0].Items[0] as SymbolPaletteItem).PreviewSize = new Size(100, 100);
  • vbnet
    • Dim diagramControl1 As New DiagramControl()

TryCast(diagramControl1.SymbolPalette.SymbolGroups(0).Items(0), SymbolPaletteItem).PreviewBrush = New SolidColorBrush(Colors.Blue)

TryCast(diagramControl1.SymbolPalette.SymbolGroups(0).Items(0), SymbolPaletteItem).PreviewSize = New Size(100, 100)

    Customized Preview

    Symbol Filters

    A Symbol Palette filter can be added to the Symbol Palette control, using the SymbolFilters property, so that only desired Symbol Palette groups get displayed. The SetFilterIndexes property is used to specify the index value of the filters for which the group is to be displayed. The filter names are specified integer values, with the first filter index starting from 0. Based on the filter indexes specified for that particular group, the visibility of the group is controlled. So the group gets displayed only when any of the specified filter names are selected.

    The following lines of code can be used to specify the Symbol Palette filter of the Symbol Palette Group.

  • c#
    • SymbolPaletteFilter sfilter = new SymbolPaletteFilter();

    sfilter.Label = "Custom";

    diagramControl1.SymbolPalette.SymbolFilters.Add(sfilter);

    //SymbolPaletteGroup creates a group and assigns a specific filter index.

    SymbolPaletteGroup s = new SymbolPaletteGroup();

    s.HeaderName = "Custom";

    SymbolPalette.SetFilterIndexes(s, new List<int>() { 0,7 });

    diagramControl1.SymbolPalette.SymbolGroups.Add(s);
  • vbnet
    • Dim sfilter As New SymbolPaletteFilter()

    sfilter.Label = "Custom"

    diagramControl1.SymbolPalette.SymbolFilters.Add(sfilter)

    'SymbolPaletteGroup creates a group and assigns a specific filter index.

    Dim s As New SymbolPaletteGroup()

	s.HeaderName = "Custom"

	SymbolPalette.SetFilterIndexes(s, New List(Of Integer) (New Integer() {0, 7}))

	diagramControl1.SymbolPalette.SymbolGroups.Add(s)

    This adds a new empty group named “Custom” and creates a filter for it.

    Symbol Palette Filter

    The SetFilterIndexes property specifies the index value for the group as 0,4, which implies that this group should be displayed when the filter index is 0 (“All”) or 4 (“Custom”).

    Remove SymbolPaletteFilters

    Like SymbolPaletteGroups, the SymbolPaletteFilters are also indexed from 0. The index 0 refers to the filter All. The index 1 refers to the filter Shapes and so on. The following table lists the filters with their index numbers.

    Filter name Index
    All 0
    Shapes 1
    Connectors 2
    Flowchart 3
    Custom Shapes 4
    Electrical Shapes 5

    1.Removing filters and groups named Shapes, Custom Shapes and Electrical Shapes

    Use the following code to remove the filters and groups named Shapes, Custom Shapes and Electrical Shapes:

  • c#
    • DiagramControl diagramControl = new DiagramControl();

diagramControl.SymbolPalette.SymbolGroups.Remove(diagramControl.SymbolPalette.SymbolGroups[4]);

diagramControl.SymbolPalette.SymbolGroups.Remove(diagramControl.SymbolPalette.SymbolGroups[3]);

diagramControl.SymbolPalette.SymbolGroups.Remove(diagramControl.SymbolPalette.SymbolGroups[0]);

diagramControl.SymbolPalette.SymbolFilters.Remove(diagramControl.SymbolPalette.SymbolFilters[5]);

diagramControl.SymbolPalette.SymbolFilters.Remove(diagramControl.SymbolPalette.SymbolFilters[4]);

diagramControl.SymbolPalette.SymbolFilters.Remove(diagramControl.SymbolPalette.SymbolFilters[1]);
  • vbnet
    • Dim diagramControl As New DiagramControl()

diagramControl.SymbolPalette.SymbolGroups.Remove(diagramControl.SymbolPalette.SymbolGroups(4))

diagramControl.SymbolPalette.SymbolGroups.Remove(diagramControl.SymbolPalette.SymbolGroups(3))

diagramControl.SymbolPalette.SymbolGroups.Remove(diagramControl.SymbolPalette.SymbolGroups(0))

diagramControl.SymbolPalette.SymbolFilters.Remove(diagramControl.SymbolPalette.SymbolFilters(5))

diagramControl.SymbolPalette.SymbolFilters.Remove(diagramControl.SymbolPalette.SymbolFilters(4))

diagramControl.SymbolPalette.SymbolFilters.Remove(diagramControl.SymbolPalette.SymbolFilters(1))

    Run the application. The following output is displayed and the groups and filters are removed.

    Palette with Groups and Filters removed

    Symbol Groups

    A SymbolPalette group is a collection of SymbolPalette items. It is used to group the items in the SymbolPalette control based on classifications provided. The SymbolPalette group can be added to the SymbolPalette using the SymbolGroups property. The filter index for the new groups should always start from 6 as the first five indices are predefined for the existing groups.

    Use the following code to add a group to SymbolPalette:

  • c#
    • SymbolPaletteGroup group = new SymbolPaletteGroup();

group.HeaderName = "Custom";    

SymbolPalette.SetFilterIndexes(group, new List<int>() { 0, 6 });

dc.SymbolPalette.SymbolGroups.Add(group);
  • vbnet
    • Dim group As New SymbolPaletteGroup()

group.HeaderName = "Custom"

SymbolPalette.SetFilterIndexes(group, New List(Of Integer) (New Integer() {0, 6}))

diagramControl.SymbolPalette.SymbolGroups.Add(group)

    Run the application. A new empty group named Custom is added to the SymbolPalette.

    Removing SymbolPaletteGroups

    The SymbolPaletteGroups are indexed from 0. Therefore, the group with the name Shapes is indexed as 0, the group with the name Connectors is indexed as 1 and so on. The groups can be removed using their corresponding index values. The following table lists the groups with their index numbers.

    Group Name Index
    Shapes 0
    Connectors 1
    Flowchart 2
    Custom Shapes 3
    Electrical Shapes 4

    1.Removing filter and group named Electrical Shapes and refreshing the Filters.

    Use the following code to remove the filter and group named Electrical Shapes:

  • c#
    • DiagramControl diagramControl = new DiagramControl();

diagramControl.SymbolPalette.SymbolGroups.Remove(diagramControl.SymbolPalette.SymbolGroups[4]);        

diagramControl.SymbolPalette.SymbolFilters.Remove(diagramControl.SymbolPalette.SymbolFilters[5]);

// Refreshing the filters

foreach (SymbolPaletteGroup group in diagramControl.SymbolPalette.SymbolGroups)

    {

    List<int> indices = SymbolPalette.GetFilterIndexes(group) as List<int>;

    if (indices.Contains(5))

    {

    indices.Remove(5);

    SymbolPalette.SetFilterIndexes(group, indices);

    }



    if (indices.Contains(6))

    {

    indices.Remove(6);

    indices.Add(5);

    SymbolPalette.SetFilterIndexes(group, indices);

    }

}
  • vbnet
    • Dim diagramControl As New DiagramControl()

diagramControl.SymbolPalette.SymbolGroups.Remove(diagramControl.SymbolPalette.SymbolGroups(4))

diagramControl.SymbolPalette.SymbolFilters.Remove(diagramControl.SymbolPalette.SymbolFilters(5))

' Refreshing the filters

For Each group As SymbolPaletteGroup In diagramControl.SymbolPalette.SymbolGroups

Dim indices As List(Of Integer) = TryCast(SymbolPalette.GetFilterIndexes(group), List(Of Integer))

If indices.Contains(5) Then

indices.Remove(5)

SymbolPalette.SetFilterIndexes(group, indices)

End If


If indices.Contains(6) Then

indices.Remove(6)

indices.Add(5)

SymbolPalette.SetFilterIndexes(group, indices)

End If

Next group

    Run the application. The following output is displayed and the groups and filters are removed.

    Palette with Groups and Filters removed

    NOTE

    Whenever a filter is removed, the group containing the next filter index must be decremented by one to get the proper output as mentioned in the above code snippet.

    2.Removing all the groups from the palette

    To remove all the groups from the palette, the Clear method can be used. The following code illustrates the usage of Clear method.

  • c#
    • DiagramControl diagramControl = new DiagramControl();

diagramControl.SymbolPalette.SymbolGroups.Clear();
  • vbnet
    • Dim diagramControl As New DiagramControl()

diagramControl.SymbolPalette.SymbolGroups.Clear()

    Run the application. All the groups are removed from the SymbolPalette.

    Symbol Palette Item

    Symbol Palette items are contained in the Symbol Palette group. A Symbol Palette item does not restrict users to the type of content that can be added to it. A Symbol Palette item can be a text box, combo box, image, button, and so on.

    The Name property of the SymbolPaletteItem can be used to refer to the custom item being added in the NodeDrop event. The name of the SymbolPaletteItem becomes the name of the node.

    Methods for Creating a Symbol Palette Item:

    Method Description Parameters Return Type Reference links
    CreateSymbolPalette Creates a symbol palette item from the selection list. CreateSymbolPalette() SymbolPaletteItem N/A
    Creates a symbol palette item from the Selection List and places it into a symbol group, which is defined in the parameter. CreateSymbolPalette(SymbolPaletteGroup SymbolGroup) SymbolPaletteItem N/A
    Creates a Symbol Palette Item from the UIElement list and adds it into a given group. CreateSymbolPalette(SymbolPaletteGroup SymbolGroup, List[UIElement] GroupElements) SymbolPaletteItem N/A

    The following code snippet can be used to add a Symbol Palette item that has an image as its content.

  • c#
    •   SymbolPaletteGroup group = new SymbolPaletteGroup();

  group.HeaderName = "Custom";    

  SymbolPalette.SetFilterIndexes(group, new List<int>() { 0, 6 });

  dc.SymbolPalette.SymbolGroups.Add(group);

  SymbolPaletteItem item = new SymbolPaletteItem();

  Image i = new Image();

  BitmapImage bi3 = new BitmapImage ();

  bi3.BeginInit();

  bi3.UriSource = new Uri("Custom.png", UriKind.RelativeOrAbsolute);

  bi3.EndInit();

  i.Stretch = Stretch.Fill;

  i.Source = bi3;

  item.Content = i;

  group.Items.Add(item);
  • vbnet
    • Dim group As New SymbolPaletteGroup()

group.HeaderName = "Custom"

SymbolPalette.SetFilterIndexes(group, New List(Of Integer) (New Integer() {0, 6}))

diagramControl.SymbolPalette.SymbolGroups.Add(group)

Dim item As New SymbolPaletteItem()

Dim i As New Image()

Dim bi3 As New BitmapImage()

bi3.UriSource = New Uri("Custom.png", UriKind.RelativeOrAbsolute)

i.Stretch = Stretch.Fill

i.Source = bi3

item.Content = i

group.Items.Add(item)

    This adds the image content to the newly created Symbol Palette item that belongs to the
    Symbol Palette group named “Custom”.

    Custom Group and Item

    Adding a path as SymbolPaletteItem

    To give a path as SymbolPaletteItem you can either create a PathGeometry in code behind or set the Data property of the path to PathData property.

    1.The following code illustrates the adding of the path as SymbolPaletteItem using mini language geometry.

  • c#
    • // Adding Group in SymbolPalette

SymbolPaletteGroup group = new SymbolPaletteGroup();

group.HeaderName = "Shapes";           

diagramControl.SymbolPalette.SymbolGroups.Add(group);

//Adding a SymbolPaletteItem

SymbolPaletteItem item1 = new SymbolPaletteItem();

item1.Width = 50;

item1.Height = 50;

item1.Name = "item1";

//Initialising Path

Path path1 = new Path();

path1.Height = 40;

path1.Width = 40;

path1.Fill = new SolidColorBrush(Colors.Blue);

path1.Stretch = Stretch.Fill;

path1.Stroke = new SolidColorBrush(Colors.Red);

path1.StrokeThickness = 1;

path1.Margin = new Thickness(3);

//setting the path geometry to PathData

item1.PathData = "M200,239L200,200 240,239 280,202 320,238 281,279 240,244 198,279z";

//setting path as content of SymbolPaletteItem

item1.Content = path1;

group.Items.Add(item1);
  • vbnet
    • 'Adding Group in SymbolPalette

Dim group As New SymbolPaletteGroup()

group.HeaderName = "Shapes"

diagramControl.SymbolPalette.SymbolGroups.Add(group)

'Adding a SymbolPaletteItem

Dim item1 As New SymbolPaletteItem()

item1.Width = 50

item1.Height = 50

item1.Name = "item1"

'Initialising Path

Dim path1 As New Path()

path1.Height = 40

path1.Width = 40

path1.Fill = New SolidColorBrush(Colors.Blue)

path1.Stretch = Stretch.Fill

path1.Stroke = New SolidColorBrush(Colors.Red)

path1.StrokeThickness = 1

path1.Margin = New Thickness(3)

'setting the path geometry to PathData

item1.PathData = "M200,239L200,200 240,239 280,202 320,238 281,279 240,244 198,279z"

'setting path as content of SymbolPaletteItem

item1.Content = path1

group.Items.Add(item1)

    2.The following code illustrates the adding of path using Path Geometry.

  • c#
    • // Adding Group in SymbolPalette

SymbolPaletteGroup group = new SymbolPaletteGroup();

group.HeaderName = "Shapes";

diagramControl.SymbolPalette.SymbolGroups.Add(group);

//Adding a SymbolPaletteItem

SymbolPaletteItem item = new SymbolPaletteItem();

item.Width = 50;

item.Height = 50;

item.Name = "item";

//Initialising a Path

Path path = new Path();

//Initialising a PathGeometry

PathGeometry geo = new PathGeometry();

PathFigure pathfig = new PathFigure();

pathfig.StartPoint = new Point(0, 0);

//Adding line segments to path figure

LineSegment line = new LineSegment();

line.Point = new Point(-3, -7);

pathfig.Segments.Add(line);

line = new LineSegment();

line.Point = new Point(-3, -15);

pathfig.Segments.Add(line);

line = new LineSegment();

line.Point = new Point(3, -15);

pathfig.Segments.Add(line);

line = new LineSegment();

line.Point = new Point(3, -7);

pathfig.Segments.Add(line);

pathfig.IsClosed = true;

geo.Figures.Add(pathfig);

path.Data = geo;

path.Height = 40;

path.Width = 40;

path.Fill = new SolidColorBrush(Colors.Red);

path.Stretch = Stretch.Fill;

path.Stroke = new SolidColorBrush(Colors.Blue);

path.StrokeThickness = 1;

path.Margin = new Thickness(3);

//setting path as the content of SymbolPaletteItem

item.Content = path;

group.Items.Add(item);
  • vbnet
    • 'Adding Group in SymbolPalette

Dim group As New SymbolPaletteGroup()

group.HeaderName = "Shapes"

diagramControl.SymbolPalette.SymbolGroups.Add(group)

'Adding a SymbolPaletteItem

Dim item As New SymbolPaletteItem()

item.Width = 50

item.Height = 50

item.Name = "item"

'Initialising a Path

Dim path As New Path()

'Initialising a PathGeometry

Dim geo As New PathGeometry()

Dim pathfig As New PathFigure()

pathfig.StartPoint = New Point(0, 0)

'Adding line segments to path figure

Dim line As New LineSegment()

line.Point = New Point(-3, -7)

pathfig.Segments.Add(line)

line = New LineSegment()

line.Point = New Point(-3, -15)

pathfig.Segments.Add(line)

line = New LineSegment()

line.Point = New Point(3, -15)

pathfig.Segments.Add(line)

line = New LineSegment()

line.Point = New Point(3, -7)

pathfig.Segments.Add(line)

pathfig.IsClosed = True

geo.Figures.Add(pathfig)

path.Data = geo

path.Height = 40

path.Width = 40

path.Fill = New SolidColorBrush(Colors.Red)

path.Stretch = Stretch.Fill

path.Stroke = New SolidColorBrush(Colors.Blue)

path.StrokeThickness = 1

path.Margin = New Thickness(3)

'setting path as the content of SymbolPaletteItem

item.Content = path

group.Items.Add(item)

    Define Node, Port, Group definitions in SymbolPalette

    The following steps demonstrate how to specify a Node or Node with Port in SymbolPaletteItem:

    1. To add more than one port, a node is created.
    2. Then several ports are added to it.
    3. Create a SymbolPaletteItem and add the node as content for the SymbolPaletteItem.

    At runtime, Nodes that are added in the SymbolPalette can be dragged and dropped on the page. All the ports, and their properties will cloned and a new copy of the node will be created.

    C:/Users/riaj/Desktop/Ports.PNG

    Node with several Ports

    To Create a new Node

  • c#
    • Node node = new Node();

node.Width = 100;

node.Height = 100;

node.OffsetX = 200;

node.OffsetY = 200;

node.Background = new SolidColorBrush(Colors.Aqua);

AddMorePorts(node);

    To add more Ports

  • c#
    • private void AddMorePorts(Node node)

{

	Left = 10;

	Top = 10;

	for (int i = 0; i < 4; i++)

	{

		ConnectionPort port = new ConnectionPort();

		port.Left = Left;

		port.Top = Top;

		port.Node = node;

		node.Ports.Add(port);

		Left += 10;

		Top += 10;

	}

}

    Creating Groups and SymbolPaletteItems

  • c#
    • SymbolPaletteGroup group = new SymbolPaletteGroup();

group.Label = "Custom";

SymbolPalette.SetFilterIndexes(group, new List<int>()[] { 0, 6 }));

dc.SymbolPalette.SymbolGroups.Add(group);

SymbolPaletteItem item = new SymbolPaletteItem(); 

// Node added as SymbolPaletteItem's Content

item.Content = node ;

group.Items.Add(item);

    Define Group definition in SymbolPalette

    The groups can be given as SymbolPaletteItem’s content. At runtime, they can be Dragged and Dropped to create a clone of the group and its children which will be added on the page.

    C:/Users/riaj/Desktop/image10_91.png

    To drag and Drop Groups

    To create new Node and Groups

  • c#
    • public DiagramControl Control;

public DiagramModel Model;

public DiagramView View;

public Window1 ()

{

    Control = new DiagramControl ();

    Model = new DiagramModel ();

    View = new DiagramView ();

    Control.View = View;

    Control.Model = Model;

    View.Bounds = new Thickness(0, 0, 1000, 1000);



    Node n = new Node(Guid.NewGuid(), "Start");

    n.Shape = Shapes.FlowChart_Card;

    n.Level = 1;

    n.OffsetX = 150;

    n.OffsetY = 25;

    n.Width = 150;

    n.Height = 75;

    Node n1 = new Node(Guid.NewGuid(), "End");

    n1.Shape = Shapes.RoundedRectangle;

    n1.Level = 1;

    n1.OffsetX = 350;

    n1.OffsetY = 325;

    n1.Width = 100;

    n1.Height = 75;

    Model.Nodes.Add(n);

    Model.Nodes.Add(n1);



    Group g = new Group(Guid.NewGuid(), "group1");

    g.AddChild(n);

    g.AddChild(n1);

    Model.Nodes.Add(g);

}

    To create new SymbolPalette Group and Item

  • c#
    • SymbolPaletteGroup group = new SymbolPaletteGroup();

group.Label = "Custom";

SymbolPalette.SetFilterIndexes(group, new List<int> ()[] { 0, 6 }));

dc.SymbolPalette.SymbolGroups.Add(group);

SymbolPaletteItem item = new SymbolPaletteItem(); 

// Group added as SymbolPaletteItem's Content

item.Content = g ;

group.Items.Add(item);

    Customizing the Symbol Palette

    The appearance of the symbol palette can be customized to suit any application. Several properties have been provided in the SymbolPalette class to enable its customization.

    The following properties can be used to customize the Symbol Palette in your application.

    Property Description Type of the property Value it accepts Any other dependencies/ sub properties associated
    Background Specifies the background color of the Symbol Palette.The default color is "Beige". Dependency property Brush No
    BorderThickness Gets or sets the border thickness of the Symbol Palette.The default value is 1. Dependency property Thickness No
    BorderBrush Specifies the border color of the Symbol Palette.The default color is "Brown". Dependency property Brush No
    SymbolPaletteGroupBackground Specifies the background color of the Symbol Palette Group.The default color is "Bisque ". Dependency property Brush No
    SymbolPaletteGroupForeground Specifies the foreground color of the Symbol Palette Group.The default color is "SaddleBrown" Dependency property Brush No
    SymbolPaletteGroupBorderBrush Specifies the border color of the Symbol Palette Group.The default color is "Chocolate" Dependency property Brush No
    ItemBorderThickness Gets or sets the border thickness of the Symbol Palette Item.The default value is 1. Dependency property Thickness No
    ItemCornerRadius Gets or sets the corner radius of the Symbol Palette Item.The default value is 2. Dependency property CornerRadius No
    ItemMouseOverBorderBrush Specifies the border color of the Symbol Palette Item over which the mouse pointer rests.The default value is "Orange". Dependency property Brush No
    ItemCheckedBorderBrush Specifies the border color of the Symbol Palette Item that is selected.The default value is "Red". Dependency property Brush No
    ItemCheckedMouseOverBorderBrush Specifies the border color of the selected Symbol Palette Item over which the mouse pointer rests.The default value is "Green". Dependency property Brush No
    FilterSelectorBackground Specifies the background color of the Symbol Palette Filter.The default value is "Chocolate". Dependency property Brush No
    FilterSelectorForeground Specifies the foreground color of the Symbol Palette Filter.The default value is "DarkSlateGray". Dependency property Brush No
    FilterSelectorBorderThickness Gets or sets the border thickness of the Symbol Palette FilterThe default value is (0,0,0,1). Dependency property Thickness No
    FilterSelectorMouseOverForeground Specifies the foreground color of the Symbol Palette Filter over which the mouse pointer rests.The default value is "OldLace". Dependency property Brush No
    FilterSelectorBorderBrush Specifies the border color of the Symbol Palette FilterThe default value is "Chocolate". Dependency property Brush No
    PopUpBackground Specifies the background color of the Symbol Palette PopUp.The default value is "WhiteSmoke". Dependency property Brush No
    PopUpForeground Specifies the foreground color of the Symbol Palette PopUp.The default value is "DarkSlateGray". Dependency property Brush No
    PopUpBorderThickness Gets or sets the border thickness of the Symbol Palette PopUp.The default value is (0,1,1,1). Dependency property Thickness No
    PopUpMouseOverBrush Specifies the background color of the Symbol Palette PopUp Item over which the mouse pointer restsThe default value is "LightSalmon". Dependency property Brush No
    PopUpBorderBrush Specifies the border color of the Symbol Palette PopUp.The default value is "Chocolate". Dependency property Brush No
    PopUpLeftColumnBackground Specifies the background color of the Check Box Column in the Symbol Palette PopUpThe default value is "LightGray". Dependency property Brush No
    CheckerBackground Specifies the the background color of the Check Boxes in the Symbol Palette PopUpThe default value is "Bisque". Dependency property Brush No
    CheckerBorderBrush Specifies the the border color of the Check Boxes in the Symbol Palette Pop Up.The default value is "DarkSlateGray". Dependency property Brush No
    CheckerTickBrush Specifies the Tick color of the selected Check Box in the Symbol Palette PopUpThe default value is "DarkSlateGray". Dependency property Brush No

    The following code example illustrates the setting of the Symbol Palette properties.

  • c#
    • DiagramControl diagramControl = new DiagramControl(); 

diagramControl.SymbolPalette.BorderThickness = new Thickness(2);

diagramControl.SymbolPalette.BorderBrush = Brushes.MidnightBlue;

diagramControl.SymbolPalette.Background = Brushes.Blue; 

diagramControl.SymbolPalette.SymbolPaletteGroupBackground = Brushes.DarkBlue; 

diagramControl.SymbolPalette.SymbolPaletteGroupForeground = Brushes.White;

diagramControl.SymbolPalette.SymbolPaletteGroupBorderBrush = Brushes.SlateBlue;

diagramControl.SymbolPalette.FilterSelectorBackground = Brushes.SkyBlue;

diagramControl.SymbolPalette.FilterSelectorForeground = Brushes.White;

diagramControl.SymbolPalette.FilterSelectorBorderBrush = Brushes.Blue; 

diagramControl.SymbolPalette.FilterSelectorBorderThickness = new Thickness(0);

diagramControl.SymbolPalette.CheckerTickBrush = Brushes.White;

diagramControl.SymbolPalette.CheckerBorderBrush = Brushes.MidnightBlue;

diagramControl.SymbolPalette.CheckerBackground = Brushes.LightBlue; 

diagramControl.SymbolPalette.PopUpItemMouseOverBrush = Brushes.CornflowerBlue;

diagramControl.SymbolPalette.PopUpBorderBrush = Brushes.MidnightBlue;

diagramControl.SymbolPalette.ItemBorderThickness = new Thickness(2);
  • vbnet
    • Dim diagramControl As New DiagramControl()

diagramControl.SymbolPalette.BorderThickness = New Thickness(2)

diagramControl.SymbolPalette.BorderBrush = Brushes.MidnightBlue

diagramControl.SymbolPalette.Background = Brushes.Blue

diagramControl.SymbolPalette.SymbolPaletteGroupBackground = Brushes.DarkBlue

diagramControl.SymbolPalette.SymbolPaletteGroupForeground = Brushes.White

diagramControl.SymbolPalette.SymbolPaletteGroupBorderBrush = Brushes.SlateBlue

diagramControl.SymbolPalette.FilterSelectorBackground = Brushes.SkyBlue

diagramControl.SymbolPalette.FilterSelectorForeground = Brushes.White

diagramControl.SymbolPalette.FilterSelectorBorderBrush = Brushes.Blue

diagramControl.SymbolPalette.FilterSelectorBorderThickness = New Thickness(0)

diagramControl.SymbolPalette.CheckerTickBrush = Brushes.White

diagramControl.SymbolPalette.CheckerBorderBrush = Brushes.MidnightBlue

diagramControl.SymbolPalette.CheckerBackground = Brushes.LightBlue

diagramControl.SymbolPalette.PopUpItemMouseOverBrush = Brushes.CornflowerBlue

diagramControl.SymbolPalette.PopUpBorderBrush = Brushes.MidnightBlue

diagramControl.SymbolPalette.ItemBorderThickness = New Thickness(2)

    The following screen shot illustrates the various customization options that are available for the Symbol Palette Item, Group and Filter Selector.

    Symbol Palette Item, Group and Filter Selector Customization Properties

    The following screen shot illustrates the various customization options available for the Symbol Palette PopUp.

    Symbol Palette PopUp Customization Properties

    SymbolPaletteSerialization

    Serialization is the process of saving and retrieving the SymbolPalette groups and items. Essential Diagram WPF supports saving the SymbolPalette as a XAML file. This load and save feature allows you to save the SymbolPalette for future use. You can continue working on their page by loading the appropriate XAML file.

    SymbolPaletteSerialization feature provides an option to save and load the SymbolPalette, SymbolPalette groups, elements and items in diagram control. So any item can be customised and imported onto the SymbolPalette.

    • User can easily Save/Load the SymbolPalette
    • User can Save/Load the SymbolPaletteGroup
    • User can Save/Load the SymbolPaletteItem
    Method Description Parameters Return Type Reference links
    SaveSymbolPalette Displays the save dialog box to save the entire SymbolPallete(including all SymbolPalette groups) into XAML file. NA Void NA
    LoadSymbolPalette The existing SymbolPallete groups will be cleared and new groups will be added from selected Xaml file. NA Void NA
    SaveSymbolPaletteGroup Saves the Symbol Palette Group into Xaml file using the given SymbolPaletteGroup parameter SymbolPaletteGroup Void NA
    LoadSymbolPaletteGroup Displays the Load Dialogue Box to load the Symbol Palette Group from the selected Xaml file. NA Void NA
    SaveSymbolPaletteItem Saves the Symbol Palette Item into Xaml file using the given SymbolPaletteItem parameter. NA Void NA
    LoadSymbolPaletteItem Loads the SymbolPalette Item from the Xaml file. The Items are loaded in any given Symbol Palette Group using the SymbolPaletteGroup parameter. NA Void NA
    AppendSymbolPaletteGroup Checks whether a symbol palette group can be added to existing groups. SymbolPaletteGroup Boolean N/A
    FindByName Searches for the specified node based on its name and returns the one with the same name. String name Node N/A