Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

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.2.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