Version

Relationship Between Nodes

Topic Overview

Purpose

The purpose of this document is to show how the relationship types can be set for the connected nodes with icons indicating the source and target of the connected nodes within the xamNetworkNode™.

Required background

Background type Content

Concepts

You need to be familiar with the following concept:

  • Binding the xamNetworkNode control to your data source with connecting nodes

Topics

You need to first read the following topic:

Control Configuration Overview

Control configuration chart

The table below maps the configurable visual representation of the source and target nodes relationship, the style and size of the corresponding icons.

Configurable screen elements and behaviors Configuration details Configuration properties

Icon to indicate the source and target nodes

Visual representation indicating the starting and end of the line segment connected from the source node to the target node.

Style for LineStartCap and LineEndCap icons

User defined style for the LineStartcap and LineEndCap icons.

Size for LineStartCap and LineEndCap icons

User defined size for the LineStartcap and LineEndCap icons.

LineStartCap/LineEndCap

The source indicates where the line initiates and the target indicates the line destination. The source is initiated from a parent node pointing to a child node as the target.

LineStartCap/LineEndCap property settings

The table below maps the setting for visual representation of the source and target nodes relationship.

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

Indicate the source and target nodes with icons

  • Arrow

  • Cross

  • Diamond

  • Ellipse

  • SolidArrow

  • Square

  • Tee

  • None

LineStartCap/LineEndCap example

The image and code example below demonstrate the setting for LineStartCap/LineEndCap. Source node with the LineStartCap related to the target node with the LineEndCap:

xamNetworkNode Relationship Between Nodes 01.png

Code Example:

In XAML:

<ig:XamNetworkNode LineStartCap="Ellipse" LineEndCap="Arrow">

In C#:

xnn.LineEndCap = LineCap.Arrow;
xnn.LineStartCap = LineCap.Ellipse;

In Visual Basic:

xnn.LineEndCap = LineCap.Arrow
xnn.LineStartCap = LineCap.Ellipse

LineStartCapStyle/LineEndCapStyle

LineStartCapStyle/LineEndCapStyle property settings

The table below maps the setting of the style for corresponding icons for connecting nodes.

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

Change the style for LineStartCap and LineEndCap icons

Based on the defined style in XAML

LineStartCapStyle/LineEndCapStyle example

The image and code example bellow demonstrate the setting for LineStartCapStyle/LineEndCapStyle:

xamNetworkNode Relationship Between Nodes 02.png

Code Example:

In XAML:

<Style TargetType="Path" x:Key="startCap">
     <Setter Property="Stroke" Value="DarkGreen" />
     <Setter Property="StrokeThickness" Value="1" />
     <Setter Property="Fill" Value="Gold" />
</Style>
<Style TargetType="Path" x:Key="endCap">
      <Setter Property="Stroke" Value="Red" />
      <Setter Property="Fill" Value="Goldenrod" />
      <Setter Property="StrokeThickness" Value="1" />
</Style>

LineStartCapSize/LineEndCapSize

LineStartCapSize/LineEndCapSize property settings

The table below maps the setting of the size for corresponding icons for connecting nodes.

Note
Note:

if the LineStartCapSize and LineEndCapSize have the same value, then the LineCapSize property can be used instead. The value will apply for both start and end caps.

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

Change the size for LineStartCap and LineEndCap icons

Double value

LineStartCapSize/LineEndCapSize example

The image and code example bellow demonstrate the setting for LineStartCapSize/LineEndCapSize:

xamNetworkNode Relationship Between Nodes 03.png

Code Example:

In XAML:

<ig:XamNetworkNode LineEndCapSize="15" LineStartCapSize="5">

In C#:

xnn.LineEndCapSize = 15;
xnn.LineStartCapSize = 5;

In Visual Basic:

xnn.LineEndCapSize = 15
xnn.LineStartCapSize = 5