FlowLayoutPanel
Represents a panel that dynamically arranges its children horizontally or vertically in automatic rows or columns.
The FlowLayoutPanel control arranges its contents in a horizontal or vertical flow direction. You can wrap the control's contents from one row to the next, or from one column to the next. Alternately, you can clip instead of wrap its contents.
You can specify the flow direction by setting the value of the FlowDirection property. The FlowLayoutPanel control correctly reverses its flow direction in Right-to-Left (RTL) layouts. You can also specify whether the FlowLayoutPanel control's contents are wrapped or clipped by setting the value of the WrapContents property.
The FlowLayoutPanel control automatically sizes to its contents when you set the AutoSize property to true. It also provides a FlowBreak property to its child controls. Setting the value of the FlowBreak property to true causes the FlowLayoutPanel control to stop laying out controls in the current flow direction and wrap to the next row or column.
Any Wisej control can be a child of the FlowLayoutPanel control, including other instances of FlowLayoutPanel. With this capability, you can construct sophisticated layouts that adapt to your form's dimensions at run time.
For a full list of properties, methods and events see the API documentation.
Features
AutoSize
When enabled, the FlowLayoutPanel control is able to resize itself to fit it's contents according to the AutoSizeMode property specified.
pageLayoutsFlow Direction
The FlowLayoutPanel control can customize the layout of it's children in one of several directions using the FlowDirection property. The available options are LeftToRight, TopDown, RightToLeft, and BottomUp. The default layout direction is LeftToRight.
Advanced
JavaScript Widget
| Item | Description |
|---|---|
Class name | "wisej.web.Panel" |
Theme appearance | "panel", see Themes. |
Child components | "pane" is the container. "captionbar" is the header. "title" is the title of the panel. "icon" is the icon of the panel, if applicable. "close-button" is the close button of the panel, if applicable. See JavaScript. |
Toolcontainer state | "panel", see Embedded Tools. |
Source code |
Last updated
