Search

Customizing the Appearance of Items

For every NetDiagram item, different visual styles and properties can be set as described in the following paragraphs.

Pen Width and Style

The borders of nodes and the lines of links are drawn using a pen whose color, width and style can be customized through the Pen property.

Color of Diagram Elements

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. TextColor 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; TextColor specifies the color for rendering text. Tables have a special property for their caption color - CaptionBrush.

Text

Diagram items can have associated text displayed inside or over them.

Text of shape nodes is set using the Text property and the text format and alignment style is specified using the TextFormat. The text of shape nodes can be laid out and rendered inside a polygonal outline if PolygonalTextLayout is enabled. 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 through TextStyle; the string to display can be set using the Text property.

Tables have caption text specified in Caption; table cells expose Text property and their text can be formatted by 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 TextColor.

Images

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.

Shadows

The shadow of each diagram item can be painted with a distinct color, as specified in the item's ShadowBrush property. Shadows offsets from their items can be set individually through the ShadowOffsetX and ShadowOffsetY properties. Set those to zero to hide an item's shadow.

DiagramLink-specific Properties

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 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.

Rounded Links

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.

Link Crossings

Intersection points where links cross their paths can be rendered as arcs or breaks, as specified through 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.

ShapeNode-specific Properties

The shape of a node is defined using the Shape property. Shape templates can be applied to a shape node with an orientation of 0/90/180/270 degrees as specified in 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.

TableNode-specific Properties

The outline of a table can be either a rectangle or rounded rectangle, as specified by 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.