Applies to: Nevron Diagram for .NET
How to create a simple diagram in WinForm application from scratch in Visual Studio?
The following getting started guide will help you create a WinForm application, which displays the following diagram:
Create a new WinForm application:
- Open Microsoft Visual Studio for .NET
- Select the File - New - Project command - the new project dialog will be displayed
- Select Visual C# Projects - Windows Applications
Note: VS 2010 users must switch the target framework to ".NET Framework 4" as by default Windows Forms applications target ".NET Framework 4 Client Profile". This is required, because Nevron Diagram for WinForms uses design time support features that are not present in ".NET Framework 4 Client Profile". To do this right click on the project in Solution Explorer and select properties. On the Application tab go to "Target Framework" and select ".NET Framework 4".
- Click the OK button - the designer for Form1 should automatically appear
Insert diagram components and controls
- The Nevron .NET Vision installation must register the NDrawingDocument component and NDrawingView control in the Nevron Diagram WinForm toolbox group. In case this group is created go to step 7.
- Right click on the Toolbox background. Select the "Choose Items…" command.
- In the "Customize Toolbox Items" dialog select the ".NET Framework Components" tab.
- Click on the "Browse..." button and select the Nevron.Diagram.WinForm.dll assembly located in the Nevron .NET Vision installation directory.
- The NDrawingDocument component should appear at the end of the toolbox Windows Forms list.
- Perform the same actions once again, but this time select the Nevron.Diagram.WinForm.dll assembly. As a result the NDrawingView control should appear at the end of the toolbox Windows Forms list.
- Drag and drop the NDrawingDocument to the form - it should appear in the component tray, since it is a component.
- Drag and drop the NDrawingView to the form and resize it as you see fit (or set its Dock property to Fill).
- Open the solution explorer and make sure to add references to the following Nevron assemblies: Nevron.Diagram.dll; Nevron.Diagram.WinForm.dll; Nevron.Diagram.Shapes.dll; Nevron.System.dll; and Nevron.Presentation.dll;
- Double click on Form1 to generate the Form1_Load method.
Programmatically create the diagram
In the Form1_Load method copy and paste the following code:
[C#]
...
using
Nevron.GraphicsCore;
using
Nevron.Diagram;
using
Nevron.Diagram.Shapes;
using
Nevron.Diagram.WinForm;
...
private
void
Form1_Load(
object
sender, System.EventArgs e)
{
// begin view init
nDrawingView1.BeginInit();
// display the document in the view
nDrawingView1.Document = nDrawingDocument1;
// do not show ports
nDrawingView1.GlobalVisibility.ShowPorts =
false
;
// hide the grid
nDrawingView1.Grid.Visible =
false
;
// fit the document in the viewport
nDrawingView1.ViewLayout = ViewLayout.Fit;
// apply padding to the document bounds
nDrawingView1.DocumentPadding =
new
Nevron.Diagram.NMargins(10);
// init document
nDrawingDocument1.BeginInit();
// create the flowcharting shapes factory
NFlowChartingShapesFactory factory =
new
NFlowChartingShapesFactory(nDrawingDocument1);
// modify the connectors style sheet
NStyleSheet styleSheet = (nDrawingDocument1.StyleSheets.GetChildByName(NDR.NameConnectorsStyleSheet, -1)
as
NStyleSheet);
NTextStyle textStyle =
new
NTextStyle();
textStyle.BackplaneStyle.Visible =
true
;
textStyle.BackplaneStyle.StandardFrameStyle.InnerBorderWidth =
new
NLength(0);
styleSheet.Style.TextStyle = textStyle;
styleSheet.Style.StrokeStyle =
new
NStrokeStyle(1, Color.Black);
styleSheet.Style.StartArrowheadStyle.StrokeStyle =
new
NStrokeStyle(1, Color.Black);
styleSheet.Style.EndArrowheadStyle.StrokeStyle =
new
NStrokeStyle(1, Color.Black);
// create the begin shape
NShape begin = factory.CreateShape(FlowChartingShapes.Termination);
begin.Bounds =
new
NRectangleF(100, 100, 100, 100);
begin.Text =
"BEGIN"
;
nDrawingDocument1.ActiveLayer.AddChild(begin);
// create the step1 shape
NShape step1 = factory.CreateShape(FlowChartingShapes.Process);
step1.Bounds =
new
NRectangleF(100, 400, 100, 100);
step1.Text =
"STEP1"
;
nDrawingDocument1.ActiveLayer.AddChild(step1);
// connect begin and step1 with bezier link
NBezierCurveShape bezier =
new
NBezierCurveShape();
bezier.StyleSheetName = NDR.NameConnectorsStyleSheet;
bezier.Text =
"BEZIER"
;
bezier.FirstControlPoint =
new
NPointF(100, 300);
bezier.SecondControlPoint =
new
NPointF(200, 300);
nDrawingDocument1.ActiveLayer.AddChild(bezier);
bezier.FromShape = begin;
bezier.ToShape = step1;
// create question1 shape
NShape question1 = factory.CreateShape(FlowChartingShapes.Decision);
question1.Bounds =
new
NRectangleF(300, 400, 100, 100);
question1.Text =
"QUESTION1"
;
nDrawingDocument1.ActiveLayer.AddChild(question1);
// connect step1 and question1 with line link
NLineShape line =
new
NLineShape();
line.StyleSheetName = NDR.NameConnectorsStyleSheet;
line.Text =
"LINE"
;
nDrawingDocument1.ActiveLayer.AddChild(line);
line.FromShape = step1;
line.ToShape = question1;
// create the step2 shape
NShape step2 = factory.CreateShape(FlowChartingShapes.Process);
step2.Bounds =
new
NRectangleF(500, 100, 100, 100);
step2.Text =
"STEP2"
;
nDrawingDocument1.ActiveLayer.AddChild(step2);
// connect step2 and question1 with HV link
NStep2Connector hv1 =
new
NStep2Connector(
false
);
hv1.StyleSheetName = NDR.NameConnectorsStyleSheet;
hv1.Text =
"HV1"
;
nDrawingDocument1.ActiveLayer.AddChild(hv1);
hv1.FromShape = step2;
hv1.ToShape = question1;
// connect question1 and step2 and with HV link
NStep2Connector hv2 =
new
NStep2Connector(
false
);
hv2.StyleSheetName = NDR.NameConnectorsStyleSheet;
hv2.Text =
"HV2"
;
nDrawingDocument1.ActiveLayer.AddChild(hv2);
hv2.FromShape = question1;
hv2.ToShape = step2;
// create a self loof as bezier on step2
NBezierCurveShape selfLoop =
new
NBezierCurveShape();
selfLoop.StyleSheetName = NDR.NameConnectorsStyleSheet;
selfLoop.Text =
"SELF LOOP"
;
nDrawingDocument1.ActiveLayer.AddChild(selfLoop);
selfLoop.FromShape = step2;
selfLoop.ToShape = step2;
selfLoop.Reflex();
// create step3 shape
NShape step3 = factory.CreateShape(FlowChartingShapes.Process);
step3.Bounds =
new
NRectangleF(700, 600, 100, 100);
step3.Text =
"STEP3"
;
nDrawingDocument1.ActiveLayer.AddChild(step3);
// connect question1 and step3 with an HVH link
NStep3Connector hvh1 =
new
NStep3Connector(
false
, 50, 0,
true
);
hvh1.StyleSheetName = NDR.NameConnectorsStyleSheet;
hvh1.Text =
"HVH1"
;
nDrawingDocument1.ActiveLayer.AddChild(hvh1);
hvh1.FromShape = question1;
hvh1.ToShape = step3;
// create end shape
NShape end = factory.CreateShape(FlowChartingShapes.Termination);
end.Bounds =
new
NRectangleF(300, 700, 100, 100);
end.Text =
"END"
;
nDrawingDocument1.ActiveLayer.AddChild(end);
// connect step3 and end with VH link
NStep2Connector vh1 =
new
NStep2Connector(
true
);
vh1.StyleSheetName = NDR.NameConnectorsStyleSheet;
vh1.Text =
"VH1"
;
nDrawingDocument1.ActiveLayer.AddChild(vh1);
vh1.FromShape = step3;
vh1.ToShape = end;
// connect question1 and end with curve link (uses explicit ports)
NRoutableConnector curve =
new
NRoutableConnector(RoutableConnectorType.DynamicCurve);
curve.StyleSheetName = NDR.NameConnectorsStyleSheet;
curve.Text =
"CURVE"
;
nDrawingDocument1.ActiveLayer.AddChild(curve);
curve.StartPlug.Connect(question1.Ports.GetChildAt(3)
as
NPort);
curve.EndPlug.Connect(end.Ports.GetChildAt(1)
as
NPort);
curve.InsertPoint(1,
new
NPointF(500, 600));
// set a shadow to the nDrawingDocument1. Since styles are inheritable all objects will reuse this shadow
nDrawingDocument1.Style.ShadowStyle =
new
NShadowStyle(
ShadowType.GaussianBlur,
Color.Gray,
new
NPointL(5, 5),
1,
new
NLength(3));
// shadows must be displayed behind document content
nDrawingDocument1.ShadowsZOrder = ShadowsZOrder.BehindDocument;
// end nDrawingDocument1 init
nDrawingDocument1.EndInit();
//end view init
nDrawingView1.EndInit();
}
[VB.NET]
...
Imports
Nevron.GraphicsCore
Imports
Nevron.Diagram
Imports
Nevron.Diagram.Shapes
Imports
Nevron.Diagram.WinForm
...
Private
Sub
Form1_Load(
ByVal
sender
As
System.
Object
,
ByVal
e
As
System.EventArgs)
Handles
MyBase
.Load
' begin view init
NDrawingView1.BeginInit()
' display the document in the view
NDrawingView1.Document = NDrawingDocument1
' do not show the ports
NDrawingView1.GlobalVisibility.ShowPorts =
False
' hide the grid
NDrawingView1.Grid.Visible =
False
' fit the document in the viewport
NDrawingView1.ViewLayout = ViewLayout.Fit
' apply padding to the document bounds
NDrawingView1.DocumentPadding =
New
Nevron.Diagram.NMargins(10)
' init document
NDrawingDocument1.BeginInit()
' create the flowcharting shapes factory
Dim
factory
As
NFlowChartingShapesFactory =
New
NFlowChartingShapesFactory(NDrawingDocument1)
' modify the connectors style sheet
Dim
styleSheet
As
NStyleSheet = NDrawingDocument1.StyleSheets.GetChildByName(NDR.NameConnectorsStyleSheet, -1)
Dim
textStyle
As
NTextStyle =
New
NTextStyle()
textStyle.BackplaneStyle.Visible =
True
textStyle.BackplaneStyle.StandardFrameStyle.InnerBorderWidth =
New
NLength(0)
styleSheet.Style.TextStyle = textStyle
styleSheet.Style.StrokeStyle =
New
NStrokeStyle(1, Color.Black)
styleSheet.Style.StartArrowheadStyle.StrokeStyle =
New
NStrokeStyle(1, Color.Black)
styleSheet.Style.EndArrowheadStyle.StrokeStyle =
New
NStrokeStyle(1, Color.Black)
' create the begin shape
Dim
begin
As
NShape = factory.CreateShape(FlowChartingShapes.Termination)
begin.Bounds =
New
NRectangleF(100, 100, 100, 100)
begin.Text =
"BEGIN"
NDrawingDocument1.ActiveLayer.AddChild(begin)
' create the step1 shape
Dim
step1
As
NShape = factory.CreateShape(FlowChartingShapes.Process)
step1.Bounds =
New
NRectangleF(100, 400, 100, 100)
step1.Text =
"STEP1"
NDrawingDocument1.ActiveLayer.AddChild(step1)
' connect begin and step1 with bezier link
Dim
bezier
As
NBezierCurveShape =
New
NBezierCurveShape()
bezier.StyleSheetName = NDR.NameConnectorsStyleSheet
bezier.Text =
"BEZIER"
bezier.FirstControlPoint =
New
NPointF(100, 300)
bezier.SecondControlPoint =
New
NPointF(200, 300)
NDrawingDocument1.ActiveLayer.AddChild(bezier)
bezier.FromShape = begin
bezier.ToShape = step1
' create question1 shape
Dim
question1
As
NShape = factory.CreateShape(FlowChartingShapes.Decision)
question1.Bounds =
New
NRectangleF(300, 400, 100, 100)
question1.Text =
"QUESTION1"
NDrawingDocument1.ActiveLayer.AddChild(question1)
' connect step1 and question1 with line link
Dim
line
As
NLineShape =
New
NLineShape()
line.StyleSheetName = NDR.NameConnectorsStyleSheet
line.Text =
"LINE"
NDrawingDocument1.ActiveLayer.AddChild(line)
line.FromShape = step1
line.ToShape = question1
' create the step2 shape
Dim
step2
As
NShape = factory.CreateShape(FlowChartingShapes.Process)
step2.Bounds =
New
NRectangleF(500, 100, 100, 100)
step2.Text =
"STEP2"
NDrawingDocument1.ActiveLayer.AddChild(step2)
' connect step2 and question1 with HV link
Dim
hv1
As
NStep2Connector =
New
NStep2Connector(
False
)
hv1.StyleSheetName = NDR.NameConnectorsStyleSheet
hv1.Text =
"HV1"
NDrawingDocument1.ActiveLayer.AddChild(hv1)
hv1.FromShape = step2
hv1.ToShape = question1
' connect question1 and step2 and with HV link
Dim
hv2
As
NStep2Connector =
New
NStep2Connector(
False
)
hv2.StyleSheetName = NDR.NameConnectorsStyleSheet
hv2.Text =
"HV2"
NDrawingDocument1.ActiveLayer.AddChild(hv2)
hv2.FromShape = question1
hv2.ToShape = step2
' create a self loof as bezier on step2
Dim
selfLoop
As
NBezierCurveShape =
New
NBezierCurveShape()
selfLoop.StyleSheetName = NDR.NameConnectorsStyleSheet
selfLoop.Text =
"SELF LOOP"
NDrawingDocument1.ActiveLayer.AddChild(selfLoop)
selfLoop.FromShape = step2
selfLoop.ToShape = step2
selfLoop.Reflex()
' create step3 shape
Dim
step3
As
NShape = factory.CreateShape(FlowChartingShapes.Process)
step3.Bounds =
New
NRectangleF(700, 600, 100, 100)
step3.Text =
"STEP3"
NDrawingDocument1.ActiveLayer.AddChild(step3)
' connect question1 and step3 with an HVH link
Dim
hvh1
As
NStep3Connector =
New
NStep3Connector(
False
, 50, 0,
True
)
hvh1.StyleSheetName = NDR.NameConnectorsStyleSheet
hvh1.Text =
"HVH1"
NDrawingDocument1.ActiveLayer.AddChild(hvh1)
hvh1.FromShape = question1
hvh1.ToShape = step3
' create end shape
Dim
[end]
As
NShape = factory.CreateShape(FlowChartingShapes.Termination)
[end].Bounds =
New
NRectangleF(300, 700, 100, 100)
[end].Text =
"END"
NDrawingDocument1.ActiveLayer.AddChild([end])
' connect step3 and end with VH link
Dim
vh1
As
NStep2Connector =
New
NStep2Connector(
True
)
vh1.StyleSheetName = NDR.NameConnectorsStyleSheet
vh1.Text =
"VH1"
NDrawingDocument1.ActiveLayer.AddChild(vh1)
vh1.FromShape = step3
vh1.ToShape = [end]
' connect question1 and end with curve link (uses explicit ports)
Dim
curve
As
NRoutableConnector =
New
NRoutableConnector(RoutableConnectorType.DynamicCurve)
curve.StyleSheetName = NDR.NameConnectorsStyleSheet
curve.Text =
"CURVE"
NDrawingDocument1.ActiveLayer.AddChild(curve)
curve.StartPlug.Connect(
CType
(IIf(
TypeOf
question1.Ports.GetChildAt(3)
Is
NPort, question1.Ports.GetChildAt(3),
Nothing
), NPort))
curve.EndPlug.Connect(
CType
(IIf(
TypeOf
[end].Ports.GetChildAt(1)
Is
NPort, [end].Ports.GetChildAt(1),
Nothing
), NPort))
curve.InsertPoint(1,
New
NPointF(500, 600))
' set a shadow to the document. Since styles are inheritable all objects will reuse this shadow
NDrawingDocument1.Style.ShadowStyle =
New
NShadowStyle(ShadowType.GaussianBlur, Color.Gray,
New
NPointL(5, 5), 1,
New
NLength(3))
' shadows must be displayed behind document content
NDrawingDocument1.ShadowsZOrder = ShadowsZOrder.BehindDocument
' end NDrawingDocument1 init
NDrawingDocument1.EndInit()
' end view init
NDrawingView1.EndInit()
End
Sub
Article ID: 8, Created On: 9/28/2010, Modified: 12/1/2010