Automatic Layout - Diagram Builder

[Sandeep Kandula]

Scenario 1)

Till now, I use to drag and drop symbols present in Stencil to SfDiagram control.

I could not find documentation\API for following requirements :

Is it possible to export the configured diagram in form of XAML\XML?

After the export XAML\XML is done, can I import it back to SfDiagram Control?

 

Scenario 2)

http://help.syncfusion.com/UG/winrt/default.htm#!Documents/automaticlayouts.htm

In WINRT documentation (Diagram -> Automatic Layout - Directed Tree Layout), it is mentioned that I can programmatically Add Nodes and AddConnector. But I would like to use Symbols present in Stencil instead of default node. Is it technically possible?

 

If Scenario 1 is supported then I can create my own XML and add symbols programmatically based on user requirement. Then this XML can be imported by user to see diagram automatically.

 

[Parthiban A]

Hi Sandeep,

We have analysed your query kindly find the details below.

S.No	Queries	Resoponses
1.	Is it possible to export the configured diagram in form of XAML\XML? After the export XAML\XML is done, can I import it back to SfDiagram Control?	In diagram control we have provided serialization support by DataContractSerializer. So while serializing, we only serialize the objects, which represents some of the states of the node, connectors. Then we can export as xml file, which in turn can be import to diagram control to load nodes and connectors automatically. Diagram can only load, serialized xml file which is created already. It doesn’t support any custom xml file. In such case you have to create nodes and connector from your xml object and then load to diagram control.
2.	In WINRT documentation (Diagram -> Automatic Layout - Directed Tree Layout), it is mentioned that I can programmatically Add Nodes and AddConnector. But I would like to use Symbols present in Stencil instead of default node. Is it technically possible?	You can add nodes and connectors to diagram control manually. As per current behaviour while drag and drop symbol from stencil, we are cloning the symbol’s content and symbol template to dropped node. As like stencil symbol, you can create node on code behind with content and content template. Code Snippet: NodeViewModel node = new NodeViewModel();        node.OffsetX = 100;        node.OffsetY = 100;        node.UnitWidth = 100;        node.UnitHeight = 100;        node.Content ="M158.5,95.1283269797681L26.5,105.628322653968 121,219.628166664837 29.5,339.62822625042 160,342.628225014478 236.915602847904,446.724181328487 316,341.128225632449 461.5,344.128224396506 361,213.628172103343 460,113.128319564111 317.5,92.1283282157111 242.5,-0.871633462889512z";        node.ContentTemplate = this.Resources["pathDataTemplate"] as DataTemplate;        (diagram.Nodes as DiagramCollection).Add(node);   //Templates and Styles <Style x:Name="SymbolStyle" TargetType="Path">               <Setter Property="Fill" Value="#FFFFFF"/>               <Setter Property="Stroke" Value="#FF7F7F7F"/>               <Setter Property="StrokeThickness" Value="1"/>               <Setter Property="Stretch" Value="Fill"/>         </Style>           <DataTemplate x:Key="pathDataTemplate">             <Path Data="{Binding}" Stretch="Fill" Style="{StaticResource SymbolStyle}"/>         </DataTemplate>

Regards,

Parthiban

[Sandeep Kandula]

Hi Sandeep,

We have analysed your query kindly find the details below.

