Styles, Style Composition and Style Sheets
In This Topic
Nevron Diagram for .NET provides a flexible and consistent way for defining the element styles as well as reusing style definitions via different types of style inheritance.
Style Attribute
In Nevron Diagram for .NET the appearance of every element is consistently controlled with the help of a NStyle attribute. The style of an element is used as a place holder for all the atomic styles, which an element may need to display itself.currently the NStyle attribute can contain the following atomic styles:
- Fill Style - the fill style is used to define the filling of an element. It is accessible from the FillStyle property. See Fill Styles Overview for more information.
- Stroke Style - the stroke style is used to define the appearance of the stroke which is used for the rendering of an element outline. It is accessible from the StrokeStyle property. See Stroke Style for more information.
- Shadow Style - the shadow style defines the appearance of the element shadow. It is accessible from the ShadowStyle property. See Shadow Style for more information.
- Text Style - the text style is used to define the appearance of the text, which an element can render. It is accessible from the TextStyle property. See Text Style for more information.
- Start Arrowhead Style - defines the appearance, shape and size of start arrowheads. It is accessible from the StartArrowheadStyle property.
- End Arrowhead Style - defines the appearance, shape and size of end arrowheads. It is accessible from the EndArrowheadStyle property.
- Bridge Style - defines the shape and size of bridges. It is accessible from the BridgeStyle property.
- Interactivity Style - defines the interactivity style of the element. The interactivity style can contain different interactivity attributes, which help you define the element cursor and tooltip and in the case of a WebForm diagram its URL link, custom client side script and custom image map area. It is accessible from the InteractivityStyle property. See Interactivity Style Overview for more information.
If the property value corresponding to the respective atomic style is equal to null, then the style has no local setting for this atomic style and the element will try to obtain it via the style inheritance mechanism (explained below). The process of obtaining a valid style reference is called style composition.
A style itself is only used to hold local values for the atomic styles the element may need. It is up to the element to implement the respective style composition.
Style Composition
In Nevron Diagram for .NET all elements, which can be involved in style composition must implement the INStyleComposer interface. A core implementation of this interface can be found in the NStyleComposerElement class. It basically defines ComposeXXX methods, which elements can use to obtain valid atomic style instances.
All elements, which contain a local style attribute must implement the INStyleable interface (derived from INStyleComposer). A core implementation of this interface can be found in the following DOM classes:
-
NDrawingDocument - the drawing document has a local style attribute, which cannot have null atomic styles. This is because the drawing is the last resort for an element to obtain a valid style reference.
-
NStyleableElement - in the DOM all elements which display some content, to which you can apply local styling derive from this class (for example shapes, layers, labels and guidelines are stylable elements). Styleable elements use the following style inheritance:
1. If a style is not locally specified the element will first try to obtain a stylesheet from which to get the style. The stylesheet is specified by the
StyleSheetName property of the
NStyleableElement class.
2. If a valid stylesheet is obtained the element will ask it to compose the respective style.
3. If a there is no stylesheet or the stylesheet did not manage to compose the respective style the element will ask it's first ancestor, which implements the
INStyleComposer interface to do that.
In other words: styleable elements first try to obtain a local style, then compose a style from a stylesheet and then ask it's parents in the hierarchy to do that.
-
NStyleSheet - in the DOM the sole purpose of a style sheet element is to expose a reusable style, which other elements, including stylesheets can reuse (see below). Stylesheets use the following style inheritance:
1. If a style is not locally present the stylesheet will try obtain a base stylesheet from which to get the style. The base stylesheet is specified by the
BaseStyleSheetName property of the
NStyleSheet class.
2. If there is no base stylesheet or the base stylesheet did not manage to compose the respective style the ComposeXXX method of the stylesheet will return null.
In other words: stylesheets first try to obtain a local style, then compose a style from a base stylesheet.
The base stylesheet can also have a base stylesheet and so on. This style inheritance feature is often called cascade style sheets.
Style Sheets
Stylesheets are elements, which have a style attribute. The style of a stylesheet can be reused from styleable elements and/or other stylesheets. The stylesheets of a drawing are contained in an instance of the NStyleSheetCollection class, which can be obtained from the StyleSheets property of the NDrawingDocument class. Stylesheets themselves are represented by an instance of the NStyleSheet class.
The following code creates three cascade stylesheets:
C# |
Copy Code
|
NStyleSheet stylesheet1 = new NStyleSheet("BASE");
stylesheet1.Style.StrokeStyle = new NStrokeStyle(2, Color.Blue);
drawingDocument.StyleSheets.AddChild(stylesheet1);
NStyleSheet stylesheet2 = new NStyleSheet("RED");
stylesheet2.BaseStyleSheetName = "BASE";
stylesheet2.Style.FillStyle = new NColorFillStyle(Color.Red);
drawingDocument.StyleSheets.AddChild(stylesheet2);
NStyleSheet stylesheet3 = new NStyleSheet("GREEN");
stylesheet3.BaseStyleSheetName = "BASE";
stylesheet3.Style.FillStyle = new NColorFillStyle(Color.Green);
drawingDocument.StyleSheets.AddChild(stylesheet3);
|
Visual Basic |
Copy Code
|
Dim stylesheet1 As New NStyleSheet("BASE")
stylesheet1.Style.StrokeStyle = New NStrokeStyle(2, Color.Blue)
drawingDocument.StyleSheets.AddChild(stylesheet1)
Dim stylesheet2 As New NStyleSheet("RED")
stylesheet2.BaseStyleSheetName = "BASE"
stylesheet2.Style.FillStyle = New NColorFillStyle(Color.Red)
drawingDocument.StyleSheets.AddChild(stylesheet2)
Dim stylesheet3 As New NStyleSheet("GREEN")
stylesheet3.BaseStyleSheetName = "BASE"
stylesheet3.Style.FillStyle = New NColorFillStyle(Color.Green)
drawingDocument.StyleSheets.AddChild(stylesheet3)
|
In this example the first stylesheet defines a blue stroke style and is used as a base stylesheet for the other two stylesheets. The second and the third stylesheets reference the first stylesheet. The base stylesheet is specified by the BaseStyleSheetName property. The second and the third stylesheets define solid color red and green fillings.
The effect of this construction is that when a styleable element (any element derived from the NStyleableElement class - e.g. layer, model, shape, path, label etc.) references the RED stylesheet it will inherit red filling and blue stroke style. Analogously if it references the GREEN stylesheet it will inherit green filling and blue stroke style. The stylesheet of a styleable element is specified by its StyleSheetName property. For example:
C# |
Copy Code
|
NRectangleShape rect1 = new NRectangleShape(50, 50, 100, 100);
rect1.StyleSheetName = "RED";
drawingDocument.ActiveLayer.AddChild(rect1);
NRectangleShape rect2 = new NRectangleShape(200, 50, 100, 100);
rect2.StyleSheetName = "GREEN";
drawingDocument.ActiveLayer.AddChild(rect2);
|
Visual Basic |
Copy Code
|
Dim rect1 As New NRectangleShape(50, 50, 100, 100)
rect1.StyleSheetName = "RED"
drawingDocument.ActiveLayer.AddChild(rect1)
Dim rect2 As New NRectangleShape(200, 50, 100, 100)
rect2.StyleSheetName = "GREEN"
drawingDocument.ActiveLayer.AddChild(rect2)
|
This code will produce the following drawing:
By default each drawing document has the following stylesheets:
- Guidelines - the guidelines stylesheet defines a stroke style, which is reused by guidelines. Guidelines by default reference this stylesheet.
- Connectors - the connectors stylesheet defines styles, which are reused by shapes which need to be displayed as connectors. It defines a stroke style, start arrowhead style, end arrowhead style and bridge style. By design all shapes created by the Connectors Tool use this stylesheet.
How to Use Styles Efficiently
Styles and style inheritance can greatly help you minimize the effort of designing and changing the appearance of your diagrams. Following are some guidelines, which will help you use these efforts:
- If you want all the shapes in a drawing to have some default style - set the respective style of the drawing.
- If you want all the shapes in a layer to have some default style - set the respective style of the layer.
- If there is only a particular set of shapes, which need to have a default style - create a stylesheet for them.
Other Considerations
Not all styleable elements create a valid style attribute instance by default. For example the NRectanglePath primitive is a styleable element, but by default its Style property returns null. This was done in order to minimize the memory footprint of primitives. The following code demonstrates how to apply local fill style to a rectangle path:
C# |
Copy Code
|
NRectanglePath rect = new NRectanglePath(0, 0, 100, 100);
rect.Style = new NStyle();
rect.Style.FillStyle = new NColorFillStyle(Color.Red);
|
Visual Basic |
Copy Code
|
Dim rect As New NRectanglePath(0, 0, 100, 100)
rect.Style = New NStyle()
rect.Style.FillStyle = New NColorFillStyle(Color.Red)
|
The NStyle class provides several static methods, which help you safely create a style attribute and set a respective atomic style. For example:
C# |
Copy Code
|
NRectanglePath rect = new NRectanglePath(0, 0, 100, 100);
NStyle.SetFillStyle(rect, new NColorFillStyle(Color.Red));
|
Visual Basic |
Copy Code
|
Dim rect As New NRectanglePath(0, 0, 100, 100)
NStyle.SetFillStyle(rect, New NColorFillStyle(Color.Red))
|
See Also