Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Collapse]WPF Controls
  Prerequisites
 [Expand]What's Installed
 [Expand]Common Concepts
 [Expand]MVVM Framework
 [Collapse]Controls and Libraries
  [Expand]Windows and Utility Controls
   Dialogs, Notifications and Panels
   Reporting
  [Expand]Data Grid
  [Expand]Ribbon, Bars and Menu
  [Expand]Charts Suite
  [Expand]Pivot Grid
  [Expand]Scheduler
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Tree List
  [Expand]Gauge Controls
  [Expand]Map Control
  [Collapse]Layout Management
   [Expand]Dock Windows
   [Collapse]Tile and Layout
    [Collapse]Layout and Data Layout Controls
      Layout Control
      Data Layout Control
      Layout Items and Groups
      Aligning contents of LayoutItems
      Aligning Items within LayoutGroup and LayoutControl Objects
      Customization Mode
      Available Items List
     Tile Layout Control
     Dock Layout Control
     Flow Layout Control
    [Expand]Common Features
    [Expand]Examples
   [Expand]Tab Control
   [Expand]Carousel
    Book Control
    Workspace Manager
  [Expand]Windows Modern UI
  [Expand]Printing-Exporting
  [Expand]Data Editors
  [Expand]Navigation Controls
  [Expand]Spell Checker
  [Expand]Property Grid
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Expand]Diagram Control
  [Expand]Scheduler (legacy)
 [Expand]Scaffolding Wizard
 [Expand]Localization
  Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Layout Items and Groups

Layout items and groups are base elements for both Layout Control and Data Layout Control.

Expanded Layout Items

A LayoutItem (DataLayoutItem) object is a control that provides label and content regions. The control region can display any UIElement object.

You can use LayoutItems within a LayoutControl to display a label next to a control. For Data Layout Control, use DataLayoutItem instead.

The LayoutControl supports automatic alignment for its child LayoutItem objects. The left edges of item content regions are automatically aligned within groups, and even across multiple groups. See Aligning contents of LayoutItems to learn more.

To provide a label for a LayoutItem, use the LayoutItem.Label property. The LayoutItem.LabelTemplate allows you to specify a DataTemplate used to render the label. The label's style can be customized via the LayoutItem.LabelStyle property.

You can display the label at the top of the item's content region. To change the position, see the LayoutItem.LabelPosition property.

A layout item's content can be specified via the LayoutItem.Content property. To specify item content in XAML, define the required object between the LayoutItem start and end tags.

Expanded See Also

Expanded Layout Groups

A LayoutGroup is a container that arranges its items (LayoutItem and DataLayoutItem objects or other layout groups) in the specific manner. The LayoutGroup cannot be used outside a LayoutControl or DataLayoutControl.

The LayoutGroup.View property specifies how the group's items are displayed - side-by-side or as tabs.

If the property is set to LayoutGroupView.Group or LayoutGroupView.GroupBox, the group's items are arranged in a single row or column, according to the LayoutGroup.Orientation property. The alignment of an item within a group can be adjusted via the item's HorizontalAlignment and VerticalAlignment properties.

In default display mode (LayoutGroupView.Group), a group doesn't display its header. To enable the header, set the LayoutGroup.View property to LayoutGroupView.GroupBox. To specify the object to display in the group's header use the LayoutGroup.Header property.

A LayoutGroup supports the collapsing feature in the LayoutGroupView.GroupBox paint style. You can enable the collapsing feature by setting the LayoutGroup.IsCollapsible property. In this mode, the group displays the collapse/expand button, allowing an end-user to collapse/restore the group's contents. To specify the expansion state in code, see LayoutGroup.IsCollapsed.

The following code creates a LayoutGroup with two items. The collapsing feature is enabled via the LayoutGroup.IsCollapsible option:

The result is shown below:

To enable the tabbed UI for a LayoutGroup, set LayoutGroup.View to LayoutGroupView.Tabs. Each child will be represented as a tab. If another LayoutGroup object is a child of a tabbed group, the corresponding tab header displays the LayoutGroup's LayoutGroup.Header object. For other layout items, you can specify tab headers via the LayoutControl.TabHeader attached property.

The following code creates a tabbed LayoutGroup:

The result is shown below:

The most common scenario for using a LayoutGroup is in a LayoutControl. Using LayoutGroups, you can build compound layouts, as demonstrated in the Layout Control topic.

Expanded See Also

Is this topic helpful?​​​​​​​