Version

Configuring the Shape of the Diagram Nodes (xamDiagram)

Topic Overview

Purpose

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. If you choose to use custom shapes or a custom data template, refer to Configuring the Visualization of the Content of the Diagram Items. This topic explains how to set DataTemplates for the content of diagram items and for editing that content.

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.

Introduction

Diagram nodes shape configuration summary

The xamDiagram provides a number of pre-defined shapes for the nodes. (See the General Overview topic for details.) A pre-defined shape is selected through the ShapeType property. This property accepts as a value the respective node shapes available as ShapeType enumeration. If the desired shape is not available as a pre-defined shape, a custom shape can be set to the Geometry property.

When the Geometry property is set, the ShapeType setting is disregarded. Regardless of whether the Geometry and ShapeType properties are set, the DisplayTemplate is applied; if the ShapeType is set to None or the Geometry is set to an empty geometry, this results in no visible shape (only what is defined in the content and the template will be displayed).

Settings Display Notes

Geometry

Anything other than an empty geometry

Specified geometry

Overrides ShapeType

An empty geometry

ShapeType

An available ShapeType enumeration

Specified enumeration

Select a pre-defined shape from a collection

Always applied

Further customization of diagram nodes is possible through the Content and DisplayTemplate properties which are independent from the Geometry setting. For details on how to configure a template for diagram nodes, refer to Configuring the Visualization of the Content of the Diagram Items.

Note
Note:

Templates are normally used to manage how the content of the node looks inside the shape (be it pre-defined or custom-created through the Geometry property) and not to define the shape itself; however, because templates support this capability, it is mentioned here for the sake of the completeness of this help content.

Diagram nodes shape configuration summary chart

The following table maps the desired node shape to the property settings that manage it. Further details on the green-highlighted items are available after the table.

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

Configure a pre-defined shape

The enum corresponding to the desired pre-defined shape.

Configure a custom shape

Using a geometry

The desired shape defined as a custom geometry.

Using data template

The desired data object

The desired DataTemplate for displaying the Content

Configuring a Pre-Defined Shape

Overview

To set the desired shape for the diagram nodes, specify the corresponding enum value as the value of the ShapeType property.

Property settings

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

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

Chevron

Chevron

Circle

ShapeType

Circle

Cross, thick

ShapeType

Cross

Cross, thin

ShapeType

ThinCross

Ellipse

ShapeType

Ellipse

Heptagon

ShapeType

Heptagon

Hexagon

ShapeType

Hexagon

Octagon

ShapeType

Octagon

Pentagon

ShapeType

Pentagon

Rectangle

ShapeType

Rectangle

Rectangle, rounded

ShapeType

RoundedRectangle

Rhombus

ShapeType

Rhombus

Square

ShapeType

Square

Triangle

ShapeType

Triangle

Triangle, right-angled, with the right angle pointing downward-left.

ShapeType

RightTriangle

Triangle, right-angled, with the right angle pointing downward-right.

ShapeType

RightTriangleMirrored

Example

The screenshot below demonstrates how a xamDiagram consisting of several nodes with varying ShapeType settings would look as a result of the following code:

xamDiagram Configuring Diagram Node Geometry 1.png

Following is the code that implements this example.

In XAML:

<ig:XamDiagram x:Name="Diagram" Background="Gray">
    <ig:DiagramNode Position="0,0"     ShapeType="Chevron" Content="Chevron"/>
    <ig:DiagramNode Position="140,0"   ShapeType="Circle" Content="Circle"/>
    <ig:DiagramNode Position="280,0"   ShapeType="Cross" Content="Cross"/>
    <ig:DiagramNode Position="0,100"   ShapeType="Ellipse" Content="Ellipse"/>
    <ig:DiagramNode Position="140,100" ShapeType="Heptagon" Content="Heptagon"/>
    <ig:DiagramNode Position="280,100" ShapeType="Hexagon" Content="Hexagon"/>
    <ig:DiagramNode Position="0,200"   ShapeType="None" Content="None"/>
    <ig:DiagramNode Position="140,200" ShapeType="Octagon" Content="Octagon"/>
    <ig:DiagramNode Position="280,200" ShapeType="Pentagon" Content="Pentagon"/>
    <ig:DiagramNode Position="0,300"   ShapeType="Rectangle" Content="Rectangle"/>
    <ig:DiagramNode Position="140,300" ShapeType="Rhombus" Content="Rhombus"/>
    <ig:DiagramNode Position="280,300" ShapeType="RightTriangle" Content="RightTriangle"/>
    <ig:DiagramNode Position="0,400"   ShapeType="RightTriangleMirrored" Content="RightTriangleMirrored"/>
    <ig:DiagramNode Position="140,400" ShapeType="RoundedRectangle" Content="RoundedRectangle"/>
    <ig:DiagramNode Position="280,400" ShapeType="Square" Content="Square"/>
    <ig:DiagramNode Position="0,500"   ShapeType="ThinCross" Content="ThinCross"/>
    <ig:DiagramNode Position="140,500" ShapeType="Triangle" Content="Triangle"/>
</ig:XamDiagram>

Configuring a Custom Shape

Overview

Any custom shape can be applied to a diagram node by specifying a custom geometry for the desired shape.

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:

Apply a custom geometry

The desired geometry

Example

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

Property Value

In XAML:

<GeometryGroup>  <LineGeometry StartPoint="0,0" EndPoint="40,40"/>  <LineGeometry StartPoint="40,0" EndPoint="0,40"/> </GeometryGroup>
xamDiagram Configuring Diagram Node Geometry 2.png

Following is the code that implements this example.

In XAML:

<ig:XamDiagram x:Name="Diagram">
    <ig:DiagramNode Name="node2" StrokeThickness="5">
        <ig:DiagramNode.Geometry>
            <GeometryGroup>
                <LineGeometry StartPoint="0,0" EndPoint="40,40"/>
                <LineGeometry StartPoint="40,0" EndPoint="0,40"/>
            </GeometryGroup>
        </ig:DiagramNode.Geometry>
    </ig:DiagramNode>
</ig:XamDiagram>

Related Topics

The following topics provide additional information related to this topic.

Topic Purpose

This topic explains how to configure custom diagram nodes and connections in the xamDiagram control using a template.

This topic explains how to bind the xamDiagram control to data.