Table Layout Panel

In this video we are going to see how to create and use a table layout panel control

A table layout panel control is simply a panel control that provides a table layout

When you say table layout that means it has a grid layout where there are columns and there are rows

So, now question comes why would you want to use this control

Why would you want to use this panel? main advantage or use of this panel is let's say you have a very complex user interface or very complex form where you have a bunch of input controls for example you are trying to get information about a customer where you have a name address zip code location city country and bunch of other controls and they are laid out in a same you know row and then you want to resize and reposition them at the same times without going you know each

one control at a time so that's where this panel control comes in picture so

you will see more in this video by the time we are done finishing this video

you will see how useful this control can be again there is nothing much this is

just a panel container control where purpose of this control is to just place

bunch of children control on top of it and then you know have them resize and

you know without spending too much time so let's let's get started so what do you do is uh drag

and drop a table layout panel from your toolbox toolbox to onto the form as soon as you drag and

drop a table layout panel to onto the form you will see the default action items are listed in

this task list so as you can see there a add column add row remove last column remove last row added rows and columns So by default your panel has actually two rows and two columns

So what I am going to do, I am going to add one more column, add two more rows

As you can see size of this is still same. So I am going to actually add one more row

Now, you can also edit these rows and columns. So if you click on edit rows and columns, you can see you can also define the percentile of these columns

like how much percentage you want to be everything you can you know you can decide from here

so column one say I say I want 30 percent say auto size 30 percent I want column two to 30

and then column 3 to 40%. You can also add more columns from here. Delete and insert

OK. And you can also actually select rows from here. And then as you can see size for rows, you can also select size for rows

Say OK. So now, one other thing you want to do is once you know how many rows and how many columns

your layout is going to have, what you do is now you can start actually placing controls

in these cells. That's the whole purpose of this panel. And by the way you can also set other properties of the panel so if you go to properties window you can set you know other properties like any other control

background foreground background image you can also set you know column count

you can go to columns add columns from here as well which is same thing we did

from tasks where it's going to open the column and row styles

styles. So that said you know besides doing all these standard properties the main purpose

of this panel is to decide how many rows and columns your user interface form and controls

are going to have. So let's close this for now. So what I'm going to actually do is I'm

going to place bunch of controls say I am going to place button 1

I am going to actually make it larger this thing button 2

button 3 button 4 button 5 now as you can see if i can resize these right there

and let's say if i want to now i'm going to do is say add where is my text box

text box one text box three text box five

now i am going to also add say this now this is a perfect example where I have say these 15 controls and now

I want to make sure all these text boxes or these text boxes all these

buttons they are aligned and they are perfectly aligned the same position from left side and top and you know what I only have to do is I just

use this panel and it's this resize grid to resize see as you can see if I go you know change

the width of the column it also change the width of the button control so as you can

see by resizing this whole panel I actually am resizing all these 15 controls imagine

where you have like say a user interface where you have 40 50 controls so instead of going

you know going to each and every control and position them one by one what you going to

do is you can create you can create a panel this table layout panel or you can also have

multiple panels you can even have a another child table layout panel within a table layout

panel so so you know based on this panel you can it basically helps you saves a lot of

time to resize and reposition these bunch of controls now if you run this application

what you will see you will see nothing. Table is just transparent so there is nothing really but you can see everything is aligned perfectly

So, I hope you learned from this tutorial that this table layout panel can be really useful

when designing complex user interfaces where you have a bunch of controls and you want

to align them and position them quickly