Vb.net: FormsLayout: Step04: TableLayoutPanelOverview

Here is the final installment of this series unless I get more rambunctious.
FormsLayout:Step04:TableLayoutPanelOverview
The TableLayoutPanel is a very flexable Control in the ToolBox. It 
allows you to specify a table consisting of rows and columns. You 
can then either drop individual controls into a cell of the table 
from the Forms Designer using the View Menu and ToolBox or add 
individual controls programatically in your vb code. 
You can manipulate just about everything about this control from 
the number and size of rows and columns to automatic expansion, 
scrolling and a host of other factors such as cell margins and 
padding. Perhaps I will continue researching this control to see 
it's real power if it will work with Windoweyes. For now here is a 
quick overview of how to put a TableLayoutPanel on a form and add 
some controls to it. Everything is set up in a static fashion to 
make things easier at first and to ensure minimal problems when 
working with a Screen Reader like Windoweyes or JAWS. 
Example Addition to our FormsLayout Project:
On Form1.vb I want to be able to enter a Stock Ticker Symbol, 
click a button and see the Price and Trading Volume for that 
stock.
To Do this I need:
lblTicker, tbTicker
lblPrice, tbPrice
lblVolume, tbVolume
btnGetQuote
Now, instead of calculating all the start and end positions for 
all these controls I will just put them into a TableLayoutPanel 
and let the TableLayoutPanel format the positioning. 
Drop a TableLayoutPanel on the form:
A Dialog Box of sorts will come up where you might add columns and 
rows. I just hit escape to close it and return to the Forms 
Designer.
Right mouse click the TableLayoutPanel and opened the Properties 
Window for the control:
Set the following Properties:
Name: tlpStockQuote
ColumnCount: 2
RowCount 4
Location: 100, 400
Size: 800, 125 Just leave default for height as MS calculates it 
based on rowcount and font size. TabIndex: 4.  TabStop: False. 
BackColor: white
ForeColor: black I might play with the colors later but for now I 
want to see a big white box in the middle of the bottom of the 
form where I can drop my detail controls and have them formatted 
by the tlpStockQuotes control.
I have the length set to 800 leaving 100 pixels on the left and 
right of the tlpStockQuotes TableLayoutPanel and it is pretty much 
centered vertically as well if I just look at it when I hit 
Ctrl+f5. So it is positioned fine and it's size would seem to be 
consistent with the rest of the form since MS set the Vertical 
Height based on the Form Font Size of 12 and we specified 4 rows 
in the properties window for this container control. 
I will modify the size and position of the tlpStockQuotes control 
later if I want to make it a better fit to the content of the 
controls we will embed in it. A Ticker Symbol is likely less than 
10 characters, same with price and volume and the titles we will 
use in the label controls or text for the button will not be more 
than 100 pixels so a length of 800 pixels will be overkill. We 
will mess with all that later. For now let's just put our controls 
in the TableLayoutPanel to see it at work.
So, Open the forms designer and bring up the properties window for 
tlpStockQuotes.
Arrow down the properties to Columns (Collection), tab past 
theEditBox to the Browse elipsis or button and click it.A sort of 
Dialog Window comes up for the 2 columns you specified in the 
Column Count property.   It is called the Column Style Dialog. Tab 
around this window. 
There is a ComboBox where you can select the content of this 
cview. Just leave it set to column for now. 
Next is the description of the column. Mine says Column 1SizeType 
Percent Value 50.00 %
Tabbing we hear the add delete and Insert buttons
Next we here a radio button and percent is checked. 
Arrowing back and forth There are 3 choices, percent, absolute and 
AutoSize. I will set it to Absolute, tab to the value box which 
now says 20 and set my cell length to 150. This will allow a 
textbox or button of 100 and 50 pixels blank space between 
controls horizontally.. 
Next tab reads the Spanning option which I will ignore for now. 
Next are the ok and cancel buttons but I will not do them yet.
I tab past the ComBo Box to the  list view and arrow down to 
column 2.Again it's style is percent so I tab to the radio button, 
select absolute and set it's size value to 150 as we did 
above.Then I tab to OK and hit enter and am returned to the 
Properties window for the tlpStockQuote Control.   
Arrow Down to the Rows (Collection) property, tab twice to the 
browse dialog elipse and hit enter. A window very similar to the 
Column Style Window comes up. Arrow to the Rows ListBox and for 
all 4 rows set  the size to AutoSize. After you have done that 
tab to the OK Button and hit enter.
The TableLayoutPanel will  automatically space the 4 rows and put 
any controls we drop into it in a cell and align them vertically.
Dropping controls into the table.
Here are all the controls and the Property Settings. Drop each new 
control on top of the previous control and it will be added to the 
tlpStockQuote in the next cell. 
Return to the Forms Designer and tab to the tlpStockQuote control.
Drop a Label Control on the tlpStockQuote control, right mouse 
click the label control to bring up the Properties Window:
Set The Following:
Name: lblTicker
BackColor: White
Cell 0, 0 - Cell 0, Row 0
ForeColor: Black
Location: Mine says 3, 0, leave alone. 
Arrow down to the Text Property and enter the word Ticker and 
arrow back up to the size property to see how MS changed it. 
MS changed it to 51, 20 in my case which is fine since my cell 
length is 150. 
Hit ctrl+f4 to return to the Forms Designer.
Drop a TextBox Control on top of the lblTicker Control and it is 
added to the next cell in tlpStockQuote.
Set the TextBox Properties:
Name: tbTicker
BackColor: Black
Cell: 1, 0 - cell 1, row 0
ForeColor: white 
Location: 153, 3
Size: 100, 26 Leave default height.
Ctrl+f4 to return to Forms Designer.
Drop another label control on the tbTicker Control to add to next 
cell.
set:
Name: lblPrice
BackColor: White
Cell 0, 1
ForeColor: Black
Location: 3, 32
I arrow down to text property and enter price arrow up to size and 
see 44, 20
TabIndex: 2
Ctrl+f4 to return to Designer.
Drop a TextBox on the lblPrice control to add to next cell.
Name: tbPrice
BackColor: Black
Cell: 1, 1
ForeColor: White
Location: 153, 35
Size 100, 26
TabIndex 3
TabStop true
Ctrl+F4 to return to Designer:
Drop a Label Control On tbPrice.
Set:
Name: lblVolume
BackColor: White
Cell: 0,2
 ForeColor: Black
