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

[hemant]

Hi,

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 ?

(In my code I have created node in coding because I am not able to consume symbol palette)

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 and #118826

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

[hemant]

I am able to consume symbol palette by diagramControl.LoadSymbolPaletteGroup(); inside the code by while consuming it . its showing the collection of the symbol palette. but when i drag drop the same on the diagram area it showing symbol. in your reference video its the same case. please let me know how to create a symbol palette same as flow chart control's (custom one)

[Ranjitha Amirthalingam]

Hi Hemant,

Requirement: “To display the saved symbols in the Symbol Palette”

The symbols are not displayed in the Symbol Palette while loading the saved symbols in the Symbol Designer. So, we have provided the support to display the image of loaded symbols in the Symbol Designer in the application level.

Solution:

We have generated bitmap image of the SymbolPaletteItem while loading symbols into the Symbol Palette, which resolves the reported problem. We have provided sample to represent this. Please use the sample from the following link.

Sample Link:
http://www.syncfusion.com/downloads/support/directtrac/general/Modified_SymbolDesigner389438197.zip

Please let us know if you require further assistance on this

Regards,

Ranjitha A

[hemant]

its not working, as i tried to run the project and then create one symbol palette with it but i am not able to drag and drop the images from the tool bar.

can you please share the video of how it has been done and how to use that. it will be great . 

Best Regards',

Hemant Shrivastava 

[Ranjitha Amirthalingam]

Hi Hemant,

Sorry for the inconvenience caused.

Requirement: To display the saved symbols in the SymbolPalette

While loading symbols into the SymbolPalette the symbols are not shown instead of this shown as collection. We have provided LoadSymbolGroup sample to load symbols as image into the SymbolPalette. We have generated bitmap image of SymbolPaltteItem while loading symbols into the SymbolPaltte. Please refer to that sample and video from the following link

Sample Link:
LoadSymbolGroup-162547335.zip

Video link:
Video_loadsymplte.zip

Please let us know if you require further assistance on this

Regards,

Ranjitha A