Styling Overview

Nevron Chart has a styling mechanism that uses the same core concepts as CSS2, but is much simpler and specific to the component requirements. Furthermore the styling mechanism is open for extension, so you can modify it according to your needs. The component also provides a way to automatically build a style sheet using style sheet configurators and predefined color palettes. Following is a brief description of the style mechanism used in Nevron Chart for .NET.

A style sheet is represented by a set of rules and can be applied to any chart element including the chart document itself. When applied to an element or document it will recursively examine all its siblings and alter their appearance if necessary. This process is controlled by the rules contained in the style sheet, therefore it is important to understand how they work.

Each rule consists of two parts a selector and a collection of property applicators. The selector will determine if the current element examined by the style sheet meets some criteria – for example: “is the current element a gauge panel?” or “is the current element a series?”. If the selector decides that the element meets the criteria the applicators associated it with it will be applied on the element.

To better understand this approach to styling lets examine a simple style sheet definition in pseudo code:

“For all labels in the control set the color to red”.

This definition can be achieved through the following code:

C#	Copy Code
NTypeOfSelector selector = new NTypeOfSelector(typeof(NLabel)); NLabelFillStyleApplicator applicator = new NLabelFillStyleApplicator(new NColorFillStyle(Color.Red)); NStyleSheet styleSheet = new NStyleSheet(); styleSheet.Rules.Add(new NStyleSheetRule(selector, applicator)); styleSheet.Apply(nChartControl1.Document);

C#

Copy Code

NTypeOfSelector selector = new NTypeOfSelector(typeof(NLabel));
NLabelFillStyleApplicator applicator = new NLabelFillStyleApplicator(new NColorFillStyle(Color.Red));

NStyleSheet styleSheet = new NStyleSheet();
styleSheet.Rules.Add(new NStyleSheetRule(selector, applicator));
styleSheet.Apply(nChartControl1.Document);

Visual Basic	Copy Code
Dim selector As NTypeOfSelector = New NTypeOfSelector(GetType(NLabel)) Dim applicator As NLabelFillStyleApplicator = New NLabelFillStyleApplicator(New NColorFillStyle(Color.Red)) Dim styleSheet As NStyleSheet = New NStyleSheet() styleSheet.Rules.Add(New NStyleSheetRule(selector, applicator)) styleSheet.Apply(NChartControl1.Document)

Visual Basic

Copy Code

Dim selector As NTypeOfSelector = New NTypeOfSelector(GetType(NLabel))
Dim applicator As NLabelFillStyleApplicator = New NLabelFillStyleApplicator(New NColorFillStyle(Color.Red))

Dim styleSheet As NStyleSheet = New NStyleSheet()
styleSheet.Rules.Add(New NStyleSheetRule(selector, applicator))
styleSheet.Apply(NChartControl1.Document)

Finally the code applies it to the chart document. During this process the style sheet will follow a very simple procedure:

1. For each rule in the style sheet it will check if there is a rule whose selector will match.
2. If a selector matches the style sheet will modify the properties relative to the currently processed element as specified by the as property applicators associated with the selector.
3. Repeat steps 1 and 2 for each sibling of the current element

Note that when you execute:

C#	Copy Code
styleSheet.Apply(nChartControl1.Document);

Visual Basic	Copy Code
styleSheet.Apply(nChartControl1.Document);

the style sheet is applied only once – afterwards you can change the fill style of the label through code or through the designer. In certain cases for example when you apply style sheets to dynamically changing data, or when you add remove series you may want to tell the control to apply the style sheet at each repaint. In this case you should assign the style sheet to the document:

C#	Copy Code
nChartControl1.Document.StyleSheet = sheet;

Visual Basic	Copy Code
nChartControl1.Document.StyleSheet = sheet

Windows Forms: Styles\Style Sheets\Predefined Style Sheets

Windows Forms: Styles\Style Sheets\Style Sheet Configurators

Web Forms: Styles\Style Sheets\Predefined Style Sheets

Web Forms: Styles\Style Sheets\Style Sheet Configurators