We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. WPF
  4. Making our custom shapes behave exactly like the Diagram Builder palette shapes

Making our custom shapes behave exactly like the Diagram Builder palette shapes

Hi Jim

Thanks for using Syncfusion products.

Query

Response

We have a set of our own shapes that need to work exactly the same way as your shapes.  You provided us with some guidance on building our shapes (using the native shape mode).  These shapes do not work exactly like yours.  Typically we can’t save the color attributes, nor can we export them to an image file.

 

Essentially we want to be able to create our own shapes that work exactly like those provided in your Diagram Builder sample application.  
How do we go about doing that?

 

My thanks in advance for addressing this question yet again, but it is important for us to understand that we're using the correct approach and that we also understand any limitations of your tool.

In Diagram Builder sample, most of the shapes(example:plus,star, pentagon) rendered in the palette using a path shape node. If you need to create shapes by your own, we suggest you to use the path shape node.

 

please refer our online documentation below which represents how to create various node shapes.

 

Here is the link

 

Link: http://help.syncfusion.com/ug/js/documents/node.htm

 

Limitations:

 

1.Most of the node shapes(example:rectangle,ellipse,path  node) can be exported to an image format(JPG,PNG) except native node because we export diagram based on the Canvas. The native node is rendered based on the SVG content. We have more complexity in converting SVG elements to canvas. So we could not export native node while exporting diagram. We have already considered this to be a feature request.

 

2. We have an property of fill color for node which sets the color for the parent element. The child element inherits color  from the parent element.  If you set an inline style for an child element, it inherits from the parent element. So we suggest you to set the inline style for the parent element.

 

Please let me know if any concerns.

Regards,

Shyam G


15 Replies
SG Shyam G Syncfusion Team November 27, 2014 05:51 AM UTC

Hi Jim

 

Thanks for using Syncfusion products.

 

Query

Response

Since we've already gone down the "native" path based on an earlier suggestion, how do we convert our SVG into a single path statement?

Please note that the path in the SVG content can be created as a separate “path node”. If SVG content has multiple path elements, then multiple path element can be rendered as a single “path node”. Please see the code snippet below.

 

<%--SVG Content--%>

     <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="120" height="60" display="none">

       <g id="Task">

     <g>

       <g>

          <g>

             <g>

     <path fill="#231F20" d="M30.707,49.001c-10.086,0-18.292-8.207-18.292-18.294s8.206-18.294,18.292-18.294

      s18.292,8.207,18.292,18.294S40.793,49.001,30.707,49.001z M30.707,13.413c-9.535,0-17.292,7.758-17.292,17.294

      s7.757,17.294,17.292,17.294s17.292-7.758,17.292-17.294S40.242,13.413,30.707,13.413z"/>

             </g>

                 <g>

     <path fill="#231F20" d="M30.707,47.002c-8.984,0-16.294-7.31-16.294-16.295s7.31-16.295,16.294-16.295

      s16.294,7.31,16.294,16.295S39.691,47.002,30.707,47.002z M30.707,15.412c-8.434,0-15.294,6.861-15.294,15.295

      s6.86,15.295,15.294,15.295s15.294-6.861,15.294-15.295S39.141,15.412,30.707,15.412z"/>

                  </g>

           </g>

       </g>

               

     </g>

   </g>

    </svg>

 

In the above SVG Content, we have two path elements. These two path elements are combined into a single “path node”. Please see the code snippet below of path node.

 

