Skip to main content

FlowLayoutControl Class

Represents a container that arranges child controls into rows or columns, and alows the flow of the controls to be wrapped (automatically at the container’s edge or manually at any child control).

Namespace: DevExpress.Xpf.LayoutControl

Assembly: DevExpress.Xpf.LayoutControl.v24.1.dll

NuGet Package: DevExpress.Wpf.LayoutControl

Declaration

[DefaultBindingProperty("ItemsSource")]
public class FlowLayoutControl :
    LayoutControlBase,
    IFlowLayoutControl,
    ILayoutControlBase,
    IScrollControl,
    IPanel,
    IControl,
    ILayoutModelBase,
    IFlowLayoutModel,
    IMaximizingContainer

Remarks

The FlowLayoutControl arranges its items into rows or columns, according to the FlowLayoutControl.Orientation property. By default, the flow of items is automatically wrapped at the container’s edge. However, you can wrap the flow manually at a specific item. In the following image, the flow of items is automatically wrapped at Item 6, and manually at Item 9:

FlowLayoutControl

The following code snippet displays items in FlowLayoutControl and enables the maximization feature.

<dx:ThemedWindow
        ...
        xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
        xmlns:dxlc="http://schemas.devexpress.com/winfx/2008/xaml/layoutcontrol">
    <Window.Resources>
        <Style x:Key="myGroupBoxStyle" TargetType="dxlc:GroupBox">
            <Setter Property="MaximizeElementVisibility" Value="Visible"/>
            <Setter Property="MinimizeElementVisibility" Value="Visible"/>
            <Setter Property="Width" Value="150"/>
        </Style>
    </Window.Resources>

    <Grid x:Name="LayoutRoot" Background="White">
        <dxlc:FlowLayoutControl Orientation="Vertical" Background="#FFFAFAFA" BreakFlowToFit="True" 
            MaximizedElementPosition="Right" MaximizedElement="{Binding ElementName=groupBox1}">
            <dxlc:GroupBox x:Name="groupBox1" Header="Group 1" Style="{StaticResource  myGroupBoxStyle}">
                <TextBlock  TextWrapping="Wrap" Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed molestie porttitor congue..."/>
            </dxlc:GroupBox>
            <dxlc:GroupBox  Header="Group 2" Style="{StaticResource  myGroupBoxStyle}">
                <TextBlock  TextWrapping="Wrap" Text="Ut sagittis urna et lorem..."/>
            </dxlc:GroupBox>
            <dxlc:GroupBox  Header="Group 3" Style="{StaticResource  myGroupBoxStyle}">
                <TextBlock  TextWrapping="Wrap" Text="Nunc diam justo, tempus sit amet..."/>
            </dxlc:GroupBox>
            <dxlc:GroupBox  Header="Group 4" Style="{StaticResource  myGroupBoxStyle}">
                <TextBlock  TextWrapping="Wrap" Text="Quisque iaculis, risus ac bibendum ornare..."/>
            </dxlc:GroupBox>
        </dxlc:FlowLayoutControl>
    </Grid>
</dx:ThemedWindow>

Flow Layout Control - Code Snippet Result

The FlowLayoutControl supports the following features:

Refer to the Flow Layout Control topic for more information on the FlowLayoutControl.

View Example

See Also