Version

Configuring the Layout (xamDiagram)

Topic Overview

Purpose

This topic explains how to configure the layout of the xamDiagram™ and how to create a custom layout scheme.

Required background

The following topics are prerequisites to understanding this topic:

Topic Purpose

This topic provides a conceptual overview of the xamDiagram control and its main features and capabilities.

This topic explains how to add the xamDiagram control to a WPF application.

In this topic

This topic contains the following sections:

Introduction

Diagram layout configuration summary

There are two ways to position nodes in the xamDiagram – by setting the DiagramNode.Position property or the XamDiagram.Layout property. Currently three predefined layouts are available – ForceDirectedGraphDiagramLayout, TreeDiagramLayout and GridDiagramLayout. Custom layouts are supported through implementations of the IDiagramLayout interface. The IDiagramLayout interface has a single ArrangeNodes method that accepts a single IEnumerable<DiagramNode> parameter. In this method the Position property of the provided nodes must be set according to the desired layout scheme.

Note
Note:

The diagram layout is applied only initially to the diagram. If the items are added/removed later, the layout is not automatically applied. In order to rearrange the nodes at a later stage, call the RefreshLayout method.

Diagram layout configuration summary chart

The following table briefly explains the configurable aspects of the xamDiagram layout and maps them to the API that configure them.

In order to: Use this API member: And:

Apply a layout

Set it to an instance of either the TreeDiagramLayout class, the ForceDirectedGraphDiagramLayout class or any instance of a class implementing the IDiagramLayout interface

Create a custom layout

Create a class that implements this interface

Applying a layout

Overview

To set the layout of the xamDiagram , set its Layout property to an instance of the provided ForceDirectedGraphDiagramLayout, TreeDiagramLayout or GridDiagramLayout classes or a custom IDiagramLayout implementation.

Property settings

The following table maps the desired configuration to the property settings that manage it.

In order to set the: Use this property: And set it to:

Diagram nodes layout

An instance of class implementing the IDiagramLayout interface.

Example

The screenshot below demonstrates how a xamDiagram looks with its Layout property set to a ForceDirectedGraphDiagramLayout instance:

xamDiagram Configuring The Layout 1.png

Following is the code for applying the ForceDirectedGraphDiagramLayout.

In XAML:

<ig:XamDiagram>
    <ig:XamDiagram.Layout>
        <ig:ForceDirectedGraphDiagramLayout />
    </ig:XamDiagram.Layout>
    …
</ig:XamDiagram>

Creating a Custom Layout

Introduction

The following procedure explains how to create a custom layout that will position the diagram nodes sequentially in a down-right direction.

Preview

The following screenshot is a preview of the result.

xamDiagram Configuring The Layout 2.png

Prerequisites

To complete the procedure, you need the following:

Steps

The following steps demonstrate how to create a custom diagonal layout.

1. Implement the IDiagramLayout interface.

Create a class implementing the IDiagramLayout interface.

Create a new DiagonalLayout class that implements the IDiagramLayout interface. In the ArrangeNodes method iterate over the nodes and set the Position of each node to the bottom-right corner of the Bounds rectangle of the previous node. In this example an additional Offset property is added to control the spacing between nodes. Refer to the Full code for the implementation details.

2. Apply the diagonal layout.

In order to apply the diagonal layout set an instance of the DiagonalLayout class.

Full code

Following is the full code for this procedure.

In C#:

namespace XamDiagramSample
{
    public class DiagonalLayout : IDiagramLayout
    {
        public double Offset { get; set; }
        public void ArrangeNodes(IEnumerable<DiagramNode> nodes)
        {
            Point nextPoint = new Point(0,0);
            foreach (DiagramNode node in nodes)
            {
                node.Position = nextPoint;
                nextPoint = new Point(node.Bounds.Right + Offset, node.Bounds.Bottom + Offset);
            }
        }
    }
}

In Visual Basic:

Namespace XamDiagramSample
    Public Class DiagonalLayout
        Implements IDiagramLayout
        Public Property Offset As Double
        Public Sub ArrangeNodes(nodes As IEnumerable(Of DiagramNode)) Implements IDiagramLayout.ArrangeNodes
            Dim nextPoint As New Point(0, 0)
            For Each node As DiagramNode In nodes
                node.Position = nextPoint
                nextPoint = New Point(node.Bounds.Right + Offset, node.Bounds.Bottom + Offset)
            Next
        End Sub
    End Class
End Namespace

In XAML:

<ig:XamDiagram x:Name="Diagram"
        xmlns:local="clr-namespace:XamDiagramSample">
    <ig:XamDiagram.Layout>
        <local:DiagonalLayout Offset="10"/>
    </ig:XamDiagram.Layout>
    <ig:DiagramNode Content="1"/>
    <ig:DiagramNode Content="2"/>
    <ig:DiagramNode Content="3"/>
    <ig:DiagramNode Content="4"/>
</ig:XamDiagram>

Related Topics

The following topic provides additional information related to this topic.

Topic Purpose

This topic explains how to control the size and position of individual diagram nodes of the xamDiagram control.