How do I get text to wrap in Windows Forms 2.0?
The fundamental problem in 1.1
When label is set to AutoSize = true, it measures as if all the text wants to be on one line. In order to have multiple lines of text in 1.1, the AutoSize property cannot be used.
Guessing in 1.1
When you drop a label on a form in version 1.0/1.1 it is set to AutoSize = false. The label can be resized to force the text onto the next line based upon the width of the control. However, guessing the right height for the label can be problematic – if it is not created tall enough, the text will cut off at the bottom. If it’s too tall there will be embarrassing gaps of whitespace in the dialog. To solve this, folks typically used Graphics.MeasureString() with the width the label was currently set to, then used the resultant height to set the size of the label.
There’s all kinds of problems with the latter approach – it doesn’t take into account several extra spacing/non-client borders of the control, it’s not good for performance (if you’re using Control.CreateGraphics() can force the label’s handle to be created before it normally would, etc). …and finally if you upgrade in 2.0 to UseCompatibleTextRendering = false, the calculations will be wrong.
APIs to avoid Guessing in 2.0
The Label control now has a GetPreferredSize() method which takes wrapping constraints. This method will take out all the headaches of guessing by taking into account all the details you might not know about, e.g. non-client borders/padding and the technology used to draw text.
Having your cake and eating it too: Strategies for Automatic Word Wrap in 2.0
It was difficult to get this right in previous versions of Windows Forms, as there was no concept of constraining size. Updating label to support multiline constraints was a delicate balancing act as we did not want to break folks using 1.1. (A 1.1 app should *just work* running on 2.0). If using the regular layout stuff (i.e. not flow and table layout panels) the label should continue to work as before.
The easiest way of supporting multiline text just using “dock and anchor” layout engine was to honor a new property called MaximumSize. This gives the Label a constraining width by suggesting that the maximum width you can be is “xxxx”. When a label is AutoSize = true, it takes into account its MaximumSize when calculating its PreferredSize.
The pitfall to using MaximumSize is that the size of the label is now fixed: if you want the label to increase in width as the dialog increases, you need to write code to increase the MaximumSize. While this is not difficult, it would be better if we could write less code.
One possibility for fixing the Label’s MaximumSize quandary is to place the label in a FlowLayoutPanel. When a FlowLayoutPanel is anchored left|right, it has a constraining width, which it passes onto the label. Setting the FlowLayoutPanel to AutoSize = true, the FlowLayoutPanel will grow in height as the label grows. (The label actually had a constraining width as well when anchored, but for compatibility reasons chose to ignore it.) Because the label is in a new layout container, it is free to honor the wrapping constraints without the possibility of breaking anyone. As the dialog is resized, the FlowLayoutPanel is resized, which in-turn passes a new constraint to the label.
Now that we have the label dynamically changing height with respect to the width of the dialog, we have another problem to solve. If there is another control directly underneath the label, the label can obscure the control directly underneath it. We need to find a way to push the other controls down when the label grows in height.
We could add the control below it to the FlowLayoutPanel we’ve just added, but if we want finer control of the sizing relationship, the situation calls for a TableLayoutPanel. Controlling sizing behavior in TableLayoutPanel means controlling the ColumnStyles and RowStyles. There are three kinds of ColumnStyles and RowStyles in the TableLayoutPanel: Percentage, Absolute and AutoSize.
Briefly: When the TableLayoutPanel control arranges its columns, it assigns priorities to each ColumnStyle in the following order:
1. Columns with ColumnStyle set to Absolute are considered first, and their fixed widths are allocated.
2. Columns with ColumnStyle set to AutoSize are sized to their contents.
3. Remaining space is divided among columns with ColumnStyle set to Percent.
By placing a label within a column that has specific a sizing behavior, the label will wrap. When the label wraps, controls in rows below it will be pushed down if the RowStyle is set to AutoSize.
Here’s a quick table of the behavior of labels within a TableLayoutPanel (TLP) and why they behave that way.
TLP AutoSize |
TLP ColumnStyle |
Will Label Wrap? |
Why? |
True and False |
Absolute |
Yes |
Known constraints Since the column is absolute, we have a known dimension to pass to the label as a wrapping distance. |
True and False |
AutoSize |
No |
Unknown constraints Setting the column to AutoSize implies that we don’t understand currently what the size of the column should be. Therefore all AutoSize = true controls are asked, “given infinite space, what size would you prefer to be?” |
False |
Percentage |
Yes |
Known constraints Since the table is AutoSize = false, we understand that the % style column is a percentage of the remaining space in the table. Therefore we have a known dimension to pass to the label as a wrapping distance. |
True |
Percentage |
No |
Unknown constraints Since the table is AutoSize = true, we don’t understand what % should mean, as in an AutoSize = true table, there should be no free space. In this case, the TLP reverse-engineers what the size of the column should be based on the infinite preferred size of the contents. E.g. if a control is 50% and it says it wants to be 100px, the other 50% column should be 100px big. |
In summary:
Use label.MaximumSize if:
If you have no controls beneath your label AND your label width will remain fixed.
Use label in an anchored, autosized FlowLayoutPanel if:
If you have no controls beneath your label AND your label width will grow as a function of the dialog width.
Use label in a TableLayoutPanel if:
You have controls beneath your label that need to be moved as a function of label text length. You will have to play with the right balance of ColumnStyles and whether or not it is necessary to actually AutoSize the TableLayoutPanel itself.
As a last resort:
If you still cant figure it out, set label.AutoSize = false, and set the label.Size = label.GetPreferredSize( … ) with custom text wrapping constraints.
Updates:
Labels set to FlatStyle.System never word wrap when AutoSize is set to true. Some folks use FlatStyle.System to scoot the text over to line up with the edge of the panel. You can change your Label.Margin.Left = 0 so it will line up with other controls with a Margin.Left = 3.
If you want Wrapping RadioButtons and CheckBoxes read here.