Applies to: Nevron Diagram for .NET
How to create a simple diagram in ASP.NET application from scratch in Visual Studio?
The following getting started guide will help you create a ASP.NET application, which displays the following diagram:
Create a new ASP.NET application:
- Open Microsoft Visual Studio for .NET
- Select the File - New - Project command - the new project dialog will be displayed
- Select Visual C# Projects - ASP.NET Web Application
- Click the OK button
- If the current page view is Source, switch to Design
Insert Nevron Diagram component:
- The Nevron .NET Vision installation must register the NDrawingView component in the Nevron Diagram WebForm toolbox group. In case this group is created go to step 6.
- 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.WebForm.dll assembly located in the Nevron .NET Vision installation directory.
- The NDrawingView should appear at the end of the toolbox list.
- Drag and drop the NDrawingView on the page.
- Open the solution explorer and make sure to add references to the following Nevron assemblies: Nevron.Diagram.dll; Nevron.Diagram.Shapes.dll; Nevron.Diagram.WebForm.dll; Nevron.Presentation.dll; Nevron.System.dll; and Nevron.UI.WebForm.Controls.dll;
- From the Solution explorer right click on Default.aspx and select "View code".
- Use the following code example to programmatically create the diagram:
[C#]
using
System;
using
System.Drawing;
using
Nevron.Diagram;
using
Nevron.Diagram.Shapes;
using
Nevron.GraphicsCore;
...
protected
void
Page_Load(
object
sender, EventArgs e)
{
NDrawingDocument Document =
new
NDrawingDocument();
Document = NDrawingView1.Document;
Document.BackgroundStyle.FrameStyle.Visible =
false
;
// do not show ports
NDrawingView1.GlobalVisibility.ShowPorts =
false
;
Document.BeginInit();
Document.Width = 1000;
Document.Height = 1000;
NDrawingView1.ViewLayout = CanvasLayout.Fit;
// apply padding to the document bounds
NDrawingView1.DocumentPadding =
new
Nevron.Diagram.NMargins(10);
// create the flowcharting shapes factory
NFlowChartingShapesFactory factory =
new
NFlowChartingShapesFactory(Document);
// modify the connectors style sheet
NStyleSheet styleSheet = (Document.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"
;
Document.ActiveLayer.AddChild(begin);
// create the step1 shape
NShape step1 = factory.CreateShape(FlowChartingShapes.Process);
step1.Bounds =
new
NRectangleF(100, 400, 100, 100);
step1.Text =
"STEP1"
;
Document.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);
Document.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"
;
Document.ActiveLayer.AddChild(question1);
// connect step1 and question1 with line link
NLineShape line =
new
NLineShape();
line.StyleSheetName = NDR.NameConnectorsStyleSheet;
line.Text =
"LINE"
;
Document.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"
;
Document.ActiveLayer.AddChild(step2);
// connect step2 and question1 with HV link
NStep2Connector hv1 =
new
NStep2Connector(
false
);
hv1.StyleSheetName = NDR.NameConnectorsStyleSheet;
hv1.Text =
"HV1"
;
Document.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"
;
Document.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"
;
Document.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"
;
Document.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"
;
Document.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"
;
Document.ActiveLayer.AddChild(end);
// connect step3 and end with VH link
NStep2Connector vh1 =
new
NStep2Connector(
true
);
vh1.StyleSheetName = NDR.NameConnectorsStyleSheet;
vh1.Text =
"VH1"
;
Document.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"
;
Document.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
Document.Style.ShadowStyle =
new
NShadowStyle(
ShadowType.GaussianBlur,
Color.Gray,
new
NPointL(5, 5),
1,
new
NLength(3));
// shadows must be displayed behind document content
Document.ShadowsZOrder = ShadowsZOrder.BehindDocument;
// resize document to fit all shapes
NDrawingView1.Document.SizeToContent();
// end nDrawingDocument1 init
Document.EndInit();
}
[VB.NET]
Imports
System
Imports
System.Drawing
Imports
Nevron.Diagram
Imports
Nevron.Diagram.Shapes
Imports
Nevron.GraphicsCore
...
Protected
Sub
Page_Load(sender
As
Object
, e
As
EventArgs)
Dim
Document
As
New
NDrawingDocument()
Document = NDrawingView1.Document
Document.BackgroundStyle.FrameStyle.Visible =
False
' do not show ports
NDrawingView1.GlobalVisibility.ShowPorts =
False
Document.BeginInit()
Document.Width = 1000
Document.Height = 1000
NDrawingView1.ViewLayout = CanvasLayout.Fit
' apply padding to the document bounds
NDrawingView1.DocumentPadding =
New
Nevron.Diagram.NMargins(10)
' create the flowcharting shapes factory
Dim
factory
As
New
NFlowChartingShapesFactory(Document)
' modify the connectors style sheet
Dim
styleSheet
As
NStyleSheet = TryCast(Document.StyleSheets.GetChildByName(NDR.NameConnectorsStyleSheet, -1), NStyleSheet)
Dim
textStyle
As
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"
Document.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"
Document.ActiveLayer.AddChild(step1)
' connect begin and step1 with bezier link
Dim
bezier
As
New
NBezierCurveShape()
bezier.StyleSheetName = NDR.NameConnectorsStyleSheet
bezier.Text =
"BEZIER"
bezier.FirstControlPoint =
New
NPointF(100, 300)
bezier.SecondControlPoint =
New
NPointF(200, 300)
Document.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"
Document.ActiveLayer.AddChild(question1)
' connect step1 and question1 with line link
Dim
line
As
New
NLineShape()
line.StyleSheetName = NDR.NameConnectorsStyleSheet
line.Text =
"LINE"
Document.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"
Document.ActiveLayer.AddChild(step2)
' connect step2 and question1 with HV link
Dim
hv1
As
New
NStep2Connector(
False
)
hv1.StyleSheetName = NDR.NameConnectorsStyleSheet
hv1.Text =
"HV1"
Document.ActiveLayer.AddChild(hv1)
hv1.FromShape = step2
hv1.ToShape = question1
' connect question1 and step2 and with HV link
Dim
hv2
As
New
NStep2Connector(
False
)
hv2.StyleSheetName = NDR.NameConnectorsStyleSheet
hv2.Text =
"HV2"
Document.ActiveLayer.AddChild(hv2)
hv2.FromShape = question1
hv2.ToShape = step2
' create a self loof as bezier on step2
Dim
selfLoop
As
New
NBezierCurveShape()
selfLoop.StyleSheetName = NDR.NameConnectorsStyleSheet
selfLoop.Text =
"SELF LOOP"
Document.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"
Document.ActiveLayer.AddChild(step3)
' connect question1 and step3 with an HVH link
Dim
hvh1
As
New
NStep3Connector(
False
, 50, 0,
True
)
hvh1.StyleSheetName = NDR.NameConnectorsStyleSheet
hvh1.Text =
"HVH1"
Document.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"
Document.ActiveLayer.AddChild([end])
' connect step3 and end with VH link
Dim
vh1
As
New
NStep2Connector(
True
)
vh1.StyleSheetName = NDR.NameConnectorsStyleSheet
vh1.Text =
"VH1"
Document.ActiveLayer.AddChild(vh1)
vh1.FromShape = step3
vh1.ToShape = [end]
' connect question1 and end with curve link (uses explicit ports)
Dim
curve
As
New
NRoutableConnector(RoutableConnectorType.DynamicCurve)
curve.StyleSheetName = NDR.NameConnectorsStyleSheet
curve.Text =
"CURVE"
Document.ActiveLayer.AddChild(curve)
curve.StartPlug.Connect(TryCast(question1.Ports.GetChildAt(3), NPort))
curve.EndPlug.Connect(TryCast([end].Ports.GetChildAt(1), NPort))
curve.InsertPoint(1,
New
NPointF(500, 600))
' set a shadow to the nDrawingDocument1. Since styles are inheritable all objects will reuse this shadow
Document.Style.ShadowStyle =
New
NShadowStyle(ShadowType.GaussianBlur, Color.Gray,
New
NPointL(5, 5), 1,
New
NLength(3))
' shadows must be displayed behind document content
Document.ShadowsZOrder = ShadowsZOrder.BehindDocument
' resize document to fit all shapes
NDrawingView1.Document.SizeToContent()
' end nDrawingDocument1 init
Document.EndInit()
End
Sub
Article ID: 123, Created On: 11/9/2010, Modified: 12/1/2010