S.No	Queries	Resoponses
1.	Is it possible to export the configured diagram in form of XAML\XML? After the export XAML\XML is done, can I import it back to SfDiagram Control?	In diagram control we have provided serialization support by DataContractSerializer. So while serializing, we only serialize the objects, which represents some of the states of the node, connectors. Then we can export as xml file, which in turn can be import to diagram control to load nodes and connectors automatically. Diagram can only load, serialized xml file which is created already. It doesn’t support any custom xml file. In such case you have to create nodes and connector from your xml object and then load to diagram control.
2.	In WINRT documentation (Diagram -> Automatic Layout - Directed Tree Layout), it is mentioned that I can programmatically Add Nodes and AddConnector. But I would like to use Symbols present in Stencil instead of default node. Is it technically possible?	You can add nodes and connectors to diagram control manually. As per current behaviour while drag and drop symbol from stencil, we are cloning the symbol’s content and symbol template to dropped node. As like stencil symbol, you can create node on code behind with content and content template. Code Snippet: NodeViewModel node = new NodeViewModel();        node.OffsetX = 100;        node.OffsetY = 100;        node.UnitWidth = 100;        node.UnitHeight = 100;        node.Content ="M158.5,95.1283269797681L26.5,105.628322653968 121,219.628166664837 29.5,339.62822625042 160,342.628225014478 236.915602847904,446.724181328487 316,341.128225632449 461.5,344.128224396506 361,213.628172103343 460,113.128319564111 317.5,92.1283282157111 242.5,-0.871633462889512z";        node.ContentTemplate = this.Resources["pathDataTemplate"] as DataTemplate;        (diagram.Nodes as DiagramCollection).Add(node);   //Templates and Styles <Style x:Name="SymbolStyle" TargetType="Path">               <Setter Property="Fill" Value="#FFFFFF"/>               <Setter Property="Stroke" Value="#FF7F7F7F"/>               <Setter Property="StrokeThickness" Value="1"/>               <Setter Property="Stretch" Value="Fill"/>         </Style>           <DataTemplate x:Key="pathDataTemplate">             <Path Data="{Binding}" Stretch="Fill" Style="{StaticResource SymbolStyle}"/>         </DataTemplate>

Regards,

Parthiban

Thanks for the inputs.

My requirement is that I will have a wizard with following inputs :

a) Symbol names (lets say Workstation, Server) present in Stencil View will be displayed in a TextBlock.

b)Number of quantities required for each symbol name (lets say Workstation, Server) will be display in TextBox.

 

Based on user inputs, I need to draw the diagram dynamically using Syncfusion Diagram control.

 

Diagram can only load, serialized xml file which is created already. It doesn’t support any custom xml file. In such case you have to create nodes and connector from your xml object and then load to diagram control.

Can I get any sample code for this or any help link?

 

Please check my code (attach file) for serialization and Deserialization written based on below mentioned links. Serialization is fine but Deserialization throws an exception. sfDiagram.Save generates an XML successfully but sfDriagram.Load fails.

http://help.syncfusion.com/UG/winrt/Documents/gettingstarted15.htm

http://help.syncfusion.com/UG/winrt/Documents/serialization.htm

 

Attachment: Step1_185e22bf.zip

[Sudhakar C]

Hi Sandeep,

Please find the response for your queries in below.

Query	Response
a) Symbol names (lets say Workstation, Server) present in Stencil View will be displayed in a TextBlock. b)Number of quantities required for each symbol name (lets say Workstation, Server) will be display in TextBox.	We can create the custom symbols in Stencil. We have a sample “Floor Planner” in dashboard to create the custom symbols.   For more information, please refer the sample in the below location.   Location : DashboardàWinRTàFloor Planner (which is located in showcase)
Diagram can only load, serialized xml file which is created already. It doesn’t support any custom xml file. In such case you have to create nodes and connector from your xml object and then load to diagram control. Can I get any sample code for this or any help link?   Please check my code (attach file) for serialization and Deserialization written based on below mentioned links. Serialization is fine but Deserialization throws an exception. sfDiagram.Save generates an XML successfully but sfDriagram.Load fails. http://help.syncfusion.com/UG/winrt/Documents/gettingstarted15.htm http://help.syncfusion.com/UG/winrt/Documents/serialization.htm	1.Code for Save/Load the Diagram      After analysing the provided sample,the Stream created for Writing purpose is used for Reading the Xml file. This causes the reported problem. We have modified the given sample to meet your requirement.   2.Collections of Diagram(named as "LoadDiagram") are not assigned, it throws the exception while loading the Diagram from xml/Xaml.   3.In sample.Node has ContentTemplate -ContentTemplate of the Node does not get serialized.ContentTemplate of Node can be appllied in NodeColectionsChanged Event after Loading the Diagram.   For more information , please refer the modified sample.

 

Please let us know if you have any concerns on this.

Regards,

Sudhakar C 

Attachment: Step1_185e22bf_15f6282.zip