# FlexLayoutPanel

Namespace: **Wisej.Web**

Assembly: **Wisej.Framework** (4.0.0.0)

* [Control](https://docs.wisej.com/api/wisej.web/general/control)
  * [ScrollableControl](https://docs.wisej.com/api/wisej.web/containers/scrollablecontrol)
    * [Panel](https://docs.wisej.com/api/wisej.web/containers/wisej.web.panel)
      * [FlexLayoutPanel](https://docs.wisej.com/api/wisej.web/containers/flexlayoutpanel)

Represents a panel that dynamically arranges its child controls.

{% tabs %}
{% tab title="C#" %}

```csharp
public class FlexLayoutPanel : Panel, IExtenderProvider
```

{% endtab %}

{% tab title="VB.NET" %}

```visual-basic
Public Class FlexLayoutPanel
    Inherits Panel
    Implements IExtenderProvider
```

{% endtab %}
{% endtabs %}

The [FlexLayoutPanel](https://docs.wisej.com/api/wisej.web/containers/flexlayoutpanel) can arrange its child controls using the layout engine specified in [LayoutStyle](#layoutstyle). When the value is set to [Default](https://docs.wisej.com/api/wisej.web/containers/wisej.web.flexlayoutstyle#fields), the child controls are arranged using the default layout engine, using their location, dock style and anchor properties. When the value of [LayoutStyle](#layoutstyle) is set to [Horizontal](https://docs.wisej.com/api/wisej.web/containers/wisej.web.flexlayoutstyle#fields), child controls are arranged horizontally in a single row. When the value of [LayoutStyle](#layoutstyle) is set to [Vertical](https://docs.wisej.com/api/wisej.web/containers/wisej.web.flexlayoutstyle#fields), child controls are arranged vertically in a single column. Uses the following properties of the child controls:

* [Margin](https://docs.wisej.com/api/general/control#margin) Increases the space around the control.
* AlignY Aligns the control vertically within its parent using one of the [VerticalAlignment](https://docs.wisej.com/api/wisej.web/enumerations/wisej.web.verticalalignment) values. It's used only when [LayoutStyle](#layoutstyle) is set to [Horizontal](https://docs.wisej.com/api/wisej.web/containers/wisej.web.flexlayoutstyle#fields).
* AlignX Aligns the control horizontally within its parent using one of the [HorizontalAlign](#horizontalalign) values. It's used only when [LayoutStyle](#layoutstyle) is set to [Vertical](https://docs.wisej.com/api/wisej.web/containers/wisej.web.flexlayoutstyle#fields).
* FillWeight Stretches the control's width or height to use the remaining space in the parent [FlexLayoutPanel](https://docs.wisej.com/api/wisej.web/containers/flexlayoutpanel) proportionally, according to the fill weights of all the children.
* [MinimumSize](https://docs.wisej.com/api/general/control#minimumsize) Enforces the minimum size of controls stretched using the FillWeight value.
* [MaximumSize](https://docs.wisej.com/api/general/control#maximumsize) Enforces the maximum size of controls stretched using the FillWeight value.

Uses the following properties of the parent [FlexLayoutPanel](https://docs.wisej.com/api/wisej.web/containers/flexlayoutpanel) control:

* [HorizontalAlign](#horizontalalign) Aligns all the child controls horizontally using one of the [HorizontalAlignment](https://docs.wisej.com/api/wisej.web/enumerations/wisej.web.horizontalalignment) values. If any of the child control indicates a FillWeight value greater than 0, the remaining space is used to stretch the control and no alignment can take place since there is no remaining space. When [LayoutStyle](#layoutstyle) is set to [Vertical](https://docs.wisej.com/api/wisej.web/containers/wisej.web.flexlayoutstyle#fields), the value of [HorizontalAlign](#horizontalalign) is the default for the AlignX property of child controls.
* [VerticalAlign](#verticalalign) Aligns all the child controls vertically using one of the [VerticalAlignment](https://docs.wisej.com/api/wisej.web/enumerations/wisej.web.verticalalignment) values. If any of the child control indicates a FillWeight value greater than 0, the remaining space is used to stretch the control and no alignment can take place since there is no remaining space. When [LayoutStyle](#layoutstyle) is set to [Horizontal](https://docs.wisej.com/api/wisej.web/containers/wisej.web.flexlayoutstyle#fields), the value of [VerticalAlign](#verticalalign) is the default for the AlignY property of child controls.
* [Spacing](#spacing) Increases the horizontal or vertical space between the child controls. The value in pixels of [Spacing](#spacing) is added to the control's [Margin](https://docs.wisej.com/api/general/control#margin).
* [Padding](https://docs.wisej.com/api/general/control#padding) Increases the distance between the child controls and the borders of the parent panel.

## Constructors

### ![](https://1075938901-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2HvlWXJQMV7DxhGzw7Y1%2Fuploads%2Fgit-blob-2389c55cd19719a73a5ae98e1528c8dc8525cc35%2Finstance.png?alt=media) FlexLayoutPanel()

Initializes a new instance of the [FlexLayoutPanel](https://docs.wisej.com/api/wisej.web/containers/flexlayoutpanel) class.

### ![](https://1075938901-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2HvlWXJQMV7DxhGzw7Y1%2Fuploads%2Fgit-blob-2389c55cd19719a73a5ae98e1528c8dc8525cc35%2Finstance.png?alt=media) FlexLayoutPanel(controls, layout)

Initializes a new instance of the [FlexLayoutPanel](https://docs.wisej.com/api/wisej.web/containers/flexlayoutpanel) class with the specified settings.

| Name         | Type                                                                                                         | Description                                                                                                   |
| ------------ | ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------- |
| **controls** | [Control\[\]](https://docs.wisej.com/api/wisej.web/general/control)                                          | An array of [Control](https://docs.wisej.com/api/wisej.web/general/control) objects to be added to the panel. |
| **layout**   | [FlexLayoutStyle](https://docs.wisej.com/api/wisej.web/containers/flexlayoutpanel/wisej.web.flexlayoutstyle) | Initial [LayoutStyle](#layoutstyle).                                                                          |

### ![](https://1075938901-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2HvlWXJQMV7DxhGzw7Y1%2Fuploads%2Fgit-blob-2389c55cd19719a73a5ae98e1528c8dc8525cc35%2Finstance.png?alt=media) FlexLayoutPanel(location, size, controls, layout)

Initializes a new instance of the [FlexLayoutPanel](https://docs.wisej.com/api/wisej.web/containers/flexlayoutpanel) class with the specified settings.

| Name         | Type                                                                                                         | Description                                                                                                   |
| ------------ | ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------- |
| **location** | [Point](https://docs.microsoft.com/dotnet/api/system.drawing.point)                                          | The location of the panel on its parent control.                                                              |
| **size**     | [Size](https://docs.microsoft.com/dotnet/api/system.drawing.size)                                            | The size of the panel.                                                                                        |
| **controls** | [Control\[\]](https://docs.wisej.com/api/wisej.web/general/control)                                          | An array of [Control](https://docs.wisej.com/api/wisej.web/general/control) objects to be added to the panel. |
| **layout**   | [FlexLayoutStyle](https://docs.wisej.com/api/wisej.web/containers/flexlayoutpanel/wisej.web.flexlayoutstyle) | Initial [LayoutStyle](#layoutstyle).                                                                          |

## Properties

### ![](https://1075938901-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2HvlWXJQMV7DxhGzw7Y1%2Fuploads%2Fgit-blob-2389c55cd19719a73a5ae98e1528c8dc8525cc35%2Finstance.png?alt=media) HorizontalAlign

[HorizontalAlignment](https://docs.wisej.com/api/wisej.web/enumerations/wisej.web.horizontalalignment): Determines the horizontal alignment of the child controls when [LayoutStyle](#layoutstyle) is set to [Vertical](https://docs.wisej.com/api/wisej.web/containers/wisej.web.flexlayoutstyle#fields). (Default: `Left`)

### ![](https://1075938901-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2HvlWXJQMV7DxhGzw7Y1%2Fuploads%2Fgit-blob-2389c55cd19719a73a5ae98e1528c8dc8525cc35%2Finstance.png?alt=media) LayoutEngine

[LayoutEngine](https://github.com/iceteagroup/wisej-docs-api/blob/v4.0/wisej.web.layout/containers/layoutengine/layoutengine/README.md): Returns the control's layout engine.

### ![](https://1075938901-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2HvlWXJQMV7DxhGzw7Y1%2Fuploads%2Fgit-blob-2389c55cd19719a73a5ae98e1528c8dc8525cc35%2Finstance.png?alt=media) LayoutStyle

[FlexLayoutStyle](https://docs.wisej.com/api/wisej.web/containers/flexlayoutpanel/wisej.web.flexlayoutstyle): Determines the layout engine to use to arrange the panel's child controls. (Default: `Default`)

* [Default](https://docs.wisej.com/api/wisej.web/containers/wisej.web.flexlayoutstyle#fields) Controls are arranged using the default layout engine and according to their location, dock style, and anchoring.
* [Horizontal](https://docs.wisej.com/api/wisej.web/containers/wisej.web.flexlayoutstyle#fields) Controls are arranged horizontally in a single row according to their width, alignment, fill weight, and margin. The control's location, dock style, and anchoring are ignored.
* [Vertical](https://docs.wisej.com/api/wisej.web/containers/wisej.web.flexlayoutstyle#fields) Controls are arranged vertically in a single column according to their height, alignment, fill weight, and margin. The control's location, dock style, and anchoring are ignored.

### ![](https://1075938901-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2HvlWXJQMV7DxhGzw7Y1%2Fuploads%2Fgit-blob-2389c55cd19719a73a5ae98e1528c8dc8525cc35%2Finstance.png?alt=media) Spacing

[Int32](https://docs.microsoft.com/dotnet/api/system.int32): Returns or sets the additional space, in pixels, between child controls when [LayoutStyle](#layoutstyle) is set to [Horizontal](https://docs.wisej.com/api/wisej.web/containers/wisej.web.flexlayoutstyle#fields) or [Vertical](https://docs.wisej.com/api/wisej.web/containers/wisej.web.flexlayoutstyle#fields). The default value is 10. (Default: `10`)

### ![](https://1075938901-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2HvlWXJQMV7DxhGzw7Y1%2Fuploads%2Fgit-blob-2389c55cd19719a73a5ae98e1528c8dc8525cc35%2Finstance.png?alt=media) VerticalAlign

[VerticalAlignment](https://docs.wisej.com/api/wisej.web/enumerations/wisej.web.verticalalignment): Determines the vertical alignment of the child controls when [LayoutStyle](#layoutstyle) is set to [Horizontal](https://docs.wisej.com/api/wisej.web/containers/wisej.web.flexlayoutstyle#fields). (Default: `Top`)

## Methods

### ![](https://1075938901-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2HvlWXJQMV7DxhGzw7Y1%2Fuploads%2Fgit-blob-2389c55cd19719a73a5ae98e1528c8dc8525cc35%2Finstance.png?alt=media) GetAlignX(control)

Determines the horizontal alignment of the child control within the panel when [LayoutStyle](#layoutstyle) is set to [Vertical](https://docs.wisej.com/api/wisej.web/containers/wisej.web.flexlayoutstyle#fields).

| Parameter   | Type                                                            | Description |
| ----------- | --------------------------------------------------------------- | ----------- |
| **control** | [Control](https://docs.wisej.com/api/wisej.web/general/control) |             |

**Returns:** [HorizontalAlignment](https://docs.wisej.com/api/wisej.web/enumerations/wisej.web.horizontalalignment).

### ![](https://1075938901-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2HvlWXJQMV7DxhGzw7Y1%2Fuploads%2Fgit-blob-2389c55cd19719a73a5ae98e1528c8dc8525cc35%2Finstance.png?alt=media) GetAlignY(control)

Determines the vertical alignment of the child control within the panel when [LayoutStyle](#layoutstyle) is set to [Horizontal](https://docs.wisej.com/api/wisej.web/containers/wisej.web.flexlayoutstyle#fields).

| Parameter   | Type                                                            | Description |
| ----------- | --------------------------------------------------------------- | ----------- |
| **control** | [Control](https://docs.wisej.com/api/wisej.web/general/control) |             |

**Returns:** [VerticalAlignment](https://docs.wisej.com/api/wisej.web/enumerations/wisej.web.verticalalignment).

### ![](https://1075938901-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2HvlWXJQMV7DxhGzw7Y1%2Fuploads%2Fgit-blob-2389c55cd19719a73a5ae98e1528c8dc8525cc35%2Finstance.png?alt=media) GetFillWeight(control)

Determines whether to proportionally stretch the child within the panel to use the remaining space.

| Parameter   | Type                                                            | Description        |
| ----------- | --------------------------------------------------------------- | ------------------ |
| **control** | [Control](https://docs.wisej.com/api/wisej.web/general/control) | The child control. |

**Returns:** [Int32](https://docs.microsoft.com/dotnet/api/system.int32). The fill weight value associated with the control.

The FillWeight property defines the relative width or height of a control managed by the [Panel](https://docs.wisej.com/api/wisej.web/containers/wisej.web.panel). The default value is 0 and the maximum value is 100.

### ![](https://1075938901-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2HvlWXJQMV7DxhGzw7Y1%2Fuploads%2Fgit-blob-2389c55cd19719a73a5ae98e1528c8dc8525cc35%2Finstance.png?alt=media) SetAlignX(control, value)

Determines the horizontal alignment of the child control within the panel when [LayoutStyle](#layoutstyle) is set to [Vertical](https://docs.wisej.com/api/wisej.web/containers/wisej.web.flexlayoutstyle#fields).

| Parameter   | Type                                                                                                   | Description |
| ----------- | ------------------------------------------------------------------------------------------------------ | ----------- |
| **control** | [Control](https://docs.wisej.com/api/wisej.web/general/control)                                        |             |
| **value**   | [HorizontalAlignment](https://docs.wisej.com/api/wisej.web/enumerations/wisej.web.horizontalalignment) |             |

### ![](https://1075938901-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2HvlWXJQMV7DxhGzw7Y1%2Fuploads%2Fgit-blob-2389c55cd19719a73a5ae98e1528c8dc8525cc35%2Finstance.png?alt=media) SetAlignY(control, value)

Determines the vertical alignment of the child control within the panel when [LayoutStyle](#layoutstyle) is set to [Horizontal](https://docs.wisej.com/api/wisej.web/containers/wisej.web.flexlayoutstyle#fields).

| Parameter   | Type                                                                                               | Description |
| ----------- | -------------------------------------------------------------------------------------------------- | ----------- |
| **control** | [Control](https://docs.wisej.com/api/wisej.web/general/control)                                    |             |
| **value**   | [VerticalAlignment](https://docs.wisej.com/api/wisej.web/enumerations/wisej.web.verticalalignment) |             |

### ![](https://1075938901-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2HvlWXJQMV7DxhGzw7Y1%2Fuploads%2Fgit-blob-2389c55cd19719a73a5ae98e1528c8dc8525cc35%2Finstance.png?alt=media) SetFillWeight(control, value)

Determines whether to proportionally stretch the child within the panel to use the remaining space.

| Parameter   | Type                                                            | Description                   |
| ----------- | --------------------------------------------------------------- | ----------------------------- |
| **control** | [Control](https://docs.wisej.com/api/wisej.web/general/control) | The child control.            |
| **value**   | [Int32](https://docs.microsoft.com/dotnet/api/system.int32)     | The fill weight value to set. |

The FillWeight property defines the relative width or height of a control managed by the [Panel](https://docs.wisej.com/api/wisej.web/containers/wisej.web.panel). The default value is 0 and the maximum value is 100. **Throws:**

* [ArgumentOutOfRangeException](https://docs.microsoft.com/dotnet/api/system.argumentoutofrangeexception) The value is less than 0 or greater than 100.

## Implements

| Name                                                                                                 | Description                                                                                                                              |
| ---------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| [IUserData](https://docs.wisej.com/api/wisej.web/interfaces/wisej.web.iuserdata)                     | Provides access to the `UserData` and `Tag` properties associated to the component implementing this interface.                          |
| [IBindableComponent](https://docs.wisej.com/api/wisej.web/data-binding/wisej.web.ibindablecomponent) | Bindable components implement this interface.                                                                                            |
| [IDropTarget](https://docs.wisej.com/api/wisej.web/interfaces/wisej.web.idroptarget)                 | Controls that support drag & drop operations implement this interface.                                                                   |
| [IImage](https://docs.wisej.com/api/wisej.web/interfaces/wisej.web.iimage)                           | Provides access to common image properties across the controls that implement this interface.                                            |
| [IWisejComponent](https://docs.wisej.com/api/wisej.core/interfaces/wisej.core.iwisejcomponent)       | All wisej components implement this interface.                                                                                           |
| [IWisejControl](https://docs.wisej.com/api/wisej.core/interfaces/wisej.core.iwisejcontrol)           | All wisej controls derived from the [Control](https://docs.wisej.com/api/wisej.web/general/control) class must implement this interface. |
| [IWisejSerializable](https://docs.wisej.com/api/wisej.core/interfaces/wisej.core.iwisejserializable) | Allows an object to serialize itself.                                                                                                    |