Customizing Styles

What is a Style?

A style is the definition for presenting an element visually. Styles can be applied to nodes, edges, labels, and ports. Edge styles also take care of the styling for their bends.

Figure 3.7. Changing the Default Node Style

Changing the Default Node Style

A single style instance can be shared between elements. A change to a style instance affects all elements which share the instance.

The library contains several pre-defined styles which you can use out-of-the-box. These styles also provide several properties that you can modify to adapt the styles to your needs. If none of these styles fit your use case, you can also create your own custom styles from scratch.

Figure 3.8. Some of the Built-In Node Styles

Some of the Built-In Node Styles

Figure 3.9. Modified Built-In Styles

Modified Built-In Styles

Styles can reflect business data associated with graph elements. For example, a style can be used to display textual information, instead of using labels.

Setting Styles

There are three ways of setting styles. You can specify a default style to be used for elements that do not explicitly set their styles. Or, you can set a custom style, either at the time the element is created, or later on.

Setting a Default Style

The graph defaults can be used to specify a default style for each type of graph element. These styles are applied to new graph elements if no style is explicitly specified during element creation. Setting the default style for each type is explained in the relevant section of the section called “Working with Graphs”.

Each of the graph defaults has a ShareStyleInstance property. By default it is set to true, ensuring that all elements using a default style share the same style instance. When set to false, the style is cloned for each element that uses it. Modifications to shared style instances affect all existing elements that use that style.

Setting a default style never affects existing elements in the graph. The default style is only assigned to new elements upon their creation. However, if ShareStyleInstance is set to true, modifying the shared default style instance also affects existing elements that use this style.

Setting a Style upon Creation

Graph elements are created by the graph using factory methods. Some of these methods allow you to pass in a style to be used instead of the default style. For listings of these methods, see the section called “Creating Nodes”, the section called “Creating Edges”, the section called “Adding Labels to Graph Elements”, and the section called “Adding Ports to Nodes”.

It is possible for multiple element instances of the same type to share the same style instance. When a shared style instance is modified, the change affects all elements using the particular style instance.

Setting a Style after Creation

You can use the graph's SetStyle methods to set an element's style after creation. These methods take two parameters: the instance to be styled, and the style to be applied.

Example 3.2. Setting a node's style

INode node = GetMyNode();

// set the node's style to a new instance of ShapeNodeStyle.
graph.SetStyle(node, new ShapeNodeStyle());