Customize Node Appearance

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:

var dummyNode = new Node() 
{ 
    Text = "Execute", 
    Shape = Shape.RoundedRectangle 
};

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

// 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.

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);
        }
    }
}