SymbolPalette in WPF Diagram (classic)

5 May 202124 minutes to read

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

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 SymbolPalette. Symbol Filters
RemoveAt(int) Int Void Removes the SymbolPaletteFilter from SymbolPalette at the given index. Symbol Filters_Symbol_Groups
Clear() Null Void Clears all the SymbolPaletteFilter from the SymbolPalette. Symbol Filters

Enable/Disable SymbolPalette

The SymbolPalette 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 SymbolPalette.

  • XAML
  • <Window x:Class="WpfApplication1.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="EssentialDiagramWPF" Height="400" Width="600"
    
    xmlns:sfdiagram="clr-namespace:Syncfusion.Windows.Diagram;assembly=Syncfusion.Diagram.WPF" xmlns:local="clr-namespace:WpfApplication1">
    
        <Grid Name="diagramgrid">
    
            <sfdiagram:DiagramControl IsSymbolPaletteEnabled="True">
    
            </sfdiagram:DiagramControl>
    
        </Grid>
    
    </Window>
  • C#
  • DiagramControl diagramcontrol = new DiagramControl();
    
    diagramcontrol.IsSymbolPaletteEnabled = true;
  • VBNET
  • Dim diagramcontrol As New DiagramControl()
    
    diagramcontrol.IsSymbolPaletteEnabled = True

    Diagram-View_img54

    Preview for Symbol Palette Item

    Essential Diagram for WPF 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

    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

    Diagram-View_img55

    Preview of Dragged 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

    Diagram-View_img56

    Customized Preview Content

    Symbol Filters

    A SymbolPalette filter can be added to the SymbolPalette control, using the SymbolFilters property, so that only desired SymbolPalette 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 SymbolPalette filter of the SymbolPalette Group.

  • C#
  • SymbolPaletteFilter sfilter = new SymbolPaletteFilter();
    
    sfilter.Label = "Custom";
    
    dc.SymbolPalette.SymbolFilters.Add(sfilter);
    
    SymbolPaletteGroup group = new SymbolPaletteGroup();
    
    group.Label = "Custom";
    
    SymbolPalette.SetFilterIndexes(group, new Int32Collection(new int[] { 0, 6 }));
    
    dc.SymbolPalette.SymbolGroups.Add(s);
  • VBNET
  • Dim sfilter As New SymbolPaletteFilter()
    
    sfilter.Label = "Custom"
    
    dc.SymbolPalette.SymbolFilters.Add(sfilter)
    
    Dim group As New SymbolPaletteGroup()
    
    group.Label = "Custom"
    
    SymbolPalette.SetFilterIndexes(group, New Int32Collection(New Integer() { 0, 6 }))
    
    dc.SymbolPalette.SymbolGroups.Add(s)

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

    Diagram-View_img57

    SymbolPalette 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

    a) 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.

    Diagram-View_img58

    Palette with Groups and Filters removed

    Symbol Groups

    A SymbolPaletteGroup 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 s = new SymbolPaletteGroup();
    
    s.Label = "Custom";
    
    SymbolPalette.SetFilterIndexes(s, new Int32Collection(new int[] { 0, 6 }));
    
    diagramControl.SymbolPalette.SymbolGroups.Add(s);
  • VBNET
  • Dim s As New SymbolPaletteGroup()
    
    s.Label = "Custom"
    
    SymbolPalette.SetFilterIndexes(s, New Int32Collection(New Integer() { 0, 6 }))
    
    diagramControl.SymbolPalette.SymbolGroups.Add(s)

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

    Remove SymbolPaletteGroups

    The SymbolPaletteGroups are indexed from 0. Therefore, the group with name Shapes is indexed as 0, the group with 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

    a) 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)
    
                {
    
                    Int32Collection indices = SymbolPalette.GetFilterIndexes(group);
    
                    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 Int32Collection = SymbolPalette.GetFilterIndexes(Group)
    
    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.

    Diagram-View_img59

    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.

    b) 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 Designer

    Symbol Designer application allows you to create new palettes with symbols, and also modify the existing palettes. You can use these palettes in your applications, and also in the Diagram Builder.

    Software Path

    ....\Syncfusion\Essential Studio<Version Number>\utilities\Diagram WPF\Symbol Designer

    (or)

    Start Menu > All Programs > Syncfusion > Utilities > Diagram > WPF > Symbol Designer

    Creating SymbolPaletteItem

    To create your own custom symbols in the symbol designer, follow the procedure given below:

    1. Open the Symbol Designer tool which is available in the software path given above.
    2. If you want to create a new symbol, select New option in the File menu. Type a name for the palette as shown in the below sample and click OK.

      Diagram-View_images60

      New Symbol PaletteItem Dialog Box

    3. A new symbol palette is created with the given name after which, you can design your own symbol.

      Diagram-View_images61

      Flow Diagram Symbol Palette

    4. Draw the desired shapes using drawing tool in the work area.

      Diagram-View_images62

      Symbol

      The Shape of the SymbolPaletteItem can be customized further using format tab in Symbol Designer:

      • Background
      • Outline
      • Dash array
      • Shadow
      • Soft edges
      • Glow visual effect

      The node label can also be customized.

      Diagram-View_images63

      Format tab

    5. After creating required symbols, we have to save this symbol into the symbol palette. Go to the File menu and click Save. A Save SymbolPaletteGroup dialog will appear as in the following screen shot.

      Diagram-View_images64

      Save SymbolPalette Group Dialog

    6. Give a relevant file name for the palette and click Save. As the PaletteGroup is saved, preview of the symbol will be shown in Symbol Palette.

      Diagram-View_images65

      Symbol Palette With New Symbol

    7. Repeat the steps 3 to 7 for creating more symbols.

      Diagram-View_images66

      Symbol pallet with PART_Triangle

      Diagram-View_images67

      Diagram-View_images68

      Different Symbols

    8. If you create symbols using more than one shape, you need to group all the shapes into a single symbol using the Group option in Symbol Designer.
    9. Finally, Save the NewSymbol Group. Now the above symbols will be available in the SymbolPaletteGroup. The saved SymbolPaletteGroup can be loaded back later.

    SymbolPalette in WPF Diagram (classic) Item

    SymbolPaletteItems are contained in the SymbolPalette group. A SymbolPalette item does not restrict users to the type of content that can be added to it. A SymbolPalette 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.

    The following code example can be used to add a SymbolPalette item that has an image as its content.

  • C#
  • SymbolPaletteGroup group = new SymbolPaletteGroup();
    
    group.Label = "Custom";
    
    SymbolPalette.SetFilterIndexes(group, new Int32Collection(new 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.Label = "Custom"
    
    SymbolPalette.SetFilterIndexes(group, New Int32Collection(New Integer() { 0, 6 }))
    
    dc.SymbolPalette.SymbolGroups.Add(group)
    
    Dim item As New SymbolPaletteItem()
    
    Dim i As New Image()
    
    Dim bi3 As 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)

    This adds the image content to the newly created SymbolPaletteitem that belongs to the SymbolPalettegroup named “Custom”.

    Diagram-View_img69

    Custom Group and Item

    Create SymbolPaletteItem

    You can create SymbolPaletteItem in two methods. They are:

    • Using Symbol Designer
    • Using Microsoft Expression Blend 4

    Using Symbol Design

    To create SymbolPaletteItem using Symbol Designer, refer to the Symbol Designer section.

    Using Microsoft Expression Blend 4

    Essential Diagram provides an add-on for creating SymbolPaletteItem’s content. You can also export the created content as SymbolPaletteItem using this add on. The exported content can be imported into the diagram control for later.

    To enable this you need to add the Syncfusion.Diagram.SymbolExporter.dll in the Extension folder.

    When Microsoft Expression Blend is installed before installing Essential Studio, the exporter assembly will automatically be placed in the Extensions folder.

    When Microsoft Expression Blend is installed after installing Essential Studio, then you need to run the SyncfusionExpressionBlendAddins EXE, to place assembly in the correct location.

    The SyncfusionExpressionBlendAddins EXE is available in the following location:

    [$Essential Studio][$Current Version]\Utilities\Diagram\WPF

    Or you can also place the assembly manually in the following location:

    {$Microsoft Expression]\Blend 4\Extensions

    NOTE

    currently exporter support is available only for the Blend 4  stable release(4.0.20525.0) and Blend 4 service packs 1 (version 4.0.20901.0).

    To Create SymbolPaletteItem Content

    1. Create a symbol that has to be exported.
    2. Select the element that has to be exported as a SymbolPaletteItem.
    3. The Name property has to be provided for the element that has to be exported as the symbol content.
    4. The selected SymbolPalette content will be exported as a XAML file using the add-on.
    5. The exported XAML file can be imported in the DiagramControl as SymbolPaletteItem.

      The following are the steps to create a SymbolPaletteItem and import symbols from Blend:

    6. Create a WPF application.

      Diagram-View_images70

      New Project

    7. Design the content as required.

      Diagram-View_images71

      Design Content

    8. Select the part of the element, which you want to export as symbol content. You can also select this from the Object and Timeline.

      NOTE

      The selected part will act as the parent element, name the element as desired.

    9. Specify the Name property for parent element.
      This name property is required for serialization. So this property cannot be set to null.</td></tr>
    10. Click Window option in the blend menu.11. Select the Syncfusion Symbol Exporter add-on. 12. A popup window will be displayed. You can dock this within the blend as shown in following screenshot:</td></tr>
      </table>

      Diagram-View_images72

      Syncfusion Symbol Exporter

      Diagram-View_images73

      Object and Timeline Window

    11. Click Export.
    12. The Save SymbolPaletteItem dialog opens.
    13. Name the file and save this as XAML file in the desired location.

      Diagram-View_images74

      Save Dialog Box

    14. The selected part will be exported as the SymbolPaletteItem content.

      The exported file can be imported in SymbolPalette. To import symbols from XAML file, refer to the SymbolPaletteSerialization.

    Define Node, Port, Group definitions in SymbolPalette

    The following steps demonstrate how to specify a Node or Node with Ports 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 SymbolPalette can be dragged and dropped on the page. All the ports, and their properties will be cloned and a new copy of the node will be created.

    Diagram-View_img75

    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
    
    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 will be added on the page.

    Diagram-View_img76

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

    Adding Through SymbolPalette

    Customize the SymbolPalette

    The appearance of the SymbolPalette 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 SymbolPalette 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 SymbolPalette.The default color is Beige. Dependency property Brush No
    BorderThickness Gets or sets the border thickness of the SymbolPalette.The default value is 1. Dependency property Thickness No
    BorderBrush Specifies the border color of the SymbolPalette.The default color is Brown. Dependency property Brush No
    SymbolPaletteGroupBackground Specifies the background color of the SymbolPalette Group.The default color is Bisque. Dependency property Brush No
    SymbolPaletteGroupForeground Specifies the foreground color of the SymbolPalette Group.The default color is SaddleBrown_._ Dependency property Brush No
    SymbolPaletteGroupBorderBrush Specifies the border color of the SymbolPalette Group.The default color is Chocolate_._ Dependency property Brush No
    ItemBorderThickness Gets or sets the border thickness of the SymbolPalette Item.The default value is 1. Dependency property Thickness No
    ItemCornerRadius Gets or sets the corner radius of the SymbolPalette Item.The default value is 2. Dependency property CornerRadius No
    ItemMouseOverBorderBrush Specifies the border color of the SymbolPalette Item over which the mouse pointer rests.The default value is Orange. Dependency property Brush No
    ItemCheckedBorderBrush Specifies the border color of the SymbolPalette Item that is selected.The default value is Red. Dependency property Brush No
    ItemCheckedMouseOverBorderBrush Specifies the border color of the selected SymbolPalette Item over which the mouse pointer rests.The default value is Green. Dependency property Brush No
    FilterSelectorBackground Specifies the background color of the SymbolPalette Filter.The default value is Chocolate. Dependency property Brush No
    FilterSelectorForeground Specifies the foreground color of the SymbolPalette Filter.The default value is DarkSlateGray. Dependency property Brush No
    FilterSelectorBorderThickness Gets or sets the border thickness of the SymbolPalette Filter.The default value is (0,0,0,1). Dependency property Thickness No
    FilterSelectorMouseOverForeground Specifies the foreground color of the SymbolPalette Filter over which the mouse pointer rests.The default value is OldLace. Dependency property Brush No
    FilterSelectorBorderBrush specifies the border color of the SymbolPalette FilterThe default value is Chocolate. Dependency property Brush No
    PopUpBackground Specifies the background color of the SymbolPalette Pop-up.The default value is WhiteSmoke. Dependency property Brush No
    PopUpForeground Specifies the foreground color of the SymbolPalette Pop-up.The default value is DarkSlateGray. Dependency property Brush No
    PopUpBorderThickness Gets or sets the border thickness of the SymbolPalette Pop-upThe default value is (0,1,1,1). Dependency property Thickness No
    PopUpMouseOverBrush Specifies the background color of the SymbolPalette pop-up Item over which the mouse pointer rests.The default value is LightSalmon. Dependency property Brush No
    PopUpBorderBrush Specifies the border color of the SymbolPalette pop-up.The default value is Chocolate. Dependency property Brush No
    PopUpLeftColumnBackground Specifies the background color of the Check Box Column in the SymbolPalette pop-up.The default value is LightGray. Dependency property Brush No
    CheckerBackground Specifies the the background color of the Check Boxes in the SymbolPalette pop-up.The default value is Bisque. Dependency property Brush No
    CheckerBorderBrush Specifies the the border color of the Check Boxes in the SymbolPalette pop-up.The default value is DarkSlateGray_._ Dependency property Brush No
    CheckerTickBrush Specifies the Tick color of the selected Check Box in the SymbolPalette pop-up.The default value is DarkSlateGray_._ Dependency property Brush No

    The following code example illustrates how to set some of the SymbolPalette 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 screenshot illustrates the various customization options that are available for the SymbolPalette Item, Group and Filter Selector.

    Diagram-View_img77

    SymbolPalette Item, Group and Filter Selector Customization Properties

    The following screenshot illustrates the various customization options available for the SymbolPalette PopUp.

    Diagram-View_img78

    SymbolPalette PopUp Customization Properties

    Customize the SymbolPaletteItem

    This feature improves the performance of SymbolPaletteItem dragging, by avoiding serialization and deserialization of the item.

    Method Description Parameters Return Type
    CloneContent This method assigns the customized and serialized content to the symbol palette item, while performing drag and drop. No parameters object

    Adding this Feature to an Application

    Creating Custom SymbolPaletteItem

    The content for the custom SymbolPaletteItem is assigned by overriding the CloneContent method.

  • C#
  • public class customItem : SymbolPaletteItem
    
            {
    
                public customItem()
    
                { }
    
    
    
                public override object CloneContent()
    
                {
    
                    return new Button() { Height = 50, Width = 50, Content = "Custom" };
    
                }
    
            }
  • VBNET
  • Public Class customItem
    
    Inherits SymbolPaletteItem
    
    Public Sub New()
    
    End Sub
    
    
    
    Public Overrides Function CloneContent() As Object
    
    
    
                Dim button As New Button()
    
                button.Content = "asas"
    
                button.Width = 50
    
                button.Height = 50
    
                Return button
    
    End Function
    
    End Class

    Adding CustomItem to SymbolPalette

    To add CustomItem to SymbolPalette, use the code example given below:

  • C#
  • customItem custom = new customItem();
    
    custom.Content = "asd";
    
    (diagramControl.SymbolPalette.SymbolGroups[0] as SymbolPaletteGroup).Items.Add(custom);
  • VBNET
  • Dim custom As New customItem()
    
    custom.Content = "asd"
    
    TryCast(customs.SymbolGroups(0), SymbolPaletteGroup).Items.Add(custom)

    When you drag and drop the custom SymbolPaletteItem, the content that is assigned in the CloneContent method is applied to the content of the dropped item.

    Thereby, the performance of dragging the SymbolPaletteItem is improved by 40%. If the default base method is returned in the CloneContent method, the default content is dragged and dropped.

    SymbolPalette in WPF Diagram (classic) Serialization

    Serialization is the process of saving and retrieving the SymbolPalette groups and items. Essential DiagramWPF supports saving the SymbolPalette as an 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 customized and imported onto the SymbolPalette.

    • User can easily Save/Load the SymbolPalette
    • User can Save/Load the SymbolPaletteGroup
    • User can Save/Load the SymbolPaletteItem

    Methods

    Method Description Parameters Return Type Reference links
    SaveSymbolPalette Displays the save dialog box to save the entire SymbolPalette(including all SymbolPalette groups) into XAML file. NA Void NA
    LoadSymbolPalette The existing SymbolPalette 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 Dialog 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. SymbolPaletteItem 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. SymbolPaletteGroup Void NA

    Bind to ItemSource

    The symbol palette supports binding with business objects. A symbol group will be created and added to the symbol palette depending upon the business objects and template provided. The symbol group itself supports binding with business objects. Symbol palette items will be created and added to it depending upon the business objects and template.

    Properties

    Property Description Type Data Type Reference links
    ItemGenerateMode Specifies the ItemGenerateMode for symbol palette. Default is Manual. Dependency property ItemGenerateMode.ItemsSourceItemGenerateMode.Manual No
    ItemsSource Gets or sets the source for the list of the items, the containers about to represent. DependencyProperty IEnumerable No

    ItemSource property gets the source for the list of Symbol groups to be added to symbol palette.

    The following code samples illustrate this.

  • HTML
  • <Window.Resources>
    
            <Style TargetType="syncfusion:SymbolPaletteGroup">
    
            <Setter Property="Label" Value="{Binding Label}"></Setter>
    
                <Setter Property="syncfusion:SymbolPalette.FilterIndexes" Value="{Binding Filter}">
    
            </Setter>
    
            <Setter Property="ItemTemplate">
    
                <Setter.Value>
    
                    <DataTemplate>
    
                            <syncfusion:SymbolPaletteItem Height="50" Width="50"  Content="{Binding Content}">
    
                        </syncfusion:SymbolPaletteItem>
    
                    </DataTemplate>
    
                </Setter.Value>
    
            </Setter>
    
            </Style>
    
    </Window.Resources>
  • C#
  • symbol = diagramControl.SymbolPalette;
    
    // Set the ItemGenerateMode property value to ItemsSource
    
    symbol.ItemGenerateMode = ItemGenerateMode.ItemsSource;
    
    //Clear the default filter item from the SymbolFilter collections.
    
    symbol.SymbolFilters.Clear();
    
    //Clear default items added in SymbolGroups
    
    symbol.SymbolGroups.Clear();
    
    //Then assign ItemsSource for the SymbolPalette
    
    symbol.ItemsSource = CreatingBusinessObjForSymbolPalette();
    
    //ItemsSource for SymbolPalette
    
    private System.Collections.IEnumerable CreatingBusinessObjForSymbolPalette()
    
    {
    
    ObservableCollection<SymbGroup> grp = new ObservableCollection<SymbGroup>();
    
    grp.Add(new SymbGroup() { Label = "Label1", Filter = new Int32Collection(new int[] { 0, 1 }) });
    
    grp.Add(new SymbGroup() { Label = "Label2", Filter = new Int32Collection(new int[] { 0, 2 }) });
    
    return grp;
    
    }
    
    
    
    //ItemsSource for SymbolPaletteGroup assigned when group collection changed.
    
    void SymbolGroups_CollectionChanged(object sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e)
    
    {
    
    if (e.NewItems != null)
    
    {
    
    ObservableCollection<SymbolItem> symbolItemCollection = new
    
    ObservableCollection<SymbolItem>();
    
    symbolItemCollection.Add(new SymbolItem() { Content = "Item1" });
    
    symbolItemCollection.Add(new SymbolItem() { Content = "Item2" });
    
    
    
    (e.NewItems[0] as SymbolPaletteGroup).ItemsSource = symbolItemCollection;
    
    }
    
    }
    
    
    
    //Business object for symbol group and symbol palette item.
    
    public class SymbGroup
    
    {
    
    public String Label { get; set; }
    
    public Int32Collection Filter { get; set; }
    
    }
    
    public class SymbolItem
    
    {
    
    public string Content { get; set; }
    
    }

    Diagram-View_img79

    Symbol palette ItemSource

    NOTE

    Symbol groups are not allowed to be added manually when ItemSource is used.