How to consume SymbolPaletteGroup , created in xaml by Symbol Designer and other queries -

[hemant]

I need to create a custom symbol palette group and then consume it in my application ; I have created one using

http://help.syncfusion.com/ug/wpf/index.html#!documents/symboldesigner.htm

and as a output I got one xaml file, but I am not able to find the process / code for consuming it my application ?

can you please help me with the code.

apart from this query ->

My requirement is to have a custom dashboard in which I can drag and drop the custom shapes from the left hand side panel(symbol palette).

For example – we have created three items on the left hand side panel (item 1, item 2 , item 3)

1.       I should be able to drag drop one symbol n number of times.

2.       Each symbol (if repeated also have their unique id’s / instance associated with them).

So if drag and drop item 1 three times in the diagram board - item 1(instance1), item 2 (instance 2), item 3 (instance 3) . I should be able to find out uniqueness in this items.

3.       I should be able to attach them via connector.

4.       I should be able to move them on dashboard.

 

---

My code-

MainWindow.xaml

<Window x:Class="POC.MainWindow" 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:TechNip_POC">

    <Grid Name="diagramgrid">

        <sfdiagram:DiagramControl  Name="diagramControl" IsSymbolPaletteEnabled="True">

            <sfdiagram:DiagramControl.Model>

                <sfdiagram:DiagramModel></sfdiagram:DiagramModel>

            </sfdiagram:DiagramControl.Model>

            <sfdiagram:DiagramControl.View>

                <sfdiagram:DiagramView Name="diagramView" NodeDoubleClick="diagramView_NodeDoubleClick"></sfdiagram:DiagramView>

            </sfdiagram:DiagramControl.View>

        </sfdiagram:DiagramControl>

    </Grid>

</Window>

MainWindow.xaml.cs

using Syncfusion.Windows.Diagram;

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Data;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Imaging;

using System.Windows.Navigation;

using System.Windows.Shapes;

 

namespace POC

{

    /// <summary>

    /// Interaction logic for MainWindow.xaml

    /// </summary>

    public partial class MainWindow : Window

    {

        public MainWindow()

        {

            InitializeComponent();

            //diagramControl.SymbolPalette.SymbolGroups.Clear();

            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.SymbolGroups.Remove(diagramControl.SymbolPalette.SymbolGroups[1]);

 

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

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

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

          

 

            //initializing symbolpalettegroup

            SymbolPaletteGroup s = new SymbolPaletteGroup();

            s.Label = "POC Controls";

            SymbolPalette.SetFilterIndexes(s, new Int32Collection(new int[] { 0, 1 }));

            //adding symbolpalette in the diagram

            diagramControl.SymbolPalette.SymbolGroups.Add(s);

            //creating node

            Node node1 = new Node();

            node1.Width = 100;

            node1.Height = 50;

            node1.OffsetX = 100;

            node1.OffsetY = 100;

            node1.Shape = Shapes.Rectangle;

            node1.Label = "Feed Source";

            node1.IsHitTestVisible = false;

            //adding port to the node

            AddPort(0, 0, node1);

            AddPort(100, 25, node1);

            AddPort(0, 50, node1);

            SymbolPaletteItem item = new SymbolPaletteItem();

            item.Width = 100;

            item.Height = 50;

            item.Content = node1;

 

            //// adding node 2

            //creating node

            Node node2 = new Node();

            node2.Width = 100;

            node2.Height = 50;

            node2.OffsetX = 250;

            node2.OffsetY = 250;

            node2.Shape = Shapes.Rectangle;

            node2.Label = "Process Exit";

            node2.IsHitTestVisible = false;

            //adding port to the node

            AddPort(0, 0, node2);

            AddPort(100, 25, node2);

            AddPort(0, 50, node2);

            SymbolPaletteItem item2 = new SymbolPaletteItem();

            item2.Width = 100;

            item2.Height = 50;

            item2.Content = node2;

            //// end adding node 2

 

 

            //adding node to the symbolpalette

            s.Items.Add(item);

            s.Items.Add(item2);

            //nodedropped event for showing  dropped node containing only path not the text

            diagramView.NodeDrop += diagramView_NodeDrop;

 

        }

 

        void diagramView_NodeDoubleClick(object sender, NodeRoutedEventArgs evtArgs)

        {

           // MessageBox.Show("Clicked !!");

 

            if (evtArgs.Node.Label.ToString() == "Feed Source")

            {

                Popup1 pu = new Popup1();

                pu.Show();

            }

            else if (evtArgs.Node.Label.ToString() == "Process Exit")

            {

                Popup2 pu = new Popup2();

                pu.Show();

            }

        }

 

 

        void diagramView_NodeDrop(object sender, NodeDroppedRoutedEventArgs evtArgs)

        {

            if (evtArgs.DroppedNode != null)

            {

 

                Node n = (evtArgs.DroppedNode as Node);

                n.PortVisibility = PortVisibility.AlwaysVisible;

                n.Width = 100;

                n.Height = 50;

                n.HorizontalContentAlignment = HorizontalAlignment.Stretch;

                n.VerticalContentAlignment = VerticalAlignment.Stretch;

                if (n.Content is Grid)

                {

                    Path p = (n.Content as Grid).Children[0] as Path;

                    (n.Content as Grid).Children.Clear();

                    n.Content = null;

                    n.Content = p;

                }

            }

        }

 

        private void AddPort(int p1, int p2, Node n)

        {

            ConnectionPort port = new ConnectionPort();

            port.Width = 10;

            port.Height = 10;

            port.Left = p1;

            port.Top = p2;

            port.PortStyle.Stroke = new SolidColorBrush(Colors.Gray);

            port.PortStyle.Fill = new SolidColorBrush(Colors.Blue);

            port.PortStyle.StrokeThickness = 3d;

            port.Node = n;

            n.Ports.Add(port);

        }

 

    }

}

 

Can you please let me know how to take this a head.

Best Regards',

Hemant Shrivastava

[Ranjitha Amirthalingam]

Hi Hemant,

Thanks for using Syncfusion Products.

The following is the same response given in #118825

Please find the response to your queries as below

S.No	Query	Response
1	I need to create a custom symbol palette group and then consume it in my application ; I have created one using http://help.syncfusion.com/ug/wpf/index.html#!documents/symboldesigner.htm and as a output I got one xaml file, but I am not able to find the process / code for consuming it my application ?	Requirement: “Need to Load the Custom Symbols/Shapes into the SymbolPalette” We have used the method LoadSymbolPaletteGroup () of DiagramControl to load the Custom Symbols into the SymbolPalette. We have provided Video and Code Snippet to represent this. Please refer to the Code Snippet and video from the following link: Code Snippet: private void loadbutton_Click(object sender, RoutedEventArgs e)         {             diagramControl.LoadSymbolPaletteGroup();         } Here, diagramControl is the instance of the DiagramControl. Video link:
2	I should be able to drag drop one symbol n number of times.	Once when the symbol is added to the palette, that symbol can be dragged n number of times.
3	Each symbol (if repeated also have their unique id’s / instance associated with them).	We can use the Id property or Tag property to find out uniqueness in this items.
4	I should be able to attach them via connector.	This can be achieved by using EnablleDrawingTools and DrawingMode property of Diagram View For more details about Connector ,please visit our online help documentation link Link: http://help.syncfusion.com/ug/wpf/Documents/drawingtools.htm
5	I should be able to move them on dashboard.	We have provided Interactive Options (Resize, Rotate and Drag) for drag and drop the items.

Please let us know if you require further assistance on this

Regards,

Ranjitha A