[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
   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]Windows and Utility Controls
   Dialogs, Notifications and Panels
  [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 and Dashboard Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Aligning Items within LayoutGroup and LayoutControl Objects

For a child control within a LayoutGroup or LayoutControl, you can specify the alignment within its parent: anchor the control to a parent's edge, center or stretch the control. To set the alignment, the HorizontalAlignment and VerticalAlignment properties of child controls are used.

The following XAML creates a LayoutGroup with three LayoutItems:

By default, LayoutItems are aligned to the top and stretched horizontally within a parent control. So, the code above produces the following result:

Whenever the group's width is modified, the width of the LayoutItems is changed accordingly:

The following sections illustrate the HorizontalAlignment property in action. The VerticalAlignment property works identically.

Expanded Align items

The image below shows the same LayoutGroup. For the first LayoutItem, the HorizontalAlignment property is set to Left. For the second and third LayoutItems, the HorizontalAlignment property is set to Right:

When items are anchored to their parent's edge, they shrink to their minimum size. If required, you can make the LayoutItems wider, changing their Width property, or changing the Width properties of their controls.

Expanded Center items

In the next image, for the second LayoutItem, the HorizontalAlignment property is set to Center. For the first and third LayoutItems, this property is set to Left and Right, respectively:

Expanded Stretch items

When an individual item is stretched, it occupies all the available empty space. If there are multiple items being stretched, the empty space is divided between them proportionally.

In the next image, the HorizontalAlignment property is set to Left, Stretch and Right for the three LayoutItems, respectively:

You'll get the same layout of items if the third item's alignment is set to Left. This item will be displayed after Item 2, since the items with the Stretch and Left alignment have the same visual order priority (items with the vertical alignment set to Top and Stretch also have the same visual order priority).

Expanded Visual order

When modifying the alignment of items, the visual order of the items may change. For instance, if you set an item's HorizontalAlignment to Right, this item will be displayed after the items that have this property set to Left, Center or Stretch, even if this item is defined before them in XAML. The following image illustrates this feature, where the HorizontalAlignment property is set to Right, Stretch and Right for the three LayoutItems, respectively. Although Item 1 is defined first in XAML, it's displayed after Item 2:

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