Location: 3, 64
Text: Volume
Size: 63, 20
TabIndex: 4
Ctr+F4 to return to Designer.
Drop a TextBox on lblVolume.
Set:
Name tbVolume
BackColor: Black
Cell: 1,2
ForeColor: white
Location: 153, 67
Size: 100, 26
TabIndex: 5
TabStop: True
Ctrl+F4 to Return to Designer.
Drop a Button on the tbVolum Control:
Set:
Name: btnGetQuote
Text: GetQuote
BackColor: Gray
Cell: 0, 3
ForeColor:  Navy
Location: 3, 99
Size: 75, 23
TabIndex: 6
TabStop: TrueYou can see how MS allocates the Location of each 
control relative to the TableLayoutPanel and not the Form1.vb 
controls. Even the TabIndex is set relative to the 
TableLayoutPanel because we want to access things inside this 
control relative to each other regardless of how the rest of the 
Form might change over time. Only the properties of the 
TableLayoutPanel itself are relative to the Form1.vb so you could 
move the TableLayoutPanel around without changing any of the 
controls embedded inside it which is nice. So that is the really, 
really, basic overview of this control. A much more in-depth 
examination of it's properties might open up some outstanding 
possibilities judging from the properties available for this 
control.
I might start doing experimentation and research about this 
control to determine and document some of it's powerful properties 
but for now I'll leave it as is without ReSizing or making it more 
appealing visually.
End Of Overview

Other related posts: