# Customize Node Appearance
## Content
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:
```csharp
var dummyNode = new Node()
{
Text = "Execute",
Shape = Shape.RoundedRectangle
};
```
To change node appearance in **Data-Bound mode**, use the following code:
```auto
// 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.
```csharp
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);
}
}
}
```