Node node5 = new Node();

            node5.Name = "node5";

            node5.Shape = new Shape(Shapes.Path);

            node5.Shape.PathData = "M30.707,49.001c-10.086,0-18.292-8.207-18.292-18.294s8.206-18.294,18.292-18.294s18.292,8.207,18.292,18.294S40.793,49.001,30.707,49.001z M30.707,13.413c-9.535,0-17.292,7.758-17.292,17.294s7.757,17.294,17.292,17.294s17.292-7.758,17.292-17.294S40.242,13.413,30.707,13.413zM30.707,47.002c-8.984,0-16.294-7.31-16.294-16.295s7.31-16.295,16.294-16.295s16.294,7.31,16.294,16.295S39.691,47.002,30.707,47.002z M30.707,15.412c-8.434,0-15.294,6.861-15.294,15.295s6.86,15.295,15.294,15.295s15.294-6.861,15.294-15.295S39.141,15.412,30.707,15.412z";

            node5.Width = 120;

            node5.Height = 100;

            node5.OffsetX = 200;

            node5.OffsetY = 200;

            DiagramContent.Nodes.Add(node5);

 

 

Some of our SVG nodes contain combinations of path, circle, polygon and rect tags.
Is there a tool and/or technique that you would recommend that would allow us to do this conversion?

currently we don’t have any tool for SVG nodes conversions. We suggest you to use group node to achieve your requirement. We can render path,circle,polygon and rect tags as path node, ellipse shape, polygon shape and rectangle shape and append in the group to create a group node.

 

we have used rectangle and path data in the SVG content as a Child node in the Group . Please see the below code snippet to create a group node.

 

Node node5 = new Node();

            node5.Name = "node5";

            node5.Parent = "group";

            node5.Width = 120;

            node5.Height = 100;

            node5.OffsetX = node5.Width / 2;

            node5.OffsetY = node5.Height / 2;

 

            Node node6 = new Node();

            node6.Name = "node6";

            node6.Parent = "group";

            node6.Shape = new Shape(Shapes.Path);

            node6.Shape.PathData = " M 6.9997817,6.9915864 V 10.627951 21.537042 H 26.999782 V 10.627951 6.9915864 H 6.9997817 z M 26.090691,7.9006774 V 9.7188595 H 13.363419 V 7.9006774 h 12.727272 z m -18.1818186,0 H 12.454328 V 9.7188595 H 7.9088723 V 7.9006774 z m 4.5454556,2.7272736 v 4.545454 H 7.9088723 v -4.545454 h 4.5454557 z m -4.5454556,5.454545 h 4.5454556 v 4.545455 H 7.9088723 v -4.545455 z m 5.4545466,4.545455 v -4.545455 h 12.727272 v 4.545455 H 13.363419 z M 26.090691,15.173405 H 13.363419 v -4.545454 h 12.727272 v 4.545454 z";

            node6.Width = 120;

            node6.Height = 100;

            node6.OffsetX = node6.Width / 2;

            node6.OffsetY = node6.Height / 2;

 

            Group group = new Group();

            group.Name = " group";

            group.IsGroup = true;

            group.Width = 120;

            group.Height = 100;

            group.OffsetX = node6.Width / 2;

            group.OffsetY = node6.Height / 2;

            group.Children.Add("node5");

            group.Children.Add("node6");

 

basicShapes.AppendChild(node5);

            basicShapes.AppendChild(node6);

            basicShapes.AppendChild(group);

 

 

Please let me know if any concerns.

 

Regards,

Shyam G


JJ Jim Jacobs November 27, 2014 05:51 AM UTC

Hi,

This topic is one that you have already helped me with, but based on recent experiences, I though a new thread was appropriate.
Much of our previous discussions on this subject can be found in thread 117512.
The following may be a bit of a repeat, but after our development meeting this morning, it was agreed that we need to re-ask the question.

Your tool (the Diagram Builder) has built-in shapes such as the flowchart shapes.  These shapes can be exported as svg or the other image formats available within your tool (such as png and jpg).
They can also be modified with colour fills, gradient, text attributes, stroke and so on. 
We have found that these shapes can be saved to the database and retrieved with all attributes intact. 
We have a set of our own shapes that need to work exactly the same way as your shapes.  You provided us with some guidance on building our shapes (using the native shape mode).  These shapes do not work exactly like yours.  Typically we can’t save the color attributes, nor can we export them to an image file.

Essentially we want to be able to create our own shapes that work exactly like those provided in your Diagram Builder sample application. 
How do we go about doing that?

