LayoutItem Class

A control that consists of a header and content regions.

Namespace: DevExpress.UI.Xaml.Layout

Assembly: DevExpress.UI.Xaml.Layout.v21.2.dll

NuGet Package: DevExpress.Uwp.Controls

Declaration

C#
VB.NET

[StyleTypedProperty(Property = "HeaderStyle", StyleTargetType = typeof(LayoutItemHeader))]
[TemplatePart(Name = "PART_Content", Type = typeof(LayoutItemContentPresenter))]
[TemplatePart(Name = "PART_Header", Type = typeof(LayoutItemHeader))]
[ToolboxTabName("DX.21.2: Navigation & Layout")]
public class LayoutItem :
    LayoutAwareHeaderedContentContainer,
    IHeaderedElement,
    IItemSizeModeProvider

<ToolboxTabName("DX.21.2: Navigation & Layout")>
<TemplatePart(Name:="PART_Content", Type:=GetType(LayoutItemContentPresenter))>
<TemplatePart(Name:="PART_Header", Type:=GetType(LayoutItemHeader))>
<StyleTypedProperty(Property:="HeaderStyle", StyleTargetType:=GetType(LayoutItemHeader))>
Public Class LayoutItem
    Inherits LayoutAwareHeaderedContentContainer
    Implements IHeaderedElement,
               IItemSizeModeProvider

Remarks

Visually a LayoutItem consists of a header and content regions that can be specified via the inherited Header and Content properties.

LayoutItem

You can place any control as the item’s content, and if required, visualize it using the corresponding template. When declaring a LayoutItem object in XAML, any object defined between the LayoutItem start and end tags is used to initialize the Content property.

Typically, LayoutItem objects are used as elements of a LayoutControl and LayoutGroups. When they are used this way, the content regions of LayoutItems are aligned according to the items’ headers. This feature is controlled by the LayoutGroupBase.ItemHeadersAlignment properties of the LayoutControl and LayoutGroups where the items reside and by the LayoutItem.HeaderAlignment properties of the items themselves.

To specify the position of the item’s header relative to the content region, use the LayoutItem.HeaderPosition property.

Example

The following XAML code creates a LayoutControl with two LayoutItems. The first item displays a text editor, while the second item displays a group of radio buttons:

LayoutItem_ex

XAML

xmlns:Layout="using:DevExpress.UI.Xaml.Layout" xmlns:Editors="using:DevExpress.UI.Xaml.Editors"

<Layout:LayoutControl Orientation="Vertical" Width="400">
    <Layout:LayoutItem Header="Purchase price:">
        <Editors:TextEdit/>
    </Layout:LayoutItem>
    <Layout:LayoutItem Header="Purpose of Loan">
        <StackPanel>
            <RadioButton Content="Purchase" IsChecked="True" GroupName="pOfLoan"/>
            <RadioButton Content="Refinance"  GroupName="pOfLoan"/>
            <RadioButton Content="Construction"  GroupName="pOfLoan"/>
            <RadioButton Content="Construction-Permanent"  GroupName="pOfLoan"/>
            <RadioButton Content="Other"  GroupName="pOfLoan"/>
        </StackPanel>
    </Layout:LayoutItem>
</Layout:LayoutControl>