[Expand]General Information
[Collapse]WinForms Controls
  .NET Core Support
 [Expand]What's Installed
 [Expand]Build an Application
 [Collapse]Controls and Libraries
  [Expand]Forms and User Controls
  [Expand]Messages, Notifications, and Dialogs
  [Expand]Editors and Simple Controls
  [Expand]Ribbon, Bars and Menu
  [Expand]Application UI Manager
  [Expand]Docking Library
  [Expand]Data Grid
  [Expand]Vertical Grid
  [Expand]Property Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Chart Control
  [Expand]Map Control
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Collapse]Form Layout Managers
    Side Panel
   [Collapse]Layout and Data Layout Controls
    [Expand]Product Information
    [Expand]Getting Started
    [Expand]Layout Control
    [Expand]Data Layout Control
    [Expand]Layout Items
    [Expand]Layout Groups
    [Expand]Tabbed Groups
    [Expand]Other Layout Elements
    [Expand]Design-Time and Runtime Customization
    [Collapse]Size and Alignment
      Size Constraints
      Default Size Constraints
      Custom Size Constraints
      Layout Item's Size Constraints vs. Client Area's Size Constraints
      Locking the Size of Layout Items (animation)
      Aligning Controls Within Layout Items
      Layout Support For Third Party Controls
     Flow Layout
     Table Layout
     Focus Management
    [Expand]Appearance and Look and Feel
    [Expand]Member Tables
   [Expand]Tabbed MDI Manager
    Tab Control
   [Expand]Wizard Control
    Workspace Manager
  [Expand]Navigation Controls
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Expand]Sunburst Control
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[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)

Aligning Controls Within Layout Items

A control can be custom aligned within a layout item if its size is less than the size of the layout item's client area. The following sections describe the approaches to custom align controls.

Expanded Horizontally Aligning the Controls that Support the Auto-Sizing Feature in the Layout Control

Specific controls provide properties that enable the auto-size feature for these controls when they are added to a LayoutControl. When this feature is enabled, the control's width is changed to fit its contents. The properties are:

In auto-size mode, you can custom align the control horizontally within the layout item. This can be accomplished as follows:

  1. Set the control's AutoSizeInLayoutControl/AutoWidthInLayoutControl property to true.
  2. Set the LayoutControlItem.SizeConstraintsType property to SizeConstraintsType.SupportHorzAlignment.
  3. Set the required alignment via the LayoutControlItem.ControlAlignment property.

Expanded Example

The following code shows how to enable the auto-size feature for a CheckEdit within a LayoutControl, and center the CheckEdit within the corresponding layout item.

The auto-size feature is enabled for the CheckEdit control using its BaseCheckEdit.AutoSizeInLayoutControl property. In this mode, the control's size shrinks to fit its content. This allows the control to be custom aligned within the layout item, using the LayoutControlItem.SizeConstraintsType and LayoutControlItem.ControlAlignment properties.

The image below shows the design-time result of the customization. The layout item in which the checkEdit1 control resides is highlighted in blue. The bounds of the checkEdit1 control are indicated by the rectangle at the center of the layout item:

Expanded Aligning Any Control

By default, a layout item's control fills the layout item's client area in its entirety. To custom align a control, you need to make the client area's size larger than the control's size. This is possible in custom size constraints mode.

To custom align a control within a layout item, do the following:

  1. Enable custom constraints mode, by setting the LayoutControlItem.SizeConstraintsType to SizeConstraintsType.Custom.
  2. Remove constraints on the client area's size via the LayoutControlItem.ControlMaxSize property. To remove limits on the width/height, ensure that the Width/Height attribute is set to 0. Or, you can limit the maximum width/height of the client area by setting the corresponding attribute to a specific value.
  3. Set the LayoutControlItem.FillControlToClientArea property to false.
  4. Limit the maximum width/height of the control via its Control.MaximumSize.Width/Height property, so that this width/height is less than the client area's actual width/height.

    Note that setting the Width or Height attribute to 0 removes limits on the control's width/height. So, typically, you need to ensure that these attributes are set to positive values, not 0.

  5. Set the layout item's LayoutControlItem.ControlAlignment property to the required alignment.

Expanded Example

The following code shows how to align a ButtonEdit control horizontally and vertically within a layout item:

Expanded See Also

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