My thanks in advance for addressing this question yet again, but it is important for us to understand that we're using the correct approach and that we also understand any limitations of your tool.

Jim





JJ Jim Jacobs November 27, 2014 05:51 AM UTC

Hi Shyam,

Thanks for the response.
One question though.
Since we've already gone down the "native" path based on an earlier suggestion, how do we convert our SVG into a single path statement?
Some of our SVG nodes contain combinations of path, circle, polygon and rect tags.
Is there a tool and/or technique that you would recommend that would allow us to do this conversion?

Thanks for any advice.

Jim

JJ Jim Jacobs November 27, 2014 05:51 AM UTC

Hi Shyam,

Let me ask a simple question.
Several threads ago, I asked if you had any BPMN 2.0 symbols available - see thread 117434.
In that thread you indicated that Adobe Illustrator was used.  You were kind enough to provide us with several BPMN shapes.

Would it be possible for you or one of your colleagues to provide us with step by step instructions on how you produced these shapes.  We have Illustrator in house, but lack the skills to know exactly how to produce a "single path" for our shapes.

Thanks

Jim

SG Shyam G Syncfusion Team November 28, 2014 12:09 PM UTC

Hi Jim

Sorry for the inconvenience.

Please refer the below video which represents how to draw the path using Adobe Illustrator.

Video: https://www.dropbox.com/s/w2zag13ik1yzbng/drawing_with_illustrator.wmv?dl=0

Please let me know if any concerns.

Regards,

Shyam G


JJ Jim Jacobs November 28, 2014 12:47 PM UTC

Hi,

Thanks for the video, but you did not demonstrate what I had hoped for.
The SVG that was generated contained 2 path statements as well as a polygon statement.
I wish to understand how these 3 statements can be combined into a single path statement.

Thanks

Jim

SG Shyam G Syncfusion Team December 2, 2014 12:10 AM UTC

Hi Jim

Thanks for the update.

Please note that the  path and a polygon in the SVG content can be rendered as a single “path node”. Please see the code snippet below.

 

    <%--SVG content--%>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="120" height="60" display="none">

       <g id="Task">

     <g>

       <g>

          <g>

             <g>

    <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />

             </g>

                 <g>

      <path d="M200,10 L250,190 L160,210 Z"style="fill:lime;stroke:purple;stroke-width:1"/>

                  </g>

              <g>

                  <path d="M120 0 L75 200 L225 200 Z"style="fill:lime;stroke:purple;stroke-width:1" />

              </g>

           </g>

       </g>

              

     </g>

   </g>

    </svg>

 

In the above SVG Content, we have two path elements and a polygon elements. These two path elements and a polygon elements are combined into a single “path node”. Please see the code snippet below of path node.

 

Node node5 = new Node();

            node5.Name = "node5";

            node5.Shape = new Shape(Shapes.Path);

            node5.Shape.PathData = " M200,10 L250,190 L160,210 Z M200,10 L250,190 L160,210 Z M120 0 L75 200 L225 200 Z";

            node5.Width = 120;

            node5.Height = 100;

            node5.OffsetX = 200;

            node5.OffsetY = 200;

            DiagramContent.Nodes.Add(node5);

 

Please let me know if any concerns.

Regards,

Shyam G

 


FE fernando replied to Shyam G May 20, 2016 08:53 PM UTC

Hi Jim

Thanks for the update.

Please note that the  path and a polygon in the SVG content can be rendered as a single “path node”. Please see the code snippet below.

 

    <%--SVG content--%>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="120" height="60" display="none">

       <g id="Task">

     <g>

       <g>

          <g>

             <g>

    <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />

             </g>

                 <g>

      <path d="M200,10 L250,190 L160,210 Z"style="fill:lime;stroke:purple;stroke-width:1"/>

                  </g>

              <g>

                  <path d="M120 0 L75 200 L225 200 Z"style="fill:lime;stroke:purple;stroke-width:1" />

              </g>

           </g>

       </g>

              

     </g>

   </g>

    </svg>

 

