LayoutControlItem Class

A Layout Group‘s child element that can display a control with a label.

Namespace: DevExpress.Xpf.Docking

Assembly: DevExpress.Xpf.Docking.v24.2.dll

NuGet Package: DevExpress.Wpf.Docking

Declaration

C#

public class LayoutControlItem :
    ContentItem,
    IUIElement,
    ILayoutContent

VB.NET

Public Class LayoutControlItem
    Inherits ContentItem
    Implements IUIElement,
               ILayoutContent

Remarks

A LayoutControlItem object can display a UIElement and a label next to it.

View Example: Build a Layout of Controls within LayoutPanels

Use the LayoutControlItem.Control (the content property) and the BaseLayoutItem.Caption properties to specify the item’s child control and label.

The following code sample adds a LayoutControlItem that displays the TextBox control in the application’s layout:

XAML

<Window ...
    xmlns:dxdo="http://schemas.devexpress.com/winfx/2008/xaml/docking">
    <Grid>
        <dxdo:DockLayoutManager>
            <dxdo:LayoutGroup>
                <dxdo:LayoutGroup Orientation="Vertical" CustomizationCaption="Employee">
                    <dxdo:LayoutControlItem Caption="First Name">
                        <TextBox x:Name="frstname" Text="Arnold"/>
                    </dxdo:LayoutControlItem>
                    <dxdo:LayoutControlItem Caption="Last Name">
                        <TextBox x:Name="lstname" Text="Schwartz"/>
                    </dxdo:LayoutControlItem>
                    <dxdo:LayoutControlItem Caption="Department">
                        <TextBox x:Name="dpt" Text="Engineering"/>
                    </dxdo:LayoutControlItem>
                    <dxdo:LayoutControlItem Caption="Position">
                        <TextBox x:Name="pstn" Text="Manager"/>
                    </dxdo:LayoutControlItem>
                    <dxdo:LayoutControlItem Caption="Full Role">
                        <TextBlock>
                            <TextBlock.Text>
                                <MultiBinding StringFormat="{}{0} {1} {2} {3}">
                                    <Binding ElementName="dpt" Path="Text" />
                                    <Binding ElementName="pstn" Path="Text" />
                                    <Binding ElementName="frstname" Path="Text" />
                                    <Binding ElementName="lstname" Path="Text" />
                                </MultiBinding>
                            </TextBlock.Text>
                        </TextBlock>
                    </dxdo:LayoutControlItem>
        </dxdo:DockLayoutManager>
    </Grid>
<Window>

Customize a LayoutControlItem

Caption

Use the BaseLayoutItem.ShowCaption inherited property to specify whether the LayoutControlItem’s caption is visible.

The BaseLayoutItem.CaptionLocation inherited property allows you to specify an item’s caption position.

Specify the BaseLayoutItem.CaptionImage inherited property to display an item’s caption. Use the BaseLayoutItem.CaptionImageLocation inherited property to customize the item’s image location.

Child Control Alignment

The LayoutControlItem object aligns its child control to the left side of the parent LayoutGroup.

LayoutControlItems and LayoutGroup objects inherit the BaseLayoutItem.CaptionAlignMode property that allows you to customize a child control’s alignment.

As an example, you can set the LayoutGroup‘s CaptionAlignMode inherited property to AlignInGroup to enable the local alignment of controls within the LayoutGroup. Set the LayoutControlItem‘s CaptionAlignMode inherited property to AutoSize to minimize the LayoutControlItem‘s caption width and avoid text wrapping.

Limitations

1. Do not combine dock and layout items within a single LayoutGroup.

2. Do not combine LayoutGroups that contain dock items with groups that contain layout items. If you need to arrange layout items next to dock items, add the layout items into a LayoutPanel.

3. Do not use dock items outside the DockLayoutManager control.

4. Do not add LayoutControlItems in LayoutPanels. Instead, wrap LayoutControlItems with a LayoutGroup and then add the LayoutGroup in a LayoutPanel:

   XAML

   <dxdo:LayoutPanel>
       <dxdo:LayoutGroup>
           <dxdo:LayoutControlItem>
               <!-- ... -->
           </dxdo:LayoutControlItem>
       </dxdo:LayoutGroup>
   </dxdo:LayoutPanel>
   

Place the LayoutControlItem objects only inside Layout Groups.

Related GitHub Examples

The following code snippets (auto-collected from DevExpress Examples) contain references to the LayoutControlItem class.

Note

The algorithm used to collect these code examples remains a work in progress. Accordingly, the links and snippets below may produce inaccurate results. If you encounter an issue with code examples below, please use the feedback form on this page to report the issue.

XAML

wpf-dock-layout-manager-limit-layout-group-customization-at-runtime/CS/DXDockingForLayoutPurposes/MainWindow.xaml#L22

<dxd:LayoutGroup Name="generalLayoutGroup" GroupBorderStyle="GroupBox" ShowCaption="True" Caption="General" Orientation="Vertical">
    <dxd:LayoutControlItem Name="incidentNumber" Caption="Incident Number" VerticalAlignment="Top">
        <dxe:TextEdit/>

wpf-docklayoutmanager-move-a-layout-item-in-code/CS/DockLayoutManager_MoveItem/Window1.xaml#L13

<dxdo:LayoutGroup Name="Root" Orientation="Vertical">
    <dxdo:LayoutControlItem>
        <Button

Inheritance

Show 29 items

Object

DispatcherObject

DependencyObject

Visual

UIElement

FrameworkElement

Control

DevExpress.Xpf.Docking.psvFrameworkElement

BaseLayoutItem

ContentItem

LayoutControlItem

DashboardLayoutItem

BoundImageDashboardLayoutItem

CardDashboardLayoutItem

ChartDashboardLayoutItem

ComboBoxDashboardLayoutItem

CustomItemDashboardLayoutItem

DateFilterDashboardLayoutItem

GaugeDashboardLayoutItem

GridDashboardLayoutItem

ImageDashboardLayoutItem

ListBoxDashboardLayoutItem

MapDashboardLayoutItem

PieDashboardLayoutItem

PivotDashboardLayoutItem

RangeDashboardLayoutItem

TextBoxDashboardLayoutItem

TreemapDashboardLayoutItem

TreeViewDashboardLayoutItem