KB Article T926546
Visible to All Users

LayoutControl: Size of Controls - WinForms Cheat Sheet

Other DevExpress WinForms Cheat Sheets


Layout Manager (LayoutControl) displays controls with the help of layout items. It handles the size and position of layout items (controls) to prevent item overlapping and misalignment.

Layout Manager assigns size constraints to layout items (controls). You can manipulate controls' size constraints using the context menu, Control.MinimumSize, Control.MaximumSize, LayoutControlItem.SizeConstraintsType, LayoutControlItem.MinSize, and LayoutControlItem.MaxSize properties.

layoutcontrol-sizeconstraints-menu.png

Default size constraints allow the controls to occupy all the available space in the horizontal direction, while the height of many controls is fixed (for example, the default height of data editors is fixed and equals 20px).

The maximum width and height of many controls (for example, MemoEdit, GridControl, and TabControl) is not limited. These controls are easily resized horizontally and vertically whenever you resize the Layout Control.

Examples

Change the size of controls at design time

During resize operations (at design time and in customization mode at runtime), Layout Control highlights items that have reached their minimum/maximum size (thus, they cannot be resized any further).

When you focus a control at design time, Layout Manager displays special icons if the control's size constraints prohibit resize operations.

If an item is not resized, make sure that the item size is not locked due to Size Constraints.

Tip: You can add Empty Space Item (a resizable area) next to a layout item to allow the item to be resized and to align an item to a specific edge of its parent.

Hide scrollbars in LayoutControl

LayoutControl displays scrollbars when Size Constraints are applied to controls or layout items. So, make sure that:

  1. The Control.MinimumSize property isn't set.
  2. The LayoutControlItem.SizeConstraintsType property of corresponding items isn't set to Custom, and their LayoutControlItem.MinSize isn't specified either.
Limit the size of controls

You can specify custom minimum and/or maximum width and height for controls hosted within Layout Manager.

To restrict the minimum size of controls, set the Control.MinimumSize property.
To restrict the maximum size of controls, set the Control.MaximumSize property.

Set the width and/or height of the Control.MinimumSize/Control.MaximumSize property to 0 to remove constraints on the control's minimum/maximum width or height.

See the following help topic for more information: Size and Alignment.

Resize a group or a tabbed group

A group's size is specified by the size of its nested layout items. Size constraints applied to layout items can prevent the group from being resized. To allow the group to be resized, you can do either of the following:

  1. If the maximum width/height of controls is limited, remove these limits.
  2. Add Empty Space Item to the group.
Change the size of an item's caption

Use the LayoutControlItem.TextAlignMode property to enable one of the caption size options:

  1. AutoSize - The caption region is resized to the minimum width to display the entire text.
  2. CustomSize - Allows you to use the TextSize property to set a custom caption region size.
    Refer to the following help article for more information: Item Label.
Change the distance between a control and its caption
Autosize LayoutControl and its parent when a LayoutItem is shown or hidden

enable the AutoSize (LayoutControl.AutoSize, Form.AutoSize) option and set AutoSizeMode (LayoutControl.AutoSizeMode, Form.AutoSizeMode) to GrowAndShrink for both controls - LayoutControl and it's parent container (Form).

C#
public Form1() { InitializeComponent(); layoutControl1.AutoSizeMode = AutoSizeMode.GrowAndShrink; layoutControl1.AutoSize = true; AutoSize = true; AutoSizeMode = AutoSizeMode.GrowAndShrink; }
Do not increase the size of LayoutItem that hosts CheckEdit when CheckEdit.Text contains long text

When a CheckEdit control is added to Layout Control, a new layout item is created. For the layout item that hosts a CheckEdit control, the default size constraints are calculated based on the CheckEdit control's text size.

When you change the CheckEdit control's text, the control's size changes, and the layout item's LayoutControlItem.MinSize and LayoutControlItem.MaxSize properties are updated accordingly (these properties reflect the default size constraints).

To prevent the layout item with CheckEdit from changing its size, do the following:

  1. Add the CheckEdit control to LayoutControl.
  2. Remove size constrains for the Check Edit. For example, choose Free Sizing from the context menu.
    CheckEdit-Free Sizing
  3. Modify CheckEdit's text after you remove the control's size constraints.

Help us improve this article

Show previous comments (1)
DevExpress Support Team 4 years ago

    Hi,
    I ran some tests and all inserted images are displayed correctly on my side.
    Do I understand you correctly, that these images are not or cannot be displayed on your side?
    If so, would you please clarify what Internet browser you are using?
    Are the images displayed correctly in another browser?

      Hi!
      Having the same trouble - I can see five first images and cannot see the remaining three. Tested with chromium and firefox.
      Anyway - I've fixed my issue even without them :)

      Regards,
      Jakub

      DevExpress Support Team 3 years ago

        Hi Jakub,
        I am happy to hear that the problem has been resolved. Thank you for letting us know of your progress.
        Regarding images, I was able to reproduce the behavior when GIFs aren't displayed when browsing this page incognito. I informed our web masters about this.
        Please make sure that you are logged in to see all graphics.

        Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

        Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.