Quick Start Tutorial

written by Francois

Purpose

This tutorial explains the basic steps and necessary code in order to have a simple application with a graph canvas, the shapes viewer and the property grid. This application allows you to see and experiment with the basic features of the Netron graph control.

Prerequisites

If you haven't added the graph control to your Visual Studio toolbox, see the topic "How do I add the graph control in the Visual Studio toolbox?" NetronGraphLibFAQ#add in the FAQ.
It is assumed that you have a basic understanding of Visual Stuido and C#.
You should have downloaded two assemblies: the Netron graph assembly called NetronGraphLib.dll containing the two essential graph controls and the basic shapes assembly called BasicShapes.dll containing the basic shapes used by the graph controls.
You should have the property grid control in your VS toolbox, see "Can I access the shape and graph properties at run-time?" NetronGraphLibFAQ#props in the FAQ

Download this tutorial's code

You can download the code of this project which contains all the source code of the control and the code of this tutorial. Some more stuff is shown in the download like

printing diagrams
open/save diagrams

Designing the form

Let us begin by designing the only form that this application contains.

Start a new C# 'Windows application' project in Visual Studio and open the default 'Form1' form in the designer.
Go the toolbox, drop the two Netron graph controls (GraphControl and GraphShapesView) on the form as well as a property grid. Your form should look something like this: internal://d3b22e668b790d289a2c8e7faf88b8d2.jpeg

The design-time time interface of the two controls mimic, to some extend, the run-time interface. The shape viewer displays a tab called "dummy" with some dummy shapes. This does not reflect the loaded shapes at run-time since the shapes are loaded dynamically. The graph canvas does, however, reflect most properties. You can explore the various settings, cfr. the topic called "What are the design-time properties of the graph control?" NetronGraphLibFAQ#props in the FAQ for more details.
Run the project and notice that the shape viewer does not contain any tabs or shapes. The graph control does not present any menu or shapes.

Adding the shape libraries

Let's add some shapes to the controls.

Add a configuration file to the project and complete it with the following code:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
<!-- custom config sections need appropriate classes -->
<configSections>
<!-- The GraphLib configuration settings -->
<section name="GraphLibs"
type="Netron.GraphLib.Configuration.GraphLibConfigurationHandler,NetronGraphLib"/>
</configSections>

<!-- Settings of the GraphLib control -->
<GraphLibs>
<GraphLib location="BasicShapes.dll"/>
</GraphLibs>
</configuration>

The 'location' attribute of the GraphLib tag should contain the path to the BasicShape.dll assembly. If you don't specify a path this settings tells the controls that the assembly is in the bin directory of the application.

Go to the form constructor and add the following lines:

graphControl1.LoadLibraries();
graphShapesView1.LoadLibraries();

These lines instruct the controls to load the shape libraries specified in the configuration files.

Run the application again and should see now the 'Basic shapes' tab in the shapes viewer.
Drag and drop some shapes onto the graph control and hover with the mouse over them. If the mouse hits a shape connector it will light up. By clicking on any of the connectors and holding the left mouse button pressed you will see a connection following the mouse. Move the mouse, while still holding the left button down, to another shape until you hit a connector and unpress the left mouse button. You should now have two shapes connected via a connection.

The context menu

The context menu of the graph control is not visible by default. You can activated it via the properties of the graph control, set EnableContextMenu to true and run the application again. You should now be able to add shapes both via the shapes viewer and via the context menu.

Notice that selecting the 'Properties' does not display any properties.

The shape properties

Shape properties are only visible in the property grid if you connect the 'ShowNodeProperties' event to the property grid.

Go to the graph control properties again and select the 'Events' tab. Halfway the properties you should see a section called 'Graph' wherein various event are listed. These are the graph events you attach code to.

Click the ShowNodeProperties line and press enter, Visual Studio will automatically bind the event for you to an event handler.
Add the following code to the function:

private void graphControl1_ShowNodeProperties(object sender,
Netron.GraphLib.PropertyBag props)
{
        this.propertyGrid1.SelectedObject=props;
}

The line instructs the property grid to load the stuff handed over by the event. The PropertyBag object contains only those things that you can modify.

Run the application again, add some shapes and a connection again. Select any of the shapes or connection and double click. You should now see in the property grid the changeable properties. Alternatively, you can use the context menu to the properties.

Adding shapes via code

There is a third way to add shapes and connection to the graph control.

Add a button to the form, double click it to have VS add a click handler
Add the following code to the event handler:

Shape shape1 = graphControl1.AddNode("Item 1",new PointF(15,15));
Shape shape2 = graphControl1.AddNode("Item 2", new PointF(80,80));
graphControl1.AddEdge(shape1.Connectors[0], shape2.Connectors[0]);

Run the application and click on the newly added button, you should now see two node attached to each other with a connection.

What's next?

There is much to explore than what has been described above. The simple things you should try out are:

Explore the events, properties and methods of the graph control
Modify and test the various design-time properties
Try to get the layout working

If you feel like exploring some more solid features, you could try:

adding your own shapes and libraries
download and modify the control's code to your needs
explore the other tutorials on this site
Try out the various hotkeys of the controls

Other tutorials can be found in the "Graph tutorials page" <b style="color:black;background-color:#ffff66">NetronGraphLibTutorials</b>.