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

Edges define relationships between nodes. Their appearance can be customized using arrow styles and edge styling properties.

Arrow Styles

The following arrow styles are available through the ArrowStyle enumeration:

ArrowStyle.None
ArrowStyle.Normal
ArrowStyle.Tee
ArrowStyle.Diamond
ArrowStyle.Generalization

Arrow Example

C#	コードのコピー
diagram.Edges.Add(new Edge() { Source = startNode, Target = processNode, TargetArrow = ArrowStyle.Normal });.

Style Edges in FlexDiagram

The EdgeStyle property uses ChartStyle to control the visual appearance of edges.

Property	Description
Stroke	Defines the color of the edge line.
StrokeThickness	Defines the thickness of the edge line.
Fill	Defines the fill color used in supported edge render modes.

Edge Styling Example

C#	コードのコピー
var startNode = new Node() { Title = "Start" }; var endNode = new Node() { Title = "End" }; var edge = new Edge() { Source = startNode, Target = endNode, Tooltip = "Start → End", TargetArrow = ArrowStyle.Normal }; edge.EdgeStyle = new ChartStyle() { Stroke = new SolidColorBrush(Colors.DarkOrange), StrokeThickness = 2, &Fill = new SolidColorBrush(Colors.White) }; diagram.Nodes.Add(startNode); diagram.Nodes.Add(endNode); diagram.Edges.Add(edge);

コードのコピー

var startNode = new Node() { Title = "Start" };
var endNode = new Node() { Title = "End" };
var edge = new Edge()
{
  Source = startNode,
  Target = endNode,
  Tooltip = "Start → End",
  TargetArrow = ArrowStyle.Normal
};
edge.EdgeStyle = new ChartStyle()
{
  Stroke = new SolidColorBrush(Colors.DarkOrange),
  StrokeThickness = 2,
  &Fill = new SolidColorBrush(Colors.White)
};
diagram.Nodes.Add(startNode);
diagram.Nodes.Add(endNode);
diagram.Edges.Add(edge);