The Grid Layout sample demonstrates how to organize nodes into rows. There are several ways in which GridLayout will decide that a node should go into the next row.

Modifying one of the properties will automatically perform another layout using the new property value, because the values of the GridLayout properties are data-bound to the controls in the sample.

WrappingColumn specifies the maximum number of nodes that can be in a row. If the nodes are of different widths, the rows are likely to be of different lengths.

WrappingWidth specifies the maximum width of a row, in model coordinates. As many nodes will go into a row as will fit. The minimum number of nodes in a row is one, so if a node is wider than the wrapping width, it will occupy the whole row and stick out beyond the end. If the WrappingWidth is NaN, it uses the width of the Diagram.

CellSize specifies the minimum space each node should take. Using smaller values allows nodes to be positioned closer to each other. However, if the nodes are of different sizes, their being positioned on a smaller grid makes it less likely that nodes will line up in neat columns. By default the value of NaN NaN means that it should use the maximum of all node widths and the maximum of all node heights.

Spacing controls the amount of space between all of the nodes.

Alignment specifies whether the Position or the Location of each node is used. The Position is the top-left corner of the whole node. The Location is a customizable point in some FrameworkElement of the node's visual tree. In this sample, the node location is the center of the Ellipse.

Sorting controls whether all of the nodes are sorted, and in which order they are laid out.