Create DiagramView Instance

After following one of the previous topics, you should be able to create a DiagramView instance in your WinForms UI.

Add a DiagramView from code

1. Open your form's code file.
2. Import MindFusion.Diagramming and MindFusion.Diagramming.WinForms namespaces.
3. In form's constructor, create a DiagramView and add it to form's Controls collection.

C#

using MindFusion.Diagramming;
using MindFusion.Diagramming.WinForms;

public partial class DiagramForm : Form
{
    DiagramView diagramView;

    public DiagramForm()
    {
        InitializeComponent();

        diagramView = new DiagramView();
        diagramView.Dock = DockStyle.Fill;
        Controls.Add(diagramView);
    }
.....

Add a DiagramView from toolbox

If you have installed the library locally and targeting .NET 4, or added the MindFusion.Diagramming Nuget package, you should be able to add DiagramView control from the Visual Studio toolbox:

1. Open the Visual Studio form designer.
2. Open the toolbox (Ctrl + Alt + X).
3. Select and drag the DiagramView icon to your form.
4. Select and drag the Diagram icon to your form. A Diagram instance represents the diagram model, and is also used to subscribe to events such as NodeCreated (which are view-agnostic).
5. Select the DiagramView and set its Diagram property to the Diagram instance.

Customize the diagram properties

Now you can set the properties of the Diagram and the DiagramView in the 'Properties' window or from code.

• Start with the 'Name' property, which defines the name of the variable you will use to access the objects from code.
• Choose a value for the Behavior property of DiagramView, which defines how the view must interpret actions done with the mouse by users of your application. The default value LinkShapes specifies that users can draw shape nodes and connect them with links. Another value - LinkTables - allow drawing tables and relations. Modify bans users from drawing new items, but allows them to modify existing ones.
• Customize the appearance of your diagram by setting properties from the 'Appearance' category, such as ShowGrid or BackBrush.
• Properties from the diagram's 'Defaults' category specify initial values for the properties of diagram elements.

You are now ready to write code. A good place to start is in event handlers - either events raised by the Diagram component whose handlers let you run business logic for diagram modifications, or events raised by other user interface elements in your application whose handlers modify the diagram or view. The events exposed by MindFusion.Diagramming are listed in the 'Events' tab of the 'Properties Window' if your project is in C#. If using VB.NET, MindFusion.Diagramming events handlers can be created by selecting the Diagram instance and any of its events in the top-side combo boxes of the code editor.

Browse the other sections of this help file to learn more about the functionality provided by the MindFusion.Diagramming classes, methods and properties. Follow the tutorials to learn how to populate the diagram model programmatically or create custom item types.