AutoSizing

Allow controls to adjust their size to fit their content.

Many Wisej controls expose the AutoSize property, and when the control is also a container (i.e.: Panel, FlowLayoutPanel, TableLayoutPanel, FlexLayoutPanel, UserControl, GroupBox, Form, etc) it also has the AutoSizeMode property.

The auto-sizing of the control is performed on the server using the content of the control, the current font, and the value of the layout properties Dock and Anchor.

Complex layouts, when a container auto-sizes based on its children and the children are either docked or anchored to the same container, may cause a circular layout arrangement. Wisej is able to handle most of these cases, but it may cause problems or complex reflows under certain circumstances.

Labels

Labels are always created in the designer with AutoSize = true, but when you create a label by code, the AutoSize default value is false.

When AutoSize is true, the designer will not show the grab handles used to resize the control. When you change the content, the padding, or the font, the size of the label will grow to fit the text.

Autosizing is not supported when AllowHtml is true since it's not possible to accurately measure HTML text on the server. See HTML Autosizing.

When the label is anchored or docked to the parent, the auto-sizing system grows the label horizontally and then vertically when the anchoring or docking limits the horizontal size.

AutoSize labels anchored left and right in a Panel.

Buttons

Buttons are always created in the designer with AutoSize = true, but when you create a button by code, the AutoSize default value is false.

The auto-sizing rules are the same used by the Label control. However, the Button control also implements the AutoSizeMode property (like a container). By default, the AutoSizeMode property is set to GrowOnly, which means that the button will grow to fit the content but will not shrink smaller than the initial size. When AutoSizeMode is set to GrowAndShrink, the button will shrink to the minimum size necessary to fit the content.

Editors

All editor and list controls expose the AutoSize property. However, only the editors (TextBox, DateTimePicker, ComboBox, etc) are created in the designer with the AutoSize property initialized to true. When you create these controls by code, the AutoSize property is always initialized to false.

Additionally, the height of the editors is set in the theme. Wisej will use the height in the theme as the minimum height when calculating the auto-sizing dimensions.

DateTimePicker and ComboBox with and without AutoSizing.

Containers

Auto-sized containers behave differently from auto-sized labels, buttons, and editors because they calculate their preferred size by fitting all their children, which in turn may also have the AutoSize property set to true, and may be docked or anchored to their container, in a multi-level layout.

Containers expose the AutoSizeMode property to control whether the container can shrink below its original size. By default, the AutoSizeMode property is set to GrowOnly, which means that the container will grow to fit the content but will not shrink smaller than the initial size. When AutoSizeMode is set to GrowAndShrink the container will shrink to the minimum size necessary to fit the content.

A container in the designer may shrink to a size of 0,0 when using AutoSize=true and AutoSizeMode=GrowAndShrink. In this case, you can select the container using the document outline, or by dragging the pointer around it to "catch" the control.

Panel with AutoSizeMode=GrowAndShrink

You can mix AutoSize, MaximumSize, and AutoScroll to allow a container to grow to fit its content until it reaches the maximum size and then to show the scrollbars.

Maximum and Minimum Size

All Wisej controls expose the MaximumSize and MinimumSize properties. They control the maximum and minimum size of a control, regardless of the control's Dock or Anchor or AutoSize values. The minimum and maximum sizes are always enforced.

You can specify only the width or only the height in either the MaximumSize or MinimumSize properties. Leaving the height or width set to 0 indicates that it should be ignored.

⚠️HTML Autosizing

Wisej cannot properly auto-size a control when the AllowHtml property is set to true. It is impossible to measure HTML content on the server. However, you can use the Wisej.Base.TextUtils class to request a correct measurement from the browser:

C#

TextUtils.MeasureText("<big>H</big>ello!", allowHtml: true, this.Font, (size) =>
{
	this.button1.Size = size;
});

VB.NET

TextUtils.MeasureText("<big>H</big>ello!", True, Me.Font,
					  Sub(size As Size)
						  Me.button1.Size = size
					  End Sub)

The alternative asynchronous version, without the callback method, is:

C#

this.button1.Size = 
await TextUtils.MeasureTextAsync("<big>H</big>ello!", allowHtml: true, this.Font);

VB.NET

Me.Button1.Size =
  Await TextUtils.MeasureTextAsync("<big>H</big>ello!", True, Me.Font)

Advanced

The auto-sizing system (when the AutoSize property is true) asks each auto-size control to calculate its preferred size and uses that size to calculate the auto-size.

To implement your own modified auto-sizing calculation, simply override the GetPreferredSize(proposedSize) method and return a new Size. In the override, you may also calculate your own proposed size and then pass it to the base implementation of GetPreferredSize().