Aligning Controls Within Layout Items
- 2 minutes to read
A control can be custom aligned within a layout item if its size is less than the layout item’s client area size. The following sections describe the approaches to custom align controls.
Horizontally Align the Controls that Support the Auto-Size Feature in the Layout Control
The following controls provide properties that enable auto-size mode when they are hosted within a LayoutControl. In auto-size mode, a control’s width is automatically changed to fit its contents.
- RadioGroup, CheckEdit, LabelControl, StandaloneBarDockControl, OfficeNavigationBar, WindowsUIButtonPanel - Provide the AutoSizeInLayoutControl property.
- SimpleButton - Provides the AutoWidthInLayoutControl property.
In auto-size mode, you can custom align a control horizontally within the layout item, as follows:
- Set the control’s AutoSizeInLayoutControl/AutoWidthInLayoutControl property to true.
- Set the LayoutControlItem.SizeConstraintsType property to SizeConstraintsType.SupportHorzAlignment.
- Set the required alignment via the LayoutControlItem.ContentHorzAlignment property.
Demo
Content alignment of auto-sized CheckEdit and RadioGroup
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.
using DevExpress.XtraLayout;
checkEdit1.AutoSizeInLayoutControl = true;
layoutControlItem2.SizeConstraintsType = SizeConstraintsType.SupportHorzAlignment;
layoutControlItem2.ContentHorzAlignment = DevExpress.Utils.HorzAlignment.Center;
Align Any Control
By default, a layout item’s control fills the layout item’s client area in its entirety. To custom align a control, enlarge the client area while restricting the control’s size. Do the following:
- Enable custom constraints mode, by setting the LayoutControlItem.SizeConstraintsType to SizeConstraintsType.Custom.
Remove size constraints or specify a large maximum size for a layout item with the LayoutControlItem.MaxSize property.
Tip
Set the Width/Height attribute to 0 to remove limits on the item’s maximum width/height.
Limit the control’s maximum width/height with its Control.MaximumSize.Width/Height property.
- Use the LayoutControlItem.ContentHorzAlignment and LayoutControlItem.ContentVertAlignment properties to align the control within the client area.
Example
The following code shows how to align a ButtonEdit control horizontally and vertically within a layout item:
using DevExpress.XtraLayout;
// Center the control horizontally and vertically.
// Center the control horizontally and vertically.
layoutControlItem1.SizeConstraintsType = SizeConstraintsType.Custom;
layoutControlItem1.MinSize = new Size(100, 50);
layoutControlItem1.MaxSize = new Size(0, 0);
layoutControlItem1.Control.MaximumSize = new Size(200, 20);
layoutControlItem1.Control.MinimumSize = new Size(20, 20);
layoutControlItem1.ContentVertAlignment = DevExpress.Utils.VertAlignment.Center;
layoutControlItem1.ContentHorzAlignment = DevExpress.Utils.HorzAlignment.Center;