This tutorial is a step-by-step introduction to customizing the visual representation of graph elements. It is intended for advanced users that need to create custom styles from scratch. yFiles for Silverlight already provides a number of styles that can be used for complex visualizations, using standard WPF techniques.
The tutorial shows you how to create custom styles for nodes, edges, labels, and ports. It also presents how to create a custom arrowhead rendering, how to customize edge selection, and how the visual representation of graph elements can be changed depending on application state. Furthermore, the tutorial discusses several optimization strategies.

If you are new to styles, respectively their customization, it is recommended to start by going through the projects in this tutorial one by one. To make full use of the tutorial, it is also recommended to review and possibly modify the source code for each sample project.

Available samples

The following programming samples are available in this category:

Name Description
01 Custom Node Style This step shows how to create a custom node style.
02 Node Color This step shows how to create properties so that the style can be changed dynamically.
03 UpdateVisual and RenderDataCache This step shows how to implement high-performance rendering for nodes.
04 IsInside This step shows how to override IsInside() and GetIntersection() in SimpleAbstractNodeStyle<TVisual>.
05 Hit Test This step shows how to override IsHit() and IsInBox() in SimpleAbstractNodeStyle<TVisual>.
06 GetBounds This step shows how to override the SimpleAbstractNodeStyle<TVisual>.GetBounds() method.
07 Dropshadow Performance This step shows how to pre-render the drop shadow of nodes in order to improve the rendering performance in comparison to the built-in effect.
08 Edge from Node to Label This step shows how to visually connect a node to its label(s) by means of edges.
09 IsVisible This step shows how to override the IsVisible() method of SimpleAbstractNodeStyle<TVisual>.
10 Custom Label Style This step shows how to create a custom label style.
11 Label Preferred Size This step shows how to override the GetPreferredSize() method to set the size of the label dependent on the size of its text.
12 High Performance Rendering of Label This step shows how to implement high-performance rendering for labels.
13 Label Edit Button This step shows how to implement a button within a label to open the label editor.
14 Button Visibility This step shows how to hide the button dependent on the zoom level.
15 Using Data in Label Tag This step shows how to use data from a business object, which is stored in the label's tag, for rendering.
16 Custom Edge Style This step shows how to create a custom edge style which allows to specify the edge thickness by setting a property on the style.
17 Edge HitTest This step shows how to take the thickness of the edge into account when checking if the edge was clicked.
18 Edge Cropping This step shows how to crop an edge at the node bounds.
19 Animated Edge Selection This step shows how to change the style of an edge if the edge is selected.
20 Custom Arrow This step shows how to create a custom arrow.
21 Arrow Thickness This step shows how to render the arrow dependent on a property of the edge it belongs to.
22 Custom Ports This tutorial step shows how to implement a custom port style.
23 Style Decorator This tutorial step shows how to create a style that decorates an existing style.

Running the Demos

  • If you have done a default installation of yFiles for Silverlight, then you can just open the Visual Studio solution shortcuts for the programming samples that have been installed on your Desktop or in your Start Menu.