Version

Configuring the Position and Size of Diagram Nodes (xamDiagram)

Topic Overview

Purpose

This topic explains how to control the size and position of individual diagram nodes of the xamDiagram™ control. For information on how to manage the size and position of the nodes altogether, refer to the Configuring the Layout topic.

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.

Node Position and Size Configuration Summary

Coordinate system of the diagram space

The position of a diagram item (node or connection) is determined relative to the coordinate system of the diagram; in this coordinate system, the top-left corner is considered the point of origin and has coordinates of 0, 0. The coordinate numbers represent an offset from the point of origin in pixels. The first number represents the horizontal offset to the right and the second number – the vertical offset in downward direction. The coordinates of a node represent the placement of its top-left corner. For connections, the coordinates are managed by separate properties for their start and end points or are determined by the positions of their snap points) . The following picture represents the coordinate system of a diagram and a node positioned in it at coordinates of 100,100.

xamDiagram Configuring the Position and Size of Diagram Nodes 1.png

Node position and size configuration summary

The nodes of xamDiagram can be positioned either individually at any location on the diagram’s surface or by applying a layout algorithm (setting available through the Layout property. (For information about the latter approach, refer to the Configuring the Layout topic.)

By default, if no explicit overriding has been applied, a newly created node is displayed at the point of origin of the coordinate system (0, 0).

The size of a diagram node can be controlled explicitly by setting its width and height. There is a default size which depends on its shape. (For reference on default sizes, see Nodes Default Sizes.)

Note
Note

Note:

If the value of the node’s Content property does not fit within in the borders of the node, the content will overflow.

Node position and size configuration summary chart

The following table explains briefly the configurable aspects of a diagram node related to its position and size and maps them to the properties that configure them.

Configurable aspect Details Properties

Node position

The position of the node on the diagram represented as a point indicating the offset of the top-left corner of the node from the top-left corner of the diagram (in pixels), e.g. “(5,25) .

Node size

The size of the node results from setting its width and height which are managed independently by individual properties.

  • Width

  • Height

Node’s behavior on resize

When the user resizes a node, its horizontal/vertical aspect ratio can either be preserved (the node stretches or shrinks uniformly in both directions) or can be skewed according to the user’s mouse movement in horizontal or vertical direction (resulting in a new aspect ratio).

Configuring the Position of a Diagram Node

Overview

You specify the node position by providing the pixel values for the horizontal and vertical placement of the node on the diagram surface to the node’s Position property. The value format is “X ,Y , e.g. "75,125” .

Property settings

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

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

Configure the node position

The desired X,Y coordinates in pixels, relative to the top-left edge of the diagram.

Example

The screenshot below demonstrates node positioning as a result of the following settings:

Property Value

“5, 125”

xamDiagram Configuring the Position and Size of Diagram Nodes 2.png

Following is the code that implements this example.

In XAML:

<ig:XamDiagram x:Name="diagram"
               Width="300"
               Height="250"
               Background="#F9F9F9">
    <ig:DiagramNode x:Name="node0"
                    Position="5,125"/>
</ig:XamDiagram>

Configuring the Size of a Diagram Node

Overview

The size of a diagram node can be explicitly controlled by providing values for its Width and Height properties. By default the size depends on the node’s shape (for the pre-defined shapes).

In order to specify whether the aspect ratio of the diagram node should be preserved when resizing occurs, the MaintainAspectRatio property should be set. For all node types apart from square, circle and rhombus, the aspect ratio is not preserved by default. The current aspect ratio of a diagram node could be obtained from the value of the ResizeRatio property.

Property settings

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

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

Node width

Width

The desired width in pixels.

Node height

Height

The desired height in pixels.

Resize mode

  • True – preserves the ratio of the shape while resizing

  • False – doesn’t preserve the aspect ratio of the shape while resizing (the aspect ratio changes according to the actual changes in the dimensions while resizing)

Example

The screenshot below demonstrates how the node looks as a result of the following settings:

Property Value

Width

65

Height

75

“True”

xamDiagram Configuring the Position and Size of Diagram Nodes 3.png

Following is the code that implements this example.

In XAML:

<ig:XamDiagram x:Name="diagram"
               Width="300"
               Height="250"
               Background="#F9F9F9">
    <ig:DiagramNode x:Name="node0"
                    Width="65"
                    Height="75"
                    MaintainAspectRatio="True"/>
</ig:XamDiagram>

Related Topics

The following topics provide additional information related to 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 configure the shape of the diagram nodes of the xamDiagram control by either selecting a pre-defined shape or applying a custom shape.

This topic explains how to set DataTemplates for the content of diagram items and for editing that content.