In the above SVG Content, we have two path elements and a polygon elements. These two path elements and a polygon elements are combined into a single “path node”. Please see the code snippet below of path node.

 

Node node5 = new Node();

            node5.Name = "node5";

            node5.Shape = new Shape(Shapes.Path);

            node5.Shape.PathData = " M200,10 L250,190 L160,210 Z M200,10 L250,190 L160,210 Z M120 0 L75 200 L225 200 Z";

            node5.Width = 120;

            node5.Height = 100;

            node5.OffsetX = 200;

            node5.OffsetY = 200;

            DiagramContent.Nodes.Add(node5);

 

Please let me know if any concerns.

Regards,

Shyam G

 


Hi My name is Fernando S.Q
I am Student of IPN(Instituto Politécnico Nacional of México)

my question is how i can create a shapes? 
that have 2 rectangle when I pressing the left mouse button, drag the pointer to the drawing area. 


example of my question 

Attachment: Captura_de_pantalla_(156)_39a2e791.rar

SG Shyam G Syncfusion Team May 23, 2016 05:28 AM UTC

Hi Fernando S.Q, 
 
We have created a sample to achieve your requirement and it is available in the below link for download. 
 
 
Please refer to the below online help documentation below in which we have shown how to create a shapes. 
 
 
Regards, 
Shyam G 


FE fernando May 31, 2016 04:40 PM UTC

Hi Shyam G.
Thank you for you answer, but my question is from WPF (Windows platform foundation) not of ASP, can you help me please?

I repeat my question

my question is how i can create a shapes in wpf (Windows Plataform Fundation)? 
that have 2 rectangle when I pressing the left mouse button, drag the pointer to the drawing area. 

Attachment: Captura_de_pantalla_a6fcfa90.rar

FE fernando replied to fernando May 31, 2016 04:47 PM UTC

Hi Shyam G.
Thank you for you answer, but my question is from WPF (Windows platform foundation) not of ASP, can you help me please?

I repeat my question

my question is how i can create a shapes in wpf (Windows Plataform Fundation)? 
that have 2 rectangle when I pressing the left mouse button, drag the pointer to the drawing area. 

Attachment: Captura_de_pantalla_a6fcfa90.rar

I am using Diagram builder of wpf that  created syncfution.

link of the tool that I am using
https://www.syncfusion.com/products/wpf/diagram

KR Keerthivasan Ramamoorthy Syncfusion Team June 1, 2016 12:49 PM UTC

Hi Fernando, 
 
We have created a simple sample to achieve your requirement. We have provided sample and code example to represent your requirement. Please refer to the sample link and code example as below.  
 
Sample Link:124327_Stencil
 
 
Code Example: 
//Node Collection 
diagram.Nodes = new ObservableCollection<Node>(); 
//Node 1 
Node n1 = new Node() 
     { 
UnitHeight = 50, 
UnitWidth = 100, 
OffsetX=200, 
OffsetY=150, 
Content = "Rectangle1", 
Shape = new RectangleGeometry() { Rect = new Rect(0, 0, 10, 10) }, 
ShapeStyle = this.Resources["shapeStyle"] as Style, 
 
 
    }; 
//Node 2 
Node n2 = new Node() 
    { 
UnitHeight = 50, 
UnitWidth = 100, 
OffsetX = 350, 
OffsetY = 250, 
Content = "Rectangle2", 
Shape = new RectangleGeometry() { Rect = new Rect(0, 0, 10, 10) }, 
ShapeStyle = this.Resources["shapeStyle"] as Style, 
 
 
     }; 
//Add Node1 and Node 2 into the SfDiagram 
(diagram.Nodes as ObservableCollection<Node>).Add(n1); 
(diagram.Nodes as ObservableCollection<Node>).Add(n2); 
         
 
Assembly version: 14.1.0.41 
 
Regards, 
Keerthivasan R. 


FE fernando July 22, 2016 02:58 PM UTC

HI!!

