How to add line segments

[madhu]

Hi,

    There are no line segments API found in syncfusion although its mentioned in the documentation.

How do I add line segment in the below code?

http://www.syncfusion.com/downloads/support/forum/116037/DiagramBuilder_1162136a_8febf526_1d05cbd2.zip

[Parthiban A]

Hi Madhu,

Thanks for using Syncfusion Product.

In the online documentation we have shown only how to use SfDiagram API not about diagram builder.

Diagram builder sample is just a demo sample(showcase) to show, how SfDiagram product can be used in some specific scenarios like diagram builder application. In diagram builder we have exposed very limited set of SfDiagram features.

First let us see how to add a connector with segments in sfDiagram and then we can see how to do the same in DiagramBuilder.

SfDiagram API:

• To create connector

ConnectorViewModel con = new ConnectorViewModel()

{

     SourcePoint = new Point(100, 200),

     TargetPoint = new Point(200, 200),    

     // Customizing the ConnectorGeometryStyle.

     ConnectorGeometryStyle = this.Resources["connectorstyle"] as Style

};

 

• To add segments to the connector

//Adding Line Segment to Segments.

con.Segments = new ObservableCollection<IConnectorSegment>()

{

      new LineSegment() { Point = new Point(150,100) }

};

 

• To add Connector to Diagram control

ObservableCollection<ConnectorViewModel> lines = new ObservableCollection<ConnectorViewModel>();

ConnectorViewModel con = new ConnectorViewModel()

{

SourceNode = source,

TargetNode = target,

ConnectorGeometryStyle = GetConStyle()

};

// Adding Connection to SfDiagram

SfDiagram daigramcontrol=new SfDiagram();

lines.Add(con);

diagramcontrol.Connectors = lines;

 

Diagram Builder API:

DiagramBuilder is created based on MVVM pattern, so we have created a custom set of view models (DiagramVM,ConnectorVM, NodeVM, etc,.) for necessary interfaces. Here, ConnectorVM is derived from IConnector, it has all the properties like SourcePoint, TargetPoint, etc like in ConnectorViewModel. So you can add ConnectorVM to diagram builder similar to ConnectorViewModel.

 

• To create connector

ConnectorVM con = new ConnectorVM()

{

     SourcePoint = new Point(100, 200),

     TargetPoint = new Point(200, 200),    

     // Customizing the ConnectorGeometryStyle.

     ConnectorGeometryStyle = this.Resources["connectorstyle"] as Style

};

• To add segments to the connector

//Adding Line Segment to Segments.

con.Segments = new ObservableCollection<IConnectorSegment>()

{

      new LineSegment() { Point = new Point(150,100) }

};

 

• To add Connector to Diagram control, , add below code in DiagramVM.cs class

ConnectorVM con = new ConnectorVM()

{

SourceNode = source,

TargetNode = target,

ConnectorGeometryStyle = GetConStyle()

};

// Adding Connection to DiagramVM.

DiagramVM diagram=new DiagramVM();

(Diagram.Connectors as ObservableCollection<ConnectorViewModel>).Add(con);

Instead of using sfDiagram, DiagramVM is used in DiagramBuilder. Which is derived from DiagramViewModel. So that you can directly add ConnectorVM to DiagramVM.Connector collection. You can find DiagramVM class in folder  DiagramBuilder/ViewModel/DiagramVM.cs.

Corresponding API’s in Diagram Builder:

1. ConnectorViewModel – ConnectorVM(deriving from IConnector)

2. SfDiagram                   - DiagramVM(deriving from DaigramViewModel).

 

Regards,

Parthiban