Automatic Layout - Diagram Builder | WinRT Forums

PA Parthiban A Syncfusion Team April 15, 2014 01:09 PM UTC

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>

</DataTemplate>

Regards,

Parthiban

SK Sandeep Kandula replied to Parthiban A April 16, 2014 08:25 AM UTC

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

SC Sudhakar C Syncfusion Team April 17, 2014 11:03 AM UTC

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