Diagram for .NET / Getting Started / Integrating in Windows Forms / My First WinForm Diagram

In This Topic
My First WinForm Diagram
In This Topic

The following guide will help you create a WinForm application, which displays the following diagram:

 Create a new WinForm application
  1. Open Microsoft Visual Studio for .NET
  2. Select the the File - New - Project command - the new project dialog will be displayed
  3. Select Visual C# Projects - Windows Applications
  4. Click the OK button - the designer for Form1 should automatically appear

 Insert diagram components and controls
  1. The 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.
  2. Right click on the Toolbox background. Select the "Add/Remove Items..." command.
  3. In the "Customize Toolbox" dialog select the ".NET Framework Components" tab.
  4. Click on the "Browse..." button and select the Nevron.Diagram.dll assembly located in the installation directory.
  5. The NDrawingDocument component should appear at the end of the toolbox Windows Forms list.
  6. 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.
  7. Open the solution explorer and add a reference to the Nevron.Diagram.Shapes.dll assembly.
  8. Drag and drop the NDrawingDocument to the form - it should appear in the component tray, since it is a component.
  9. Drag and drop the NDrawingView to the form and resize it as you see fit.
  10. 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#
Copy Code 
...
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();
}
Visual Basic
Copy Code 
...
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

 

 

 

© 2025 Nevron Software LLC. All rights reserved. Send Feedback.