Geeks With Blogs
Glenn Taylor's Weblog Full time geek, part time blogger...

Well, I have finally gotten to move into .NET development and actually right into .NET 2.0. Of course I'm writing in C#.

The WinForms project I'm working on has caused me to look into the FlowLayoutPanel and TableLayoutPanel that were added in 2.0. Those are pretty cool controls. The TableLayoutPanel is pretty much like the table element in HTML. You drag a TableLayoutPanel onto your form or UserControl and then drag other controls into each cell. You have a lot of powerful options for hooking the controls to the table. Docking and anchoring come into play for easily building an automatically resizing UI with little or no code. Automatically resizing two adjacent textboxes becomes a piece of cake. You use a table and set the columns to 50%, dock the textboxes (or a panel containing the texbox and it's caption label) and you're done.

The FlowLayoutPanel workes almost exactly like the items on an HTML page. When you drop several items in this control, it automatically arranges them in either a vertical or horizontal list. As you resize the panel, it shuffles the contained controls to fit inside the panel. Let's say you put 10 buttons in there. If the panel is wide enough, all the buttons are side-by-side in a horizontal row. As you resize the panel smaller, the buttons are rearranged into two (or more) rows as needed to fit. The panel has a setting for doing this top-down, bottom-up, right-to-left, and left-to-right.

Both of these controls have a padding property that sets the distance from the edges of the control or cell to the contained control. They also honor the margin property settings of the contained control. If both are supplied, they are added together. The FlowLayoutPanel uses the margins to set the gap between adjacent controls. It makes it very easy to build resizable content.

Some tricks I've used so far:

I needed to display four values like SubTotal, Tax, Shipping and Discount. The requirement was that if any of the values were 0 to not display that line. They wanted it squeezed up so each item was next to the others with no gaps for the missing values. (Note, this wasn't a real dynamic thing, just different for each order displayed.) What I did was to build a TableLayoutPanel much like you would in HTML. I put labels in column 1 and textboxes in column 2. I set the column and row styles to AutoSize and right-aligned the labels. Then in my setup method of the UserControl that contained this I put code to set the .Visible of the label and textbox for a row to false when the value was zero. A couple of lines of code. That was it. It takes longer to tell about than to do it. I now have a display that shows the values very similarly to below and automagically expands and collapses as needed:

SubTotal: $10.99
Tax: $1.01

(note that the total showed elsewhere on the screen)

Then since the grid above it showed the order items I placed another TableLayoutPanel on the outer control with only one column and two rows. The grid went into row one and the TableLayoutPanel into row two. I docked each of those in their cells and set row two to AutoSize and row one to 100% (which seems to mean 100% of the remaining after the autosized rows are calculated.) Now when the control is displayed the SubTotal, etc. sizes itself as necessary and then the grid is adjusted to take the remaining area. With no code (other than the visible settings of the label and textbox) I have a nice clean looking display. Cool!

Posted on Saturday, January 21, 2006 2:53 PM Software development | Back to top

Comments on this post: FlowLayoutPanel and TableLayoutPanel - way cool!

# re: FlowLayoutPanel and TableLayoutPanel - way cool!
Requesting Gravatar...
Yeah, finally gtk# has nothing over winforms
Left by Woof on Apr 29, 2007 3:16 PM

# re: FlowLayoutPanel and TableLayoutPanel - way cool!
Requesting Gravatar...
Great article. Those panels are really cool! I'm fully agree with You.
Left by Derek on May 09, 2008 3:02 PM

# re: FlowLayoutPanel and TableLayoutPanel - way cool!
Requesting Gravatar...
"Of course I'm writing in C#." - why "of course"? No need to offend VB.NET. There's no real benefit to C# over VB.NET. All the "extra" features that are legends of C++ are not really used in 99.99% of enterprise applications. And with Microsoft's commitment to completely equalize features between the two languages in C# 4.0 / VB 10.0, it will be just a matter of style. I know both and find VB a lot easier to understand and also cleaner. In the end, both languages are equally cool.

Great post, by the way, I was just looking for a way to do something similar. Thanks!
Left by Alex on Mar 02, 2009 4:01 PM

# tableLayoutPanel grid orientation
Requesting Gravatar...
im trying to use the tableLayoutPanel in my application but am stuck.

the panel seem to work on a grid system the is (y,x) and not (x,y).

i.e. on a (col, row) system and not a (row, col) system.

is there any way i can change this coordinate system?

please advise.

Left by ikurtz on Oct 27, 2009 2:52 PM

Your comment:
 (will show your gravatar)

Copyright © Glenn Taylor | Powered by: