Search
Create DiagramView Instance

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

Add a DiagramView using Xaml markup

  1. Add an xmlns attribute to the root Xaml object and set its value to http://mindfusion.eu/diagramming/wpf, which lets you create objects from the Diagramming namespace in Xaml.
  2. Add a DiagramView element, and set its Name attribute to a variable name that lets you access the instance from code-behind.
  3. Optionally add a nested Diagram element, and set its Name attribute to a variable name that lets you access the instance from code-behind. If this step is omitted, you can later access the diagram model object through the Diagram property of DiagramView.

Xaml  Copy Code

<Window x:Class="DiagramApp.MainWindow"
    ...
    xmlns:diag="http://mindfusion.eu/diagramming/wpf"
    ...>

    <Grid>
        <diag:DiagramView x:Name="diagramView">
            <diag:Diagram x:Name="diagram" />
        </diag:DiagramView>
    </Grid>
</Window>

Add a DiagramView from toolbox

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

    1. Open the Visual Studio toolbox.
    2. Select and drag the DiagramView icon to your Xaml window, and drop it into a panel. That creates a DiagramView component.
    3. Set the view's Name attribute to a variable name that lets you access the instance from code-behind.
    4. Optionally drag a Diagram to the DiagramView, and set its Name attribute to a variable name that lets you access the instance from code-behind. If this step is omitted, you can later access the default diagram model object through the Diagram property of DiagramView.

Customize behavior and appearance

Now you can set properties of the DiagramView and Diagram by specifying attribute values in Xaml markup, or using the Visual Studio 'Properties' window.

  • Choose a value for the Behavior property, which defines how the control interprets user input. The default value LinkShapes specifies that users can draw shape nodes and connect them with links. Another value - LinkTables - allows drawing tables and relations. Behavior.Modify prevents 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. Properties from the diagram's 'Defaults' category specify initial values for the properties of diagram elements. Browse the other sections of this help file to learn more about the functionality provided by the WpfDiagram's classes, methods and properties.