LogoLogo
HomeNewsSupportVideos
  • Introduction
  • Getting Started
  • What's new in 4.0
    • Known Issues
    • .NET Core Designer
    • Managed Graphics
    • Fluent Markup
    • Markdown Support
    • Upgrade from 3.x
  • Releases
    • What's new in 4.0
    • What's new in 3.5
    • What's new in 3.2
      • View Builder
      • Validation Rules
      • Enhanced Font Support
      • Design-Time Debug
    • What's new in 3.1
    • What's new in 3.0
      • FAQs
      • Update Existing Projects
      • Multi Targeting
      • Visual Studio Designer
      • Referencing Assemblies
      • Docker Support
      • Troubleshooting
      • Deployment
    • What's new in 2.5
    • What's new in 2.2
    • What's new in 2.1
    • What's new in 2.0
    • Upgrade from 1.x
  • Getting Started
    • New Project
    • Templates
    • Troubleshooting
    • License Activation
    • FAQ
    • API
    • Hybrid
    • Deployment
    • Theme Builder
  • Concepts
    • Startup
    • Configuration
    • Load Balancing
    • Designer
    • Layouts
    • Client Profiles
    • Tab Order
    • Compression
    • Embedded Resources
    • Modal Workflow
    • Localization
    • RightToLeft
    • Background Tasks
    • Real Time Web Applications
    • JavaScript
    • JavaScript Object Model
    • Security
    • Synchronization
    • Session Management
    • Theming
    • Dependency Injection
    • Application Switches
    • Visual Studio Code
  • Controls & Components
    • General
      • Application
      • AutoSizing
      • AutoScroll
      • AutoScaling
      • Accessibility
      • Colors & Fonts
      • Embedded Tools
      • Events
      • Touch Events
      • Images
      • Labels
      • ToolTips
      • Data Binding
      • Common Properties
      • Custom Painting
      • Move & Resize
      • Drag & Drop
      • Validation
      • User Data
      • Responsive Properties
      • VB.NET Extensions
    • Common Dialogs
      • FolderBrowserDialog
      • ColorDialog
      • OpenFileDialog
      • SaveFileDialog
    • Editors
      • TextBox
        • TagTextBox
        • MaskedTextBox
        • TypedTextBox
      • DateTimePicker
      • MonthCalendar
      • TimeUpDown
      • DomainUpDown
      • NumericUpDown
      • TrackBar
    • Buttons
      • Button
      • SplitButton
      • CheckBox
      • RadioButton
    • Containers
      • Page
      • Form
      • Desktop
      • Panel
      • FlexLayoutPanel
      • FlowLayoutPanel
      • TableLayoutPanel
      • GroupBox
      • Accordion
      • TabControl
      • UserPopup
      • UserControl
      • ToolBar
      • StatusBar
      • SplitContainer
      • SlideBar
    • Lists & Grids
      • ComboBox
        • UserComboBox
        • TreeViewComboBox
        • ListViewComboBox
      • ListBox
        • CheckedListBox
      • TreeView
      • ListView
      • DataGridView
        • Column
        • TextBoxColumn
        • ButtonColumn
        • LinkColumn
        • ImageColumn
        • MaskedTextBoxColumn
        • DateTimePickerColumn
        • NumericUpDownColumn
        • CheckBoxColumn
        • ComboBoxColumn
      • DataRepeater
      • PropertyGrid
    • Extenders
      • Animation
      • ToolTip
      • ErrorProvider
      • Rotation
      • StyleSheet
      • JavaScript
    • Media
      • Audio
      • Video
      • FlashPlayer
    • Content
      • Label
      • LinkLabel
      • PictureBox
      • ScrollBars
      • Upload
      • AspNetPanel
      • ImageList
      • PdfViewer
      • ProgressBar
      • Spacer
      • Widget
      • WebBrowser
      • IFramePanel
      • HtmlPanel
      • Canvas
      • Shape
      • Line
    • Menus
      • MainMenu
      • MenuBar
      • MenuItem
      • LinkMenuItem
      • ContextMenu
    • Notifications
      • AlertBox
      • MessageBox
      • Toast
    • Other Components
      • Timer
      • BindingSource
      • BindingNavigator
      • DataSet
      • EventLog
      • MessageQueue
      • PerformanceCounter
Powered by GitBook
On this page
  • Labels
  • Buttons
  • Editors
  • Containers
  • Maximum and Minimum Size
  • HTML Autosizing
  • Advanced

Was this helpful?

Export as PDF
  1. Controls & Components
  2. General

AutoSizing

Allow controls to adjust their size to fit their content.

PreviousApplicationNextAutoScroll

Last updated 4 months ago

Was this helpful?

Many Wisej.NET controls expose the AutoSize property, and when the control is also a (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.NET 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.

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.

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.

Editors

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

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.

Maximum and Minimum Size

All Wisej.NET 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.

Wisej.NET 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:

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

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

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

The auto-sizing rules are the same used by the 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.

All and 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.

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

HTML Autosizing

⚠️
editor
list controls
AutoScroll
HTML Autosizing
Label
container
AutoSize labels anchored left and right in a Panel.
DateTimePicker and ComboBox with and without AutoSizing.
Panel with AutoSizeMode=GrowAndShrink