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

Nodes are the primary visual elements. Users can modify color, text, and shape by using the C1.Diagram.Shape enumeration.

Available Node Shapes

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

To change node appearance in Unbound mode, use the following code:

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

To change node appearance in Data-Bound mode, use the following code:

C#	コードのコピー
// set default shape diagram.NodeCreated += (sender,args) => e.Node.Shape = Shape.RoundedRectangle;

Style Nodes in FlexDiagram

The Node class (in the C1.Win.Diagram namespace) provides styling options to customize the appearance of nodes. Each node can have its own style, title style, tooltip, and images for both title and content areas. These properties make it easy to visually differentiate elements, convey hierarchy, and improve the overall readability of the diagram.

Property	Description
Style	Defines the node’s fill color, border color, stroke thickness, and font.
TitleStyle	Defines the appearance of the node’s title area and can be combined with the main Style to customize the node’s overall appearance.
Tooltip	Specifies the text displayed when the pointer hovers over the node.
TitleImage	Sets or retrieves the image displayed in the title area of the node.
ContentImage	Sets or retrieves the image displayed in the main content area of the node.

Node Styling Example

The following example demonstrates how to apply styles, images, and tooltips to a node using the properties available in the C1.Win.Diagram namespace.

C#	コードのコピー
using System; using System.Drawing; using C1.Win.Diagram; using C1.Chart; namespace DiagramStylingExample { public class NodeStylingDemo { public void CreateStyledNode(FlexDiagram diagram) { // Step 1: Define the node style var nodeStyle = new ChartStyle() { StrokeColor = Color.SteelBlue, // Border color FillColor = Color.AliceBlue, // Background color StrokeWidth = 2, // Border thickness StrokeDashPattern = new float[] { 4, 2 } // Dashed border pattern }; // Step 2: Define the title style var titleStyle = new ChartStyle() { StrokeColor = Color.Navy, // Title border color FillColor = Color.LightSkyBlue, // Title background StrokeWidth = 1 // Title border width }; // Step 3: Load images for title and content var titleImage = Image.FromFile("titleIcon.png"); // Image near title text var contentImage = Image.FromFile("processIcon.png"); // Image inside content area // Step 4: Set tooltip text string tooltipText = "This node represents the start of the process."; // Step 5: Create and style the node var startNode = new Node() { Text = "Start Process", Shape = Shape.RoundedRectangle, Style = nodeStyle, // Apply node style TitleStyle = titleStyle, // Apply title style TitleImage = titleImage, // Assign title image ContentImage = contentImage, // Assign content image Tooltip = tooltipText // Assign tooltip }; // Step 6: Add the node to the diagram diagram.Nodes.Add(startNode); } } }

コードのコピー

using System;
using System.Drawing;
using C1.Win.Diagram;
using C1.Chart;

namespace DiagramStylingExample
{
  public class NodeStylingDemo
  {
    public void CreateStyledNode(FlexDiagram diagram)
    {
      // Step 1: Define the node style
      var nodeStyle = new ChartStyle()
      {
        StrokeColor = Color.SteelBlue,             // Border color
        FillColor = Color.AliceBlue,               // Background color
        StrokeWidth = 2,                           // Border thickness
        StrokeDashPattern = new float[] { 4, 2 }   // Dashed border pattern
      };

      // Step 2: Define the title style
      var titleStyle = new ChartStyle()
      {
        StrokeColor = Color.Navy,                  // Title border color
        FillColor = Color.LightSkyBlue,            // Title background
        StrokeWidth = 1                            // Title border width
      };

      // Step 3: Load images for title and content
      var titleImage = Image.FromFile("titleIcon.png");     // Image near title text
      var contentImage = Image.FromFile("processIcon.png"); // Image inside content area

      // Step 4: Set tooltip text
      string tooltipText = "This node represents the start of the process.";

      // Step 5: Create and style the node
      var startNode = new Node()
      {
        Text = "Start Process",
        Shape = Shape.RoundedRectangle,
        Style = nodeStyle,               // Apply node style
        TitleStyle = titleStyle,         // Apply title style
        TitleImage = titleImage,         // Assign title image
        ContentImage = contentImage,     // Assign content image
        Tooltip = tooltipText            // Assign tooltip
      };

      // Step 6: Add the node to the diagram
      diagram.Nodes.Add(startNode);
    }
  }
}