Customizing the Appearance of Items
For every WpfDiagram item, different visual styles and properties can be set as described in the following paragraphs.
Diagram items can be styled using the WPF styling system. The Style property inherited from FrameworkElement can be set to an instance of the System.Windows.Style class that sets the Brush, Stroke*, Text* and Font* dependency properties. If a style is not explicitly assigned to an item, it can use global styles defined for a type in the application or window resource dictionaries. For example, if this style is defined as a window resource, ShapeNodes will have a thick red border:
Xaml
 Copy Code
|
|---|
<Style TargetType="diag:ShapeNode" > |
Since style setters have lower precedence than local property values, styling works immediately only for items created through no-args constructors. Properties of items loaded from a file or created through a DiagramItem(Diagram) constructor might have local values, which can be cleared through the ClearStyleableProperties method in order to enable styling.
The borders of nodes and the lines of links are drawn using a pen whose color, width and style can be customized through the Stroke, StrokeThickness and StrokeDashStyle properties.
The color of link segments can be set using the Stroke property. Brush specifies how closed arrowhead shapes are filled. Nodes have similar properties for color customization: the color of node borders is specified through the Stroke property; the interior of a node is filled using Brush.
Diagram items can have associated text, displayed inside or over them. It can be set through the Text property of the base DiagramItem class. TextBrush specifies the brush used to draw the item's text.
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 by TextStyle.
All diagram items expose FontFamily, FontStyle and FontSize properties, specifying the name, style and size of the font of item's text. Text is formatted through properties such as TextAlignment, TextTrimming and TextWrapping.
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.
WPF shader effects such as drop shadows and blur can be applied to diagram items through their Effect property. The Effect dependency property is defined in the base UIElement class from which DiagramItem is derived. For more information on shader effects, check the Effect topic in the MSDN library.
 Note |
|---|
The DefaultEffect property of the Diagram class allows to specify an effect that must be assigned to all new items. |
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 by 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 through 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 by the Shape property. The borders of table cells can be rendered in different ways, depending on the value of CellFrameStyle. The table caption bar 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.
