Getting Started with LayoutControl
- 5 minutes to read
This tutorial illustrates how to arrange items using a Layout Control container. The LayoutControl reveals the following benefits when compared to other container controls.
- It allows you to quickly build simple and complicated layouts of controls.
- Maintaining the layout is very easy. If you decide to add new controls or remove existing controls from a layout, it takes only a few seconds. And this will never break an existing layout.
- Automatic alignment of controls that are added to a LayoutControl using LayoutItem wrappers.
- Combining items into regular or tabbed groups.
- Representing groups as GroupBoxes (a container with a title).
- Built-in resizers can be enabled for individual items, allowing end-users to change control sizes.
- The LayoutControl supports a runtime customization mode, where end-users can completely modify the layout according to their requirements. See Customization mode to learn more.
In this tutorial, we'll build a simple layout of controls using the LayoutControl in Expression Blend 3. The layout consists of five controls with labels (labels are added to controls using LayoutItem wrappers).
- Create a new project in Expression Blend 3. Name it LayoutControlSample.
- 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.
In the Assets tab, locate the DXLayoutControl group. This group lists components that are found in the DXLayoutControl suite.
Double-click the LayoutControl element in the Assets tab. The following XAML will be generated, which adds a new LayoutControl object to the UserControl.
<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="LayoutControlSample.MainPage" Width="640" Height="480"> <Grid x:Name="LayoutRoot" Background="White"> <DevExpress_DXLayoutControl:LayoutControl HorizontalAlignment="Left" VerticalAlignment="Top"/> </Grid> </UserControl>Let's do some optimization in this XAML. First, let's make the LayoutControl the root component by removing the Grid component. Second, replace the long DevExpress_DXLayoutControl namespace with a short "lc" string. Third, remove all attribute setters from the LayoutControl tag and add a new one, setting the Background to White. The result is as follows:
<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="LayoutControlSample.MainPage" Width="640" Height="480"> <lc:LayoutControl Background="White"/> </UserControl>In the Assets tab, locate the LayoutItem element. The LayoutItem is an object that displays a label next to a control. Double-click the LayoutItem element and then double-click it again. Two new LayoutItem objects will be added to the LayoutControl. By default, when a LayoutItem is created in Expression Blend at design time, it contains a TextBox control. You can replace the TextBox with any other control.
<lc:LayoutControl Background="White"> <lc:LayoutItem Label="LayoutItem"> <TextBox/> </lc:LayoutItem> <lc:LayoutItem Label="LayoutItem"> <TextBox/> </lc:LayoutItem> </lc:LayoutControl>Let's change the item arrangement direction for the LayoutControl to vertical. Click the LayoutControl in the designer to select the control. Switch to the Properties page and set the Orientation property to Vertical.
An alternative way to change the item arrangement direction is to use drag-and-drop. Drag-and-drop the second item below the first item. The position where the item will be dropped is indicated in red.
The following image shows the result of changing an item orientation.
Let's change the labels for the LayoutItems. Select the first LayoutItem by clicking it in the designer. In the Properties page, set the LayoutItem.Label property to "Name:". For the second LayoutItem, set the label to "Notes:".
<lc:LayoutControl Background="White" Orientation="Vertical"> <lc:LayoutItem Label="Name:"> <TextBox/> </lc:LayoutItem> <lc:LayoutItem Label="Notes:"> <TextBox/> </lc:LayoutItem> </lc:LayoutControl>Now, let's add the Address Info group between the Name and Notes items.
In the DXLayoutControl group in the Assets tab, double-click the LayoutGroup element. This appends a new LayoutGroup object to the LayoutControl. Using drag-and-drop, move the LayoutGroup to the position between the Name and Notes LayoutItems.
<lc:LayoutControl Background="White" Orientation="Vertical"> <lc:LayoutItem Label="Name:"> <TextBox/> </lc:LayoutItem> <lc:LayoutGroup Header="LayoutGroup" View="GroupBox"/> <lc:LayoutItem Label="Notes:"> <TextBox/> </lc:LayoutItem> </lc:LayoutControl>Select the LayoutGroup in the designer. Then, in the Properties page, set the group's LayoutGroup.Header property to "Address Info".
Add items to the Address Info group.
In the designer, select the Address Info LayoutGroup. This ensures that new items will be added to this group and not the LayoutControl.
Add three LayoutItem objects to the group by double-clicking the LayoutItem element in the Assets tab.
Rename the LayoutItems' labels using the Properties page or directly in XAML to "Address:", "Country:" and "City:".
<lc:LayoutControl Background="White" Orientation="Vertical"> <lc:LayoutItem Label="Name:"> <TextBox/> </lc:LayoutItem> <lc:LayoutGroup Header="Address Info" View="GroupBox"> <lc:LayoutItem Label="Address:"> <TextBox/> </lc:LayoutItem> <lc:LayoutItem Label="Country:"> <TextBox/> </lc:LayoutItem> <lc:LayoutItem Label="City:"> <TextBox/> </lc:LayoutItem> </lc:LayoutGroup> <lc:LayoutItem Label="Notes:"> <TextBox/> </lc:LayoutItem> </lc:LayoutControl>
Let's arrange the City item below the Country item and place both of them to the right of the Address item. This can be easily accomplished by dragging-and-dropping the City item below the Country item.
<lc:LayoutControl Background="White" Orientation="Vertical"> <lc:LayoutItem Label="Name:"> <TextBox/> </lc:LayoutItem> <lc:LayoutGroup Header="Address Info" View="GroupBox"> <lc:LayoutItem Label="Address:"> <TextBox/> </lc:LayoutItem> <lc:LayoutGroup Orientation="Vertical"> <lc:LayoutItem Label="Country:"> <TextBox/> </lc:LayoutItem> <lc:LayoutItem Label="City:"> <TextBox/> </lc:LayoutItem> </lc:LayoutGroup> </lc:LayoutGroup> <lc:LayoutItem Label="Notes:"> <TextBox/> </lc:LayoutItem> </lc:LayoutControl>Note that the Country and City items are now arranged vertically within a separate LayoutGroup. The group has been automatically created during drag-and-drop, since the Country and City items must be arranged vertically, but the Address Info group has the horizontal orientation of items.
That's all for this tutorial. The final variant of the XAML code is:
<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="LayoutControlSample.MainPage"
Width="640" Height="480">
<lc:LayoutControl Background="White" Orientation="Vertical">
<lc:LayoutItem Label="Name:">
<TextBox/>
</lc:LayoutItem>
<lc:LayoutGroup Header="Address Info" View="GroupBox">
<lc:LayoutItem Label="Address:">
<TextBox/>
</lc:LayoutItem>
<lc:LayoutGroup Orientation="Vertical">
<lc:LayoutItem Label="Country:">
<TextBox/>
</lc:LayoutItem>
<lc:LayoutItem Label="City:">
<TextBox/>
</lc:LayoutItem>
</lc:LayoutGroup>
</lc:LayoutGroup>
<lc:LayoutItem Label="Notes:">
<TextBox/>
</lc:LayoutItem>
</lc:LayoutControl>
</UserControl>