In This Article


This panel can render child elements in multiple columns, collapsing columns down as available space decreases. It's a space-efficient and visually-appealing way to render lists of items, or to break paragraphs of text up.


MultiColumnPanel with contact cards


The MultiColumnPanel control provides a way to arrange child elements in one or more columns based on the available width. You specify the maximum number of columns to support, the minimum width of each column, and the margin between each column. Given those parameters, the panel will determine how many columns can fit within the available space.

When arranging elements, the panel will first determine the number of columns that can display in the available width. Once that is determined, the columns are made equal size with the margin space between them. Then elements are arranged downward in order until an average height is reached. Subsequent elements are arranged on the next column and the process repeats.

The measure/arrange algorithm works best when the child elements are all relatively close to the same height.

Important Members

The following MultiColumnPanel members are key to its use:

Member Description

CanRemoveEmptyColumns Property

Gets or sets whether columns without any items can be removed, with remaining columns filling in, thereby maximizing use of available width. The default value is false.

When using multiple MultiColumnPanel instances in a stack where columns should always be aligned, leave this property its default of false. Alternatively when wanting to maximize use of available width, set this property to true.

ColumnMargin Property

Gets or sets the margin width between columns. The default value is 50.

ColumnMinWidth Property

Gets or sets the minimum column width needed for another column to be added. The default value is 300.

MaxColumnCount Property

Gets or sets maximum column count. The default value is 2.