blog

Home / DeveloperSection / Blogs / Add Rows and Columns to a Grid in wpf

Add Rows and Columns to a Grid in wpf

Vijay Shukla6287 03-Sep-2013

The Windows Presentation Foundation (WPF) Grid control enables you too quickly and easily position and align controls by creating grid-based layouts. At design time, you can add rows and columns to a Grid control in the WPF Designer. By default, new rows and columns use Star sizing.


In the WPF we can add Rows and Columns in Grid control with three
ways:-

1.       XAML editor.

2.       Designer editor.

3.       Collection editor.

XAML editor:

You can add Rows and Columns with the help of XAML editor we can manually type the code in CAML editor and create Rows and Columns in Grid.

Add rows in a Grid by using the XAML editor

1.   In the XAML editor, locate a Grid element.

2.   Add a Grid.RowDefinitions element as a child of the Grid element. The code should look like the following:

<Grid>
    <Grid.RowDefinitions>
    </Grid.RowDefinitions>
</Grid>

3.    Add RowDefinition elements. The following markup shows an example:

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

Add Columns in a Grid by using the XAML editor

1.   In the XAML editor located the Grid element.
2.  Add a Grid.ColumnDefinitions element as a child of the Grid element below line of code create the column in a Grid Control

<Grid>
    <Grid.ColumnDefinitions>
    </Grid.ColumnDefinitions>
</Grid>

3.    Add ColumnDefinition elements. The following markup shows an example:

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

Designer editor:

In the WPF Designer, when you select a Grid control, rails appear on the top and left sides. You can use the rails to add rows and columns directly on to the Grid. XAML view is automatically updated with the new rows and columns.

Add Rows in a Grid with designer Editor

1.     Select a Grid Control from WPF XAML Designer.

2.    Move the pointer over the outer edge of the side rail. The pointer changes to cross hairs and a gridline appears indicating where the row will be added.

3.    Click the rail to set the row.

4.    (Optional) Repeat steps 2 and 3 to add more rows.

Add Columns in a Grid with designer Editor

1.   In the WPF Designer, select a Grid control.

2.  Move the pointer over the top edge of the top rail. The pointer changes to cross hairs and a gridline appears indicating where the column will be added.

3.   Click the rail to set the column.

4.   (Optional) Repeat steps 2 and 3 to add more columns.

Collection editor:

Add rows in a Grid with collection Editor

1.       In the WPF Designer, select a Grid control.

2.       In the Properties window, locate the RowDefinitions property, and click the ellipsis button in the property value column.

3.       The Collection Editor dialog box appears.

4.       Click Add to add a new row.

5.       (Optional) Set the properties of the row.

6.       (Optional) Repeat steps 3 and 4 to add more rows.

7.       Click OK to close the Collection Editor and return to the WPF Designer.

Add columns in a Grid with collection Editor

1.       In the WPF Designer, select a Grid control.

2.       In the Properties window, locate the ColumnDefinitions property, and click the ellipsis button in the property value column.

3.       The Collection Editor dialog box appears.

4.       Click Add to add a new column.

5.       (Optional) Set the properties of the column.

6.       (Optional) Repeat steps 3 and 4 to add more columns.

7.       Click OK to close the Collection Editor and return to the WPF Designer.


Updated 18-Sep-2014

Leave Comment

Comments

Liked By