Getting Started with FlowLayoutControl

• May 22, 2020
• 4 minutes to read

 

A Flow Layout Control represents a container that arranges its items into columns or rows. It also allows one of its items to be maximized. This tutorial shows how to use a FlowLayoutControl to create the following layout:

Here, the GroupBox 1 child item is maximized, so that it occupies the majority of the FlowLayoutControl, while other items are arranged along the control's top edge.

In this tutorial, we'll build the layout in Expression Blend 3.

1. Create a new project in Expression Blend 3. Name it FlowLayoutControlSample.
2. In the Projects tab, add references to the following libraries: DevExpress.Xpf.Core and DevExpress.Xpf.LayoutControl. These libraries can be located in the installation directory.

3. In the Assets tab, locate the DXLayoutControl group. This group lists components that are found in the DXLayoutControl suite.

   

   Double-click the FlowLayoutControl element in the Assets tab. The following XAML will be generated, which adds a FlowLayoutControl object to the UserControl.

   XAML

   
   <UserControl
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       xmlns:DevExpress_DXLayoutControl="clr-namespace:DevExpress.Xpf.LayoutControl;assembly=DevExpress.Xpf.LayoutControl.v14.2"
       x:Class="FlowLayoutControlSample.MainPage"
       Width="640" Height="480">
   
       <Grid x:Name="LayoutRoot" Background="White">
           <DevExpress_DXLayoutControl:FlowLayoutControl Height="100" HorizontalAlignment="Left" VerticalAlignment="Top" Width="100"/>
       </Grid>
   </UserControl>
   

4. Let's do some optimization in this XAML. 1) Make the FlowLayoutControl the root component by removing the Grid component. 2) Replace the long DevExpress_DXLayoutControl namespace with a short "lc" string. 3) Remove all attribute setters from the FlowLayoutControl tag and add a new one, setting the Background to White. 4) For an additional demonstration, set the UserControl's width and height to 400 and 241, respectively. The result is as follows.

   XAML

   
   <UserControl
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       xmlns:lc="clr-namespace:DevExpress.Xpf.LayoutControl;assembly=DevExpress.Xpf.LayoutControl.v14.2"
       x:Class="FlowLayoutControlSample.MainPage"
       Width="400" Height="241">
   
       <lc:FlowLayoutControl Background="White"/>
   
   </UserControl>
   

5. In the Assets tab, double-click the GroupBox element. This adds a new GroupBox object to the layout. In the Properties window or directly in XAML, set the GroupBox's Header to "GroupBox 1" and its name to "groupBox1":

   XAML

   
   <lc:FlowLayoutControl Background="White">
       <lc:GroupBox x:Name="groupBox1" Header="GroupBox 1"/>
   </lc:FlowLayoutControl>
   

   

6. Enable the Maximize element for the GroupBox via the GroupBox.MaximizeElementVisibility property. You can set this property directly in XAML or via the Properties page.

   XAML

   
   <lc:FlowLayoutControl Background="White">
       <lc:GroupBox x:Name="groupBox1" Header="GroupBox 1" MaximizeElementVisibility="Visible"/>
   </lc:FlowLayoutControl>
   

   The Maximize element is supported only for the GroupBox objects when they are used within a FlowLayoutControl. It allows an end-user to maximize and then restore a GroupBox object. Other types of items can be maximized and then restored within the FlowLayoutControl in code.

   

7. Add five more GroupBox objects by copying-and-pasting the created item. Change their names and headers as shown in the following XAML.

   XAML

   
   <lc:FlowLayoutControl Background="White">
       <lc:GroupBox x:Name="groupBox1" Header="GroupBox 1" MaximizeElementVisibility="Visible"/>
       <lc:GroupBox x:Name="groupBox2" Header="GroupBox 2" MaximizeElementVisibility="Visible"/>
       <lc:GroupBox x:Name="groupBox3" Header="GroupBox 3" MaximizeElementVisibility="Visible"/>
       <lc:GroupBox x:Name="groupBox4" Header="GroupBox 4" MaximizeElementVisibility="Visible"/>
       <lc:GroupBox x:Name="groupBox5" Header="GroupBox 5" MaximizeElementVisibility="Visible"/>
       <lc:GroupBox x:Name="groupBox6" Header="GroupBox 6" MaximizeElementVisibility="Visible"/>
   </lc:FlowLayoutControl>
   

   

   By default, the created items are arranged in columns. You can change the orientation of the item flow via the FlowLayoutControl.Orientation property. By default, the item flow wraps at the container's bottom or right edge. You can still wrap the flow manually for a specific item, by using the FlowLayoutControl.IsFlowBreak attached property. To learn about other layout features, see Flow Layout Control.

8. Let's maximize the first item (GroupBox 1). This can be accomplished by using the FlowLayoutControl.MaximizedElement property.

   You can set this property in XAML, using the Binding extension.

   XAML

   
   <lc:FlowLayoutControl Background="White" MaximizedElement="{Binding ElementName=groupBox1}">
   ...
   

   An alternative way to set this property is to use the Create Data Binding dialog, which can be invoked by clicking the Advanced property options button for the MaximizedElement property in the Properties page, and then selecting Data Binding....

   

   In the Create Data Binding dialog, click Element Property and then select "groupBox1" in the list on the left.

   

   The GroupBox 1 item gets maximized, while other items are arranged on the right.

   

9. To change the position of the maximized element relative to the remaining items, use the FlowLayoutControl.MaximizedElementPosition property. You can either change the property in the Properties page or directly in XAML. Let's set the property to Bottom.

   XAML

   
   <lc:FlowLayoutControl Background="White" MaximizedElement="{Binding ElementName=groupBox1}" MaximizedElementPosition="Bottom">
   ...
   

   The result will be as follows.

   

This is the end of this tutorial. The final variant of the XAML code is listed below. You can run this example and practice maximizing Group Box items.

XAML

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:lc="clr-namespace:DevExpress.Xpf.LayoutControl;assembly=DevExpress.Xpf.LayoutControl.v14.2"
    x:Class="FlowLayoutControlSample.MainPage"
    Width="400" Height="241">

    <lc:FlowLayoutControl Background="White" MaximizedElement="{Binding ElementName=groupBox1}" MaximizedElementPosition="Bottom">
        <lc:GroupBox x:Name="groupBox1" Header="GroupBox 1" MaximizeElementVisibility="Visible"/>
        <lc:GroupBox x:Name="groupBox2" Header="GroupBox 2" MaximizeElementVisibility="Visible"/>
        <lc:GroupBox x:Name="groupBox3" Header="GroupBox 3" MaximizeElementVisibility="Visible"/>
        <lc:GroupBox x:Name="groupBox4" Header="GroupBox 4" MaximizeElementVisibility="Visible"/>
        <lc:GroupBox x:Name="groupBox5" Header="GroupBox 5" MaximizeElementVisibility="Visible"/>
        <lc:GroupBox x:Name="groupBox6" Header="GroupBox 6" MaximizeElementVisibility="Visible"/>
    </lc:FlowLayoutControl>

</UserControl>