Monday, February 9, 2009

Grid In WPF

Container (Grid Control)

Before you really start working in WPF you first should be aware of the controls those are used as container controls in WPF. Actually, each and every control in WPF is a container control. But Grid and Canvas are the two main controls those are used as container in most of the cases. This section will explain about Grid control in detail.

Grid Control

Like all other controls, Grid is a container control in WPF. It can have 'n' number of children of it. If you have added Buttons, TextBlocks, Textboxes or any other controls inside Grid then those controls are children of Grid, at the same time one can say that Grid is a parent control for them. Compared to Canvas, Grid control is diffrent. For the proper layout and positioning of child controls in grid, we can devide Grid Control in set of Rows and Columns. Just like "Table" control in HTML. We have to define RowDefinitions and ColumnDefinition for the Grid. Let's just start it, then only we will have better idea. First of all try to add Grid in your XAML code, and to do that, use the following piece of code.

XAML Code:

<Grid Name="grMain" Height="500" Width="600" Background="Orange">
</Grid>


C# Code:

Grid grMain = new Grid();
grMain.Height = 500;
grMain.Width = 600;
grMain.Background = new SolidColorBrush(Colors.Orange);

since, page does not have children property, add above Grid in the page using following Code.

pgMain.Content = grMain;

Great!!, we have added a Grid control in Page. Now what? It's time to add child controls inside the Grid. But, wait a minute. Before jumping into a swimming pool, we must check weather it's full of water or not right? same is the case with Grid. If you want to add controls inside a Grid, better checkout weather you have defined RowDefinitions and ColumnDefinitions for the Grid or not.

You can add RowDefinitions using the following piece of code.

XAML Code:

<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="100"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>

C# Code:

RowDefinition r = new RowDefinition();
r.Height = new GridLength(50, GridUnitType.Pixel);

RowDefinition r1 = new RowDefinition();
r1.Height = new GridLength(100, GridUnitType.Pixel);

RowDefinition r2 = new RowDefinition();
r2.Height = new GridLength(0, GridUnitType.Star);

Create RowDefinitions like this, then use following piece of code to add these RowDefinitions in the Grid Control

grMain.RowDefinitions.Add(r);
grMain.RowDefinitions.Add(r1);
grMain.RowDefinitions.Add(r2);

Here "grMain" is the Name of the Grid Control. Run the application, you would not be able to see the space(Height) acuired by these Rows. To check that, add ShowGridlines="True" in your XAML code or add grMain.ShowGridLines = true; in your code behind file.

That's how we can Devide Grid into set of Rows. Same like this, devide Grid Control into set of columns. To do this, use the followin piece of code.

XAML Code:

<Grid.ColumnDefinitions>
<ColumnDefinition Height="50"/>
<ColumnDefinition Height="100"/>
<ColumnDefinition Height="*"/>
</Grid.ColumnDefinitions>

C# Code:

ColumnDefinition c = new ColumnDefinition();
c.Width = new GridLength(50, GridUnitType.Pixel);

ColumnDefinition c1 = new ColumnDefinition();
c1.Width = new GridLength(100, GridUnitType.Pixel);

ColumnDefinition c2 = new ColumnDefinition();
c2.Width = new GridLength(0, GridUnitType.Star);

grMain.ColumnDefinitions.Add(c);
grMain.ColumnDefinitions.Add(c1);
grMain.ColumnDefinitions.Add(c2);


Now, our Grid Control is ready with three Rows and three Columns. You can add as many Rows or Columns as you want. One thing you must remember is, you have to set "Height" property for Rows and "Width" property for Columns. Let's add some controls inside the Grid control now. Let's add few TextBlocks to have a clear idea.

XAML Code:

<TextBlock Name="tbID" Height="30" Width="50" Grid.Column="0" Grid.Row="0">ID</TextBlock>

<TextBlock Name="tbName" Height="30" Width="70" Grid.Column="1" Grid.Row="0">Name</TextBlock>

<TextBlock Name="tbAddress" Height="30" Width="100" Grid.Column="2" Grid.Row="0">Address</TextBlock>


What do we see here? Something new? right, two new properties Grid.Row and Grid.Column. These two properties define, in which Row and Column, this TextBlock control should be placed inside the Grid. To add it in 1st Row we must set Grid.Row="0". Same applies for the column also. Here is an example, how you can add button at runtime using C# code.

C# Code:

Button btnSubmit = new Button();
btnSubmit.Height = 30;
btnSubmit.Width = 50;
btnSubmit.Content = "Submit";
Grid.SetColumn(btnSubmit, 0);
Grid.SetRow(btnSubmit, 2);
grMain.Children.Add(btnSubmit);

As you can see here, to set Row and Column for a control at runtime we must use Grid.SetColumn() and Grig.SetRow(). As a first argument in this function we have to pass the "Name" of the control and second argument is Row or Column number. Likewise we can add 'n' number of children in the Grid Control.

Here is the final XAML code.

XAML Code:

<Page x:Class="WpfBrowserApplication1.Page1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="pgMain" Loaded="pgMain_Loaded">

<Grid Name="grMain" Height="500" Width="600" Background="Orange" >

<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="100"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>

<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>

<TextBlock Name="tbID" Height="30" Width="50" Grid.Column="0" Grid.Row="0">ID</TextBlock>
<TextBlock Name="tbName" Height="30" Width="50" Grid.Column="1" Grid.Row="0">Name</TextBlock>
<TextBlock Name="tbAddress" Height="30" Width="50" Grid.Column="2" Grid.Row="0">Address</TextBlock>

</Grid>
</Page>




HAPPY CODING!!

7 comments:

  1. Nice One..
    Keep it Up...
    Waiting For more..

    ReplyDelete
  2. thanks ..nice work ...

    ReplyDelete
  3. Raxit,
    I was looking for relationship mapping between XAML and C# code-behind all over the web and you are the only one who describe WPF in both forms. Thanks.
    Could you talk about where "Grid grMain = new Grid();" and its following C# code should be inserted? Where 'Window' node exists in C# code if I want create it in C#? In which event handler or which override I should create the entire UI?
    If my question has no values to others, could you provide me some hints to lisun@comcast.net? Thanks a lot!

    ReplyDelete
  4. Excellent Post . Since i am new to WPF . I am not much Familar to WPF . so was not knowing how to add controls to page run time . Thanks you have help me a lot . And save lot of time

    ReplyDelete
  5. Very good tutorial.keep it up please.

    ReplyDelete
  6. Nice Blog. Can u tell how can i add Rows dynamicaly without clicking the button. FOr example i create data at a runtime and the rows should be added at a runtime

    Thx
    Tomi

    ReplyDelete