Grid Control, as the name suggest, provides you a grid to manage, organize and create a lay out for any kind of application rather its WPF, SilverLight, Windows Form and Expression blend etc.
Its a very good practice to organize your control inside a grid but the next thing to understand is how to make a perfect grid control. So i’m here to tell you this.
First of all we should understand what is a grid?
Actually grid is a combination of rows and columns. There are different techniques to define these rows and columns depending on the need.
But one thing which every designer should know is, although Microsoft have provide us the ease of dragging and dropping the controls in our application still being a designer you should not do this. Always right a code according to the need with proper tags. For example when you drag a button control somewhere in your application button control by default brings some margins with it. Although it will look fine to you but when your application will be
executed on different devices then all of your layout and hard-work will be of no use. So just write a code with proper tag and properties according to your need.
Lets learn the Grid control now, as i have told earlier that grid is a combination of rows and columns. So first of all in our XAML code we will define a grid by using its tags <Grid></Grid>. Then we will define the rows and columns as below, keep in mind by default grid has one row and only one column.
Defining rows and columns:
The code snippet above shows the code of grid with three rows and three columns of equal size. In the code above x:Name=”main_grid” is the naming property of our grid, we can name our grid in this way. Remember one thing in our rows definitions we define the height and in our column definition we define the width.
In the above code you are also seeing * sign with height and widths.
This asterisk (*) sign tells the compiler to assign the remaining available portion of the layout.
With this code you will get a grid like this:
Lets assign some numbering to our grid block. For this purpose write the following code under the rows and columns grid.
In the above code, you can see how we are assigning the grid block to each of our TextBlock in XAML.
We are placing our first TextBlock to the grid block 0,0 (0th row and 0th column, remember like arrays the index of grid also starts form 0) similarly the second TextBlock is being assigned to 0th row and 1st Column and so on.
Finally you will get this out put :