FlowLayoutControl Class

In This Article

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

[StyleTypedProperty(Property = "MaximizedElementPositionIndicatorStyle", StyleTargetType = typeof(MaximizedElementPositionIndicator))]
[DXToolboxBrowsable]
[DefaultBindingProperty("ItemsSource")]
[StyleTypedProperty(Property = "LayerSeparatorStyle", StyleTargetType = typeof(LayerSeparator))]
public class FlowLayoutControl :
    LayoutControlBase,
    IFlowLayoutControl,
    ILayoutControlBase,
    IScrollControl,
    IPanel,
    IControl,
    IFlowLayoutModel,
    ILayoutModelBase,
    IMaximizingContainer

<StyleTypedProperty(Property:="MaximizedElementPositionIndicatorStyle", StyleTargetType:=GetType(MaximizedElementPositionIndicator))>
<DXToolboxBrowsable>
<DefaultBindingProperty("ItemsSource")>
<StyleTypedProperty(Property:="LayerSeparatorStyle", StyleTargetType:=GetType(LayerSeparator))>
Public Class FlowLayoutControl
    Inherits LayoutControlBase
    Implements IFlowLayoutControl,
               ILayoutControlBase,
               IScrollControl,
               IPanel,
               IControl,
               IFlowLayoutModel,
               ILayoutModelBase,
               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 FlowLayoutControl supports the following features:

Automatic and manual item flow wrapping.

To disable item flow wrapping use the FlowLayoutControl.BreakFlowToFit property. The FlowLayoutControl.IsFlowBreak attached property allows you to manually wrap the flow of items, starting a new column or row, at a specific item.
Items can be stretched to the width/height of the FlowLayoutControl. See the FlowLayoutControl.StretchContent property.
Dragging-and-dropping items, allowing an end-user to move items to new positions. See the FlowLayoutControl.AllowItemMoving property.
Resizing layers using built-in layer separators. See the FlowLayoutControl.AllowLayerSizing property.
Maximizing a specific item in the center of the FlowLayoutControl, while other items are arranged in a single layer (column or row) along the control's edge. See the FlowLayoutControl.MaximizedElement property.

To learn more about the FlowLayoutControl, refer to the Flow Layout Control topic.

#Examples

The following example creates a FlowLayoutControl with four GroupBox objects as children. For the GroupBox objects, the Maximize and Minimize elements are enabled via the GroupBox.MaximizeElementVisibility and GroupBox.MinimizeElementVisibility properties.

The first group is maximized in XAML by setting the FlowLayoutControl.MaximizedElement property.

The following image shows the result:

FlowLayoutControl_GroupBox_Ex

XAML

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:lc="http://schemas.devexpress.com/winfx/2008/xaml/layoutcontrol"
    x:Class="FlowLayoutControl1.MainPage"
    >
    <UserControl.Resources>
        <Style x:Key="myGroupBoxStyle" TargetType="lc:GroupBox">
            <Setter Property="MaximizeElementVisibility" Value="Visible"/>
            <Setter Property="MinimizeElementVisibility" Value="Visible"/>
            <Setter Property="Width" Value="150"/>
        </Style>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White">
        <lc:FlowLayoutControl Orientation="Vertical" Background="#FFFAFAFA" BreakFlowToFit="True" 
            MaximizedElementPosition="Right" MaximizedElement="{Binding ElementName=groupBox1}">
            <lc: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..."/>
            </lc:GroupBox>
            <lc:GroupBox  Header="Group 2" Style="{StaticResource  myGroupBoxStyle}">
                <TextBlock  TextWrapping="Wrap" Text="Ut sagittis urna et lorem..."/>
            </lc:GroupBox>
            <lc:GroupBox  Header="Group 3" Style="{StaticResource  myGroupBoxStyle}">
                <TextBlock  TextWrapping="Wrap" Text="Nunc diam justo, tempus sit amet..."/>
            </lc:GroupBox>
            <lc:GroupBox  Header="Group 4" Style="{StaticResource  myGroupBoxStyle}">
                <TextBlock  TextWrapping="Wrap" Text="Quisque iaculis, risus ac bibendum ornare..."/>
            </lc:GroupBox>
        </lc:FlowLayoutControl>
    </Grid>
</UserControl>