Table Panels

The "Table" Panel, Panel.Table, arranges objects in rows and columns.

See samples that make use of tables in the samples index.

In all but the last of these simplistic demonstrations, the code programmatically creates a Node and adds it to the Diagram. Once you learn about models and data binding you will generally not create parts (nodes or links) programmatically.

Simple Table Panels

Each object in a Table Panel is put into the cell indexed by the value of GraphObject.row and GraphObject.column. The panel will look at the rows and columns for all of the objects in the panel to determine how many rows and columns the table should have.

Note that not every "cell" of the table needs to have a GraphObject in it.

If there are multiple objects in a cell, they will probably overlap each other in the cell. By default objects are center-aligned in each cell.

If a column or a row has no objects in it, that column or row is ignored.

Sizing of rows or columns

The height of each row is normally determined by the greatest height of all of the objects in that row. Similarly, the width of each column is normally determined by the greatest width of all of the objects in that column. However, you can provide row height or column width information for any row or column independent of any individual object by setting properties of the desired RowColumnDefinition of the Table panel.

To fix a column's width or a row's height, you can call Panel.getColumnDefinition or Panel.getRowDefinition and then set RowColumnDefinition.width or RowColumnDefinition.height. If you want to limit the width or height to certain ranges, set the RowColumnDefinition.minimum or RowColumnDefinition.maximum. The set maximum and minimum values will take precedence over the specified width and height if they are in conflict. For example, the second column in the sample below has its width set to 100, but it displays at its set minimum width of 150.

This example demonstrates how the column width may be controlled.

Note how the column with a minimum of 150 has a lot of extra space in it, and how the column with a maximum of 70 results in its elements being clipped.

Spanning rows or columns

An element in a Table Panel cell can cover more than one cell if you set the GraphObject.rowSpan or GraphObject.columnSpan properties. For example, if the value of GraphObject.columnSpan is greater than one, it specifies how many columns that object may cover, starting with the value of GraphObject.column, but excluding the column indexed by column + columnSpan. The following example uses both row and column span:

Separators and row/column padding

Table Panels allow you to draw lines between rows or columns. The RowColumnDefinition.separatorStrokeWidth property controls the extra space that comes before a particular row or column. The RowColumnDefinition.separatorStroke and RowColumnDefinition.separatorDashArray control if and how a line is drawn.

For example, if you want to treat the first row and the first column as "headers", you can separate them from the rest of the table setting their separatorStroke property:

If you want to have a default separator between each row, set the default separator properties of the Panel. These properties are:

Any separator properties set on a particular RowColumnDefinition will take precedence over the default values provided on the Panel. This permits keeping the special black line separating the header row and header column from the rest.

RowColumnDefinitions also have a RowColumnDefinition.separatorPadding property, which can be used to add extra space to rows or columns. When a RowColumnDefinition.background is set, it includes the padding in its area.

TableRows and TableColumns

To avoid having to specify the row for each object, you can make use of a special Panel that can only be used in Table Panels, the Panel.TableRow panel type. Put all of the objects for each row into a TableRow Panel. You will still need to specify the column for each object in each row.

TableRow panels are particularly useful when used as an Panel.itemTemplate. Read more about Table Panels and item Arrays at Item Arrays and Panels.

The same kind of organization is also possible with columns by using Panel.TableColumn Panels.

Stretch and Alignment

The size of a GraphObject in a Panel is determined by many factors. The GraphObject.stretch property specifies whether the width and/or height should take up all of the space given to it by the Panel. When the width and/or height is not stretched to fill the given space, the GraphObject.alignment property controls where the object is placed if it is smaller than available space. One may also stretch the width while aligning vertically, just as one may also stretch vertically while aligning horizontally.

If the alignment value for a GraphObject is not set with GraphObject.alignment, it still may be inherited from the RowColumnDefinition.alignment of the row and of the column that the object is in or, if not that, the Panel.defaultAlignment property.

The same inheritance is true for the stretch value for a GraphObject: GraphObject.stretch, then RowColumnDefinition.stretch, and finally Panel.defaultStretch.

Alignment in columns and rows

Examples

In this org chart example, the employee avatars span two rows because GraphObject.rowSpan is 2 on the panel that makes it up.

The first column only takes as much width as it naturally needs and any excess width is given to the second column. This occurs because the RowColumnDefinition for column #0 has RowColumnDefinition.sizing set to None. The same is true for the first row -- any extra height is given to the second row.

There is a column separator line just before the second column, and there is a row separator just before the second row because the respective RowColumnDefinition.separatorStroke properties have been set to a color. However, the row separator is not visible in the first column because that column's definition sets RowColumnDefinition.background to "white" and RowColumnDefinition.coversSeparators to true.

This example uses a Diagram.nodeTemplate and data bindings for reusability (see the section on Data Binding) as well as a tree layout (see the section on Layouts).

Try resizing a node.

Because the Table Panel and its TextBlocks are stretched, when they do not have enough room to render all of the text, the TextBlock.overflow value of TextOverflow.Ellipsis causes "..." to be shown.