Again?
How I can convert a xml file to a pdf, I am using DiagramBuiler  of wpf (Windows Presentation Foundation)
the Xml file is created by (DiagramBuiler of syncfusion)

link of DiagramBuiler of syncfusion
https://www.syncfusion.com/products/wpf/diagram


Can you help me? 
Please 

Attachment: xml_file_created_by_diagram_builer_1809d5f2.rar

RA Ranjitha Amirthalingam Syncfusion Team July 26, 2016 01:52 PM UTC

Hi Fernando, 
 
Following is the same response updated in the forum #115983. 
 
We have provided the code example to enable Printing option in Diagram Builder sample. Please refer to the code example as below. 
 
public void OnPrintCommand(object param) 
{ 
    ExportSettings settings = new ExportSettings() 
     { 
        ImageStretch = Stretch.Fill, 
        ExportMode = ExportMode.PageSettings 
     }; 
     (SelectedDiagram.Info as IGraph).ExportSettings = settings; 
     (SelectedDiagram.Info as IGraph).PrintingService.ShowDialog = true; 
     (SelectedDiagram.Info as IGraph).PrintingService.Print(); 
}  
 
Also, provided Xaml code to bind the Print command in a Button .Please refer to the code as below. 
 
<syncfusion:BackStageCommandButton Header="Print" Command="{Binding DataContext.Print,Mode=TwoWay,ElementName=ribbon}" > </syncfusion:BackStageCommandButton>  
 
 
Note: 
Currently, we are checking “how to export Xml file as Pdf”. We will update the status on 29th July, 2016. 
 
 
 
Regards, 
Ranjitha A. 


KR Keerthivasan Ramamoorthy Syncfusion Team July 28, 2016 08:59 AM UTC

Hi Fernando,  
  
We have provided code example to enable Export option in Diagram Builder sample. Please refer to the below code example. The below code is used to export the Diagramming object (Nodes and Connectors) into PDF. 
 
Add the below C# code in DiagramBuilderVM.cs file and Syncfusion.Pdf.Base.dll as a reference. 
C# code example: 
public void OnExportCommand(object param) 
{ 
Microsoft.Win32.SaveFileDialog saveFileDialog = new Microsoft.Win32.SaveFileDialog(); 
saveFileDialog.Filter = "PDF File|*.pdf"; 
saveFileDialog.Title = "Save to a PDF file"; 
saveFileDialog.FileName = "Diagram"; 
saveFileDialog.ShowDialog(); 
if (!string.IsNullOrEmpty(saveFileDialog.FileName)) 
{ 
SaveFileDialog m_SaveFileDialog = new SaveFileDialog(); 
m_SaveFileDialog = new SaveFileDialog(); 
m_SaveFileDialog.Filter = "XPS File(*.xps)|*.xps"; 
m_SaveFileDialog.FileName = "DiagramExport"; 
string name = m_SaveFileDialog.FileName; 
ExportSettings es = new ExportSettings(); 
es.FileName = name; 
es.IsSaveToXps = true; 
(SelectedDiagram.Info as IGraph).ExportSettings = es; 
(SelectedDiagram.Info as IGraphInfo).Export(); 
Syncfusion.XPS.XPSToPdfConverter converter1 = new Syncfusion.XPS.XPSToPdfConverter(); 
//Convert XPS document into PDF document 
PdfDocument document = converter1.Convert(name); 
//save and close the document 
document.Save(saveFileDialog.FileName); 
document.Close(true); 
} 
} 
Also, provided XAML code to bind the Export command in a Button. Please refer to the below code, 
<syncfusion:BackStageCommandButton Header="Export" Command="{Binding DataContext.Export,Mode=TwoWay,ElementName=ribbon}" ></syncfusion:BackStageCommandButton> 
 
Note:  
For more information, we have provided a video. Please refer to the video link as below. 
Video link:160753_Video

 
  
Regards,  
Keerthivasan R. 
 


Loader.
Live Chat Icon For mobile
Up arrow icon