Search
Appearance of Items

For every FlowChartX object different visual styles and properties can be set as described below:

Box- specific properties

The most important property defining visual appearance of boxes is Style. There are several basic box styles, including rectangles, rhombi, ellipses and process chart symbols such as 'delay'. In addition FlowChartX supports polygonal shapes that can be defined by programmers. A shape from above 50 predefined polygons can be selected by means of the LoadPredefShape method. Custom shapes can be defined by passing arrays of vertex coordinates to SetPolyShape or SetPolyShapeArray method. The latter expects OLE safe array as argument.

Another feature is available for further customization of boxes appearance. Your program code can be invoked when a box is rendered, to either fully replace FlowChartX rendering of the box, or to make additional drawing over a drawn box. This is set by the CustomDraw property of boxes.

Furthermore the professional edition of FlowChartX supports custom shape libraries, which can be installed as plug-ins into the control's rendering engine. MindFusion distributes several free shape libraries, and also programmers can write their own if needed. To use a shape from a custom library invoke the SetShape method of a box, whose style is set to bsLibShape.

The Transparent property, when set to true, makes only the picture and/or text of a box visible. This might be used for effects, such as floating text or hanging arrows (not attached to boxes). The RenderFlags lets you specify whether shape decorations should be drawn for Transparent boxes.

Arrow- specific properties

The Style property of an arrow defines the type of its segments - either straight lines or curves - and their orientation one to another. If the segments are straight lines, the joins between them can be curved, as specified via RoundedArrows. The number of arrow segments is specified through the Segments property.

FlowChartX supports a rich set of shapes that can be used as arrowheads. These shapes can be filled with color specified through the Arrow.FillColor property. The shape and size of the arrowhead at the end of an arrow are set using ArrowHead and ArrowHeadSize properties. For the one at the arrows base use ArrowBase and ArrowBaseSize. Additionally, arrowhead shapes can be drawn at the center of each arrow's segment, as specified by the IntermArrowHead and IntermHeadSize properties.

Arrow crossings

Arrow crossing points can be rendered as arcs or breaks, as specified via ArrowCrossings. It depends on the z-order, which arrows jump over the others, or which arrows appear broken by the others. If ArrowCrossings is set to acArcs, arrows with higher ZIndex jump over those with lower Z. If set to acBreaking, arrows with lower Z are broken by arrows wit higher Z. Radius of arcs and breaks can be set through the CrossRadius property.

Text

To display text inside diagram nodes, set the Box.Text and Table.Caption properties. For table cells, use Table.GetText and Table.SetText methods. Text formatting can be customized through the Box.Font and Table.Font properties for font and Box.TextStyle property, Table.CaptionStyle, Table.GetTextStyle and Table.SetTextStyle methods for specifying text alignment and position in a box or in a table cell. Formatting attributes, such as italics, bold and underline, can be applied to text inside boxes, as specified through the EnableStyledText property.

To specify padding distance between the borders and text of a box, call its SetTextPadding method. To determine whether the text currently fits inside a box, call TextFits. To resize a box so that the text fits inside it, call FitSizeToText.

The label text and formatting of links is set through the Text, Font, and TextStyle properties of the Arrow class. The location of the label can be set through the SetTextPosition method.

Supplementary node labels

Apart from main text content, the NodeLabel class lets you display additional labels and pin them to node's edges or corners. To create such supplementary labels, instantiate a NodeLabel object, customize its appearance and position via provided properties and methods, and call the AddLabel method of a box or a table. Label's SetEdgePosition, SetCenterPosition and SetCornerPosition methods let you set several location-related properties with one call.

Arrow labels

The ArrowLabel class allows multiple captions to be displayed for a single Arrow object. Labels provide a set of properties allowing full customization of their display and positioning. Labels can also be arranged automatically to avoid overlapping nodes and other labels by setting AutoArrange to true. You can modify and access the list of arrow's labels using AddLabel, RemoveLabel, GetLabel methods of the Arrow class. The LabelFromPoint method lets you find the label placed at a specific location.

Fonts

By default, the font properties of all items (tables, boxes and arrows) are set to null references (Nothing in Visual Basic). That cuts down memory consumption by not allocating fonts for each diagram element. When the font of an item is null, the text of this item is rendered using the flowchart's Font. So if different fonts are needed for the diagram elements, their Font properties have to be initialized first (using the CreateStdFont statement in VB).

Note that non-proportional fonts, such as Courier or MS Sans Serif cannot zoom out well. The smallest size such fonts can be rendered with is the smallest value shown in the 'Size' combo box in the standard font dialog. If your application allows scaling to ZoomFactor smaller than 100, we recommend using proportional fonts such as Arial, Courier New or Verdana.

GDI+ works correctly only with proportional fonts. If you enable the GDI+ Graphics engine, make sure that all fonts used in your application are proportional. Proportional fonts are marked with 'TT' or 'O' symbols in the standard Windows font dialog.

Pictures

Boxes and tables can display pictures as a background theme. Use Box.Picture and Table.Picture properties to load images into the respective items. In addition, pictures can be loaded from files or from resources in your executable file by calling Box.LoadPicture or respectively Box.LoadPicFromRes methods, for tables use the Table.LoadPicture or Table.LoadPicFromRes methods.

Pictures can be positioned in different ways: they can be tiled, stretched or aligned to the containing items' sides or corners. Use Box.PicturePos and Table.PicturePos to specify how images are placed inside the corresponding objects. If box shapes are non-rectangular, pictures are clipped to match the shape outlines. The SetPictureRect method of the ShapeTemplate class lets you define a rectangular area in which boxes should display their images.

The cells of a table can contain pictures too. Assigning images to cells can be done using the CellPicture indexed property, or by calling the LoadPicInCell method to load an image from a file. Cell pictures can be loaded also from the application resources, using the LoadPicInCellFromRes method. The CellPicturePos defines the position and alignment of a cell picture.

Transparent images

Nodes can display transparent icons or gif images too. If you are a Visual Basic developer, please note that the VB picture box control and LoadPicture method can load transparent gif images successfully, but in a format that doesn't allow saving their transparency information later. If you need to save diagrams that contain transparent images, use the FlowChartX LoadPicture methods to load these images initially.

Pen width and style

The dash style used for painting items' frames, and the width of the frame lines can be set via Arrow.PenStyle, Arrow.PenWidth, Box.PenStyle, Box.PenWidth, Table.PenStyle and Table.PenWidth properties.

If the classic Graphics engine is used, non-solid dash styles such as dotted or dashed are ignored for pen width greater than 1. GDI+ supports all dash styles for arbitrary pen widths.

Colors

Colors for filling objects and drawing their borders and text are specified by the following properties: Arrow.Color, Arrow.FillColor, Arrow.TextColor, Box.FillColor, Box.FrameColor, Box.DecorationColor, Box.TextColor, Table.CaptionColor, Table.FillColor, Table.CaptionFillColor, Table.CaptionFillColor2, and Table.FrameColor.

FlowChartX can fill box' interior with color gradient. Gradients are controlled by means of the Box.FillStyle and Box.FillColor2 properties. If GDI+ Graphics engine is enabled, items can be painted semi-transparent by setting an alpha component value in the FillColorAlpha property.

Shadows

The shadows' offsets from objects can be set individually through these properties: Arrow.ShadowOffsetX, Box.ShadowOffsetX, Table.ShadowOffsetX, Arrow.ShadowOffsetY, Box.ShadowOffsetY, Table.ShadowOffsetY.

Visibility

Setting the Visible property of diagram objects to false hides them. Setting it to true shows them again.