ノードの外観をカスタマイズする

Nodes are the primary visual elements in a diagram. Their appearance can be customized using text, shape, style, images, and tooltip properties.

Available Node Shapes

FlexDiagram provides the following node shapes through the C1.Diagram.Shape enumeration:

Shape.None
Shape.Rectangle
Shape.RoundedRectangle
Shape.Circle
Shape.Ellipse
Shape.Rhombus
Shape.Diamond
Shape.Hexagon
Shape.Octagon
Shape.House

Set Node Shape in Unbound Mode

C#	コードのコピー
var dummyNode = new Node() { Text = "Execute", Shape = Shape.RoundedRectangle };

Set Node Shape in Data-Bound Mode

C#	コードのコピー
diagram.NodeCreated += (sender, args) => { args.Node.Shape = Shape.RoundedRectangle; };

Style Nodes in FlexDiagram

The Node class provides styling properties to customize the appearance of nodes. These properties can be used to visually distinguish diagram elements, show hierarchy, and improve diagram readability.

Property	Description
`Style`	Specifies the node fill color, border color, stroke thickness, and font settings.
`TitleStyle`	Specifies the appearance of the node title area.
`Tooltip`	Specifies the text displayed when the pointer hovers over the node.
`TitleImage`	Sets or retrieves the image displayed in the node title area.
`ContentImage`	Sets or retrieves the image displayed in the node content area.

Node Styling Example

C#	コードのコピー
using System; using System.Drawing; using C1.WPF.Diagram; using C1.Chart; namespace DiagramStylingExample { public class NodeStylingDemo { public void CreateStyledNode(FlexDiagram diagram) { var nodeStyle = new ChartStyle() { StrokeColor = Color.SteelBlue, FillColor = Color.AliceBlue, StrokeWidth = 2, StrokeDashPattern = new float[] { 4, 2 } }; var titleStyle = new ChartStyle() { StrokeColor = Color.Navy, FillColor = Color.LightSkyBlue, StrokeWidth = 1 ; var titleImage = Image.FromFile("titleIcon.png"); var contentImage = Image.FromFile("processIcon.png"); var startNode = new Node() { Text = "Start Process", Shape = Shape.RoundedRectangle, Style = nodeStyle, TitleStyle = titleStyle, TitleImage = titleImage, ContentImage = contentImage, Tooltip = "This node represents the start of the process." }; diagram.Nodes.Add(startNode); } } }

コードのコピー

using System;
using System.Drawing;
using C1.WPF.Diagram;
using C1.Chart;
namespace DiagramStylingExample
{
  public class NodeStylingDemo
  {
    public void CreateStyledNode(FlexDiagram diagram)
    {
      var nodeStyle = new ChartStyle()
      {
        StrokeColor = Color.SteelBlue,
        FillColor = Color.AliceBlue,
        StrokeWidth = 2,
        StrokeDashPattern = new float[] { 4, 2 }
      };
      var titleStyle = new ChartStyle()
      {
        StrokeColor = Color.Navy,
        FillColor = Color.LightSkyBlue,
        StrokeWidth = 1
      ;
      var titleImage = Image.FromFile("titleIcon.png");
      var contentImage = Image.FromFile("processIcon.png");
      var startNode = new Node()
      {
        Text = "Start Process",
        Shape = Shape.RoundedRectangle,
        Style = nodeStyle,
        TitleStyle = titleStyle,
        TitleImage = titleImage,
        ContentImage = contentImage,
        Tooltip = "This node represents the start of the process."
      };
      diagram.Nodes.Add(startNode);
    }
  }
}