Customizing the Appearance of Items
For every Diagramming for WinUI item, different visual styles and properties can be set as described in the following paragraphs.
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 StrokeDashArray properties.
The color of link segments can be set using the Stroke property. 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 Stroke property; the interior of a node is filled using Brush; TextBrush specifies the color in which text is rendered. Tables have a special property for their caption color - CaptionBrush.
Diagram items can have associated text, displayed inside or over them. Text of shape nodes is set via their Text property. The text format and alignment style is specified using TextFormat. To make a node big enough to display its text without clipping, call its ResizeToFitText method.
Links have their text drawn horizontally above their middle segment; the string to display can be set using the Text property.
Tables have caption text specified by Caption; table cells expose the Text property.
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 corresponding TextBrush property.
Shape nodes and tables can display images inside them. Use the Image property to load images into the nodes. Alternatively, specify the image files location using ImageLocation or ImageResourceLocation properties of nodes and the nodes will automatically load the images. Images can be positioned in different ways: they can be tiled, stretched or aligned to the containing nodes' centers or sides. Use ImageAlign property 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.
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.
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. 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 Style property. The table caption bar is painted using the CaptionBackBrush brush.
