エッジの外観をカスタマイズする

Edges define relationships between nodes. Their appearance and behavior can be customized using arrow, style, and connection properties.

Edge Properties

The following properties define edge configuration.

Property	Type	Description
Text	string	Specifies the text displayed on the edge.
Source	Node	Specifies the source node for the edge.
SourceID	string	Specifies the identifier of the source node.
Target	Node	Specifies the target node for the edge.
TargetID	string	Specifies the identifier of the target node.
SourceArrow	ArrowStyle	Specifies the arrow style at the source endpoint.
TargetArrow	ArrowStyle	Specifies the arrow style at the target endpoint.
EdgeStyle	ChartStyle	Applies visual styling to the edge.
Tooltip	string	Specifies the tooltip displayed for the edge.

Arrow Properties

The following values define edge arrow rendering behavior.

Value	Description
Default	Uses the default diagram arrow style.
None	Removes the arrow from the edge.
Other enum values	Displays the specified arrow style.

Example

CS	コードのコピー
edge.SourceArrow = ArrowStyle.None; edge.TargetArrow = ArrowStyle.Default;

Edge Styling

The following properties customize edge appearance.

Property	Type	Example
Stroke	Brush	Brushes.DarkOrange
StrokeThickness	double	2
Fill	Brush	Brushes.White
StrokeDashArray	DoubleCollection	4,2
Opacity	double	0?E

Example

CS	コードのコピー
edge.EdgeStyle = new ChartStyle() { Stroke = Brushes.DarkOrange, StrokeThickness = 2, StrokeDashArray = new DoubleCollection() {4,2} };

Define Edge Connections

Edges can be connected using:

Node references
Node IDs

By Node References

CS	コードのコピー
edge.Source = node1; edge.Target = node2;

By Node IDs

CS	コードのコピー
edge.SourceID = "Node1"; edge.TargetID = "Node2";

Complete Edge Example

CS	コードのコピー
var edge = new Edge { Text = "Process Flow", Source = node1, Target = node2, SourceID = "StartNode", TargetID = "EndNode", SourceArrow = ArrowStyle.None, TargetArrow = ArrowStyle.Default, Tooltip = "Connection between nodes", EdgeStyle = new ChartStyle { Stroke = Brushes.DarkOrange, StrokeThickness = 2, Fill = Brushes.White, StrokeDashArray = new DoubleCollection() {4,2} } };

コードのコピー

var edge = new Edge
{
    Text = "Process Flow",
    Source = node1,
    Target = node2,
    SourceID = "StartNode",
    TargetID = "EndNode",
    SourceArrow = ArrowStyle.None,
    TargetArrow = ArrowStyle.Default,
    Tooltip = "Connection between nodes",
    EdgeStyle = new ChartStyle
    {
        Stroke = Brushes.DarkOrange,
        StrokeThickness = 2,
        Fill = Brushes.White,
        StrokeDashArray = new DoubleCollection() {4,2}
    }
};