[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
 [Expand]What's Installed
 [Expand].NET Core 3 Support
 [Expand]Common Concepts
 [Expand]MVVM Framework
 [Collapse]Controls and Libraries
  [Expand]Data Grid
  [Expand]Ribbon, Bars and Menu
  [Expand]Charts Suite
  [Expand]Pivot Grid
  [Expand]Rich Text Editor
  [Expand]Tree List
  [Expand]Gauge Controls
  [Expand]Map Control
  [Collapse]Layout Management
   [Expand]Dock Windows
   [Collapse]Tile and Layout
    [Expand]Layout and Data Layout Controls
     Tile Layout Control
     Dock Layout Control
     Flow Layout Control
    [Expand]Common Features
      How to: Build Non-Linear Layout via LayoutControl
      How to: Customize style of LayoutGroup's header
      How to: Change styles of labels for individual or all layout items
      How to: Specify DataTemplate used to render labels of LayoutItems
      How to: Save and restore layout of items in LayoutControl
      How to: Build a compound layout
      How to: Create a Tile Layout Control
      How to: Display items in FlowLayoutControl and enable maximization feature
      How to: Enable horizontal and vertical item sizing within DockLayoutControl
      How to: Use DockLayoutControl
   [Expand]Tab Control
    Book Control
    Workspace Manager
  [Expand]Windows Modern UI
  [Expand]Data Editors
  [Expand]Navigation Controls
  [Expand]Spell Checker
  [Expand]Property Grid
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Expand]Gantt Control
  [Expand]Diagram Control
  [Expand]Windows and Utility Controls
   Dialogs, Notifications and Panels
  [Expand]Scheduler (legacy)
 [Expand]Scaffolding Wizard
  Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Report and Dashboard Server
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

How to: Build Non-Linear Layout via LayoutControl

This example shows how to arrange items within a LayoutControl, forming a non-linear layout. To create a layout, items (see LayoutItem) are combined into groups (see LayoutGroup) and the groups are combined into other groups.

The example demonstrates different group visual styles. Group 1 is rendered using the GroupBox visual style (the View (see LayoutGroup.View) property is set to GroupBox), which allows a header to be displayed. There is also a group that represents items as tabs (its View property is set to Tabs). Other groups are painted without a header and borders.

For Group 1, the collapsing feature is enabled via the LayoutGroup.IsCollapsible property, allowing an end user to collapse the group's contents.

For the tabbed group and the group that displays Item 2 and Item 3, horizontal sizing is enabled via the LayoutControl.AllowHorizontalSizing attached property. Vertical sizing is enabled for Item 4 via the LayoutControl.AllowVerticalSizing attached property.

For the items 1, 2, 3, 4, and 6, the VerticalAlignment property is set to Stretch. These items are stretched when the LayoutControl's height is changed. For Item 9 and Item 11, the HorizontalAlignment property is set to Left and Right, respectively. These items have a fixed width and are not stretched when the LayoutControl's width is changed.

The following image shows the result:

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