Customizing the Appearance of Items
For every diagram item, different visual styles and properties can be set as described in the following paragraphs.
When customizing items through styles and themes, the appearance of their border lines can be set via the Stroke and StrokeThickness properties of DiagramItemStyle. The borders or segment lines of individual nodes or links can be customized through the Pen property. Links provide an additional property for customizing the borders of their arrowheads, called HeadPen.
The color of link segments can be set using the Pen property. The borders of arrowheads are drawn using HeadPen. Brush specifies how closed arrowhead shapes are filled. It is also possible to define distinct fill style for each type of arrowheads by means of the HeadBrush, BaseBrush and IntermediateBrush properties. TextBrush is used for rendering link's text.
Nodes have three properties for colors: the color of node borders is specified through the Pen property; the interior of a node is filled using Brush; TextBrush specifies the color for rendering text. Tables have a special property for their caption color - CaptionBrush.
Diagram items can have attached text, displayed inside / over them.
Text of shape nodes is set using their Text property and the text format and alignment style is specified using TextFormat. The text of shape nodes can be laid out and rendered inside a polygonal outline; that depends on the value of PolygonalTextLayout. To make a node big enough to display its text without clipping, call ResizeToFitText.
Links have their text drawn horizontally above their middle segment or rotated as specified via TextStyle; the string to display can be set using the Text property.
Tables have caption text specified via Caption; table cells expose Text property and their text can be formatted via TextFormat.
All diagram items expose Font property, specifying the name, style and size of the font of item's text. The color of item's text is set in its TextBrush property.
Shape nodes and tables can display images inside them. Use ShapeNode.Image and TableNode.Image properties to load images into the respective items. A node can be made the same size as the image it contains by calling ResizeToFitImage.
Images can be positioned in different ways: they can be tiled, stretched or aligned to the containing nodes' centers or sides. Use ShapeNode.ImageAlign and TableNode.ImageAlign to specify how images are placed within the corresponding nodes. An image shown inside a node is clipped in accordance with the shape of that node.
Table cells can have Image and ImageAlign assigned too. For example that might be used to display an icon for the key field of a database table.
The shadow of each diagram item can be painted with a distinct brush, as specified via the item's ShadowBrush property. Shadow offsets from their items can be set individually via the ShadowOffsetX and ShadowOffsetY properties. Set those to zero to hide item's shadow.
The shape and orientation of link segments is specified by the Shape property; the number of segments is specified by the SegmentCount property. The form and size of the arrowhead shape is set using the HeadShape and HeadShapeSize properties. Shapes displayed at the origin of links are defined by BaseShape and BaseShapeSize. Shapes can be displayed at middles of segments, helping to follow the path of long links. They are defined by the IntermediateShape and IntermediateShapeSize properties. The lines of arrowhead shapes are painted using the HeadPen pen. Custom painting code may be invoked for a link, as set in CustomDraw.
Links comprising straight segments, that is, ones whose Shape is set to Polyline or Cascading, can use arcs to join their adjacent segments. To enable that feature, set RoundedLinks to true. Use RoundedLinksRadius to set the radius of the joining arcs.
Intersection points where links cross their paths can be rendered as arcs or breaks, as specified via LinkCrossings. It depends on the Z-order, which links jump over the others, or which links appear cut by the others. If LinkCrossings is set to Arcs, links with higher ZIndex jump over those with lower ZIndex. If set to Cut, links at lower Z position are cut by links at higher Z. Radius of arcs and breaks can be set through the CrossingRadius property.
The shape of a node is defined using its Shape property. Shape templates can be applied to a shape node with an orientation of 0/90/180/270 degrees as specified via the ShapeOrientation property. Your own drawing code may be invoked for a node, depending on the value of CustomDraw. Shape nodes can be marked as Transparent, having only their text or images rendered.
The outline of a table can be either a rectangle or rounded rectangle, as specified via the Shape property. The borders of table cells can be rendered in different ways, depending on the value of CellFrameStyle. The table caption area is painted using the CaptionBackBrush brush. Custom painting can be performed on a table and its cells as set in the CustomDraw and CellCustomDraw properties.
