Grid Panel

Introduction

How to define rows and columns

How to add controls to the grid

Resize columns or rows

How to share the width of a column over multiple grids

Using GridLenghts from code

The grid is a layout panel that arranges its child controls in a tabular structure of rows and columns. Its functionality is similar to the HTML table but more flexible. A cell can contain multiple controls, they can span over multiple cells and even overlap themselves.

The resize behaviour of the controls is defined by the HorizontalAlignment and VerticalAlignment properties who define the anchors. The distance between the anchor and the grid line is specified by the margin of the control

The grid has one row and column by default. To create additional rows and columns, you have to add RowDefinition items to the RowDefinitions collection and ColumnDefinition items to the ColumnDefinitions collection. The following example shows a grid with three rows and two columns.

The size can be specified as an absolute amount of logical units, as a percentage value or automatically.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
        <RowDefinition Height="28" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="200" />
    </Grid.ColumnDefinitions>
</Grid>
 

To add controls to the grid layout panel just put the declaration between the opening and closing tags of the Grid. Keep in mind that the row- and columndefinitions must precced any definition of child controls.

The grid layout panel provides the two attached properties Grid.Column and Grid.Row to define the location of the control.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
        <RowDefinition Height="28" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="200" />
    </Grid.ColumnDefinitions>
    <Label Grid.Row="0" Grid.Column="0" Content="Name:"/>
    <Label Grid.Row="1" Grid.Column="0" Content="E-Mail:"/>
    <Label Grid.Row="2" Grid.Column="0" Content="Comment:"/>
    <TextBox Grid.Column="1" Grid.Row="0" Margin="3" />
    <TextBox Grid.Column="1" Grid.Row="1" Margin="3" />
    <TextBox Grid.Column="1" Grid.Row="2" Margin="3" />
    <Button Grid.Column="1" Grid.Row="3" HorizontalAlignment="Right" 
            MinWidth="80" Margin="3" Content="Send"  />
</Grid>
 

WPF provides a control called the GridSplitter. This control is added like any other control to a cell of the grid. The special thing is that is grabs itself the nearest gridline to change its width or height when you drag this control around.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Label Content="Left" Grid.Column="0" />
    <GridSplitter HorizontalAlignment="Right" 
                  VerticalAlignment="Stretch" 
                  Grid.Column="1" ResizeBehavior="PreviousAndNext"
                  Width="5" Background="#FFBCBCBC"/>
    <Label Content="Right" Grid.Column="2" />
</Grid>
 

The best way to align a grid splitter is to place it in its own auto-sized column. Doing it this way prevents overlapping to adjacent cells. To ensure that the grid splitter changes the size of the previous and next cell you have to set the ResizeBehavior to PreviousAndNext.

The splitter normally recognizes the resize direction according to the ratio between its height and width. But if you like you can also manually set the ResizeDirection to Columns or Rows.

<GridSplitter ResizeDirection="Columns"/>
 

The shared size feature of the grid layout allows it to synchronize the width of columns over multiple grids. The feature is very useful if you want to realize a multi-column listview by using a grid as layout panel within the data template. Because each item contains its own grid, the columns will not have the same width.

By setting the attached property Grid.IsSharedSizeScope to true on a parent element you define a scope within the column-widths are shared.

To synchronize the width of two columndefinitions, set the SharedSizeGroup to the same name.

 
<ItemsControl Grid.IsSharedSizeScope="True" >
  <ItemsControl.ItemTemplate> 
    <DataTemplate>
      <Grid>
        <Grid.ColumnDefinitions>
          <ColumnDefinition SharedSizeGroup="FirstColumn" Width="Auto"/>
          <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <TextBlock Text="{Binding Path=Key}" TextWrapping="Wrap"/>
        <TextBlock Text="{Binding Path=Value}" Grid.Column="1" TextWrapping="Wrap"/>
      </Grid>
    </DataTemplate>
  </ItemsControl.ItemTemplate>
</ItemsControl>
 
 

Useful Hints

Columns and rows that participate in size-sharing do not respect Star sizing. In the size-sharing scenario, Star sizing is treated as Auto. Since TextWrapping on TextBlocks within an SharedSize column does not work you can exclude your last column from the shared size. This often helps to resolve the problem.

If you want to add columns or rows by code, you can use the GridLength class to define the differenz types of sizes.

Grid grid = new Grid();
 
ColumnDefinition col1 = new ColumnDefinition();
col1.Width = GridLength.Auto;
ColumnDefinition col2 = new ColumnDefinition();
col2.Width = new GridLength(1,GridUnitType.Star);
 
grid.ColumnDefinitions.Add(col1);
grid.ColumnDefinitions.Add(col2);
 

More on this topic

 Comments on this article

Piyush Goriya	Commented on 26.January 2010 Nice Article really helpful for those who new to wpf with controls
Prem	Commented on 26.January 2010 Very good for beginners
@shish	Commented on 8.February 2010 How to create dynamic rows and columns (i.e I want to create same #s of rows what I am getting from my SQL). BTW- u'r notes, examples r v.good for beginners.
Ashok Zenerica	Commented on 9.March 2010 savvy tutorials
Abirami	Commented on 11.March 2010 Hi @shish, this grid is different from the grid what u r thinking.. this is a layout..not a control. Using DataGrid control u can create same no. of rows as in ur db
Abirami	Commented on 11.March 2010 Hi Christ,the link to 'How to create a resizable column' is broken.. Article Not Found error occurs.
Hukam	Commented on 4.May 2010 Awesome ...:)
Johnny	Commented on 7.May 2010 Really nice one. thanks....
Hiren Solanki	Commented on 14.May 2010 It was pleasing experiance learning from your turorial. thanks for writing
spellchecker	Commented on 17.May 2010 it\'s Length, not Lenght :)
Christian...	Commented on 21.May 2010 Thanks Spell Checker. Now onwards please dont comment like this . if you want to make comment then please make it for good cause not to hurt anyone. Thanks and Give my regards to your family. Thanks for correcting my mistakes and now onward please make sure that you keep this going and make others happy by your comment and further more if you want to make any kind of comment then please send me to my mail christian.mosers@wpftutorial.net... dont expose it in public.. so dont forget to dispose this comment thanks
MohitB	Commented on 26.May 2010 Excelent, Its helped me alot to learn WPF.
Nitin Sharma	Commented on 28.May 2010 Dear All, Plz do the comment as good as u can.Dont hurt any one by giving all these comments. This website helps you a lot for learning WPF technology.
Anand	Commented on 1.June 2010 Hi Christian, Excellent effort made so far. It will be nice if comments are kept seperate (optionally in a pop up)
BARaabaz	Commented on 4.June 2010 Does it work???????
hiren solanki	Commented on 10.June 2010 @baraabaz,@Anand : please give quality comment . dont fill the page with your non-intresting PJs. plase fill free to mail me.
Christoph	Commented on 23.June 2010 Could you explain and give an example for the construct <Grid.RowDefinitions> <RowDefinition Height="1.1*"/> <RowDefinition Height="8.9*"/> </Grid.RowDefinitions> which I found in someones' code.
Praveen...	Commented on 14.July 2010 Actully its nice but this would be better if it involves the detail about 2d.I am working right now at wpf. Its a great architecture.I have some queries, how to bind my database with treeview in wpf?? Any person can suggest me. Thanks in advance.
Vidya Sagar...	Commented on 22.July 2010 How can I change the XAML Grid column width from c# file
Vidya Sagar...	Commented on 27.July 2010 yes, I got the answer give Name property to the column then access that column in C# file in this way column_treeview.Width = GridLength.Auto;
Jayesh...	Commented on 3.August 2010 Hi, Really good infromation Regards, Jayesh Prajapati. Mumbai - Indaia.
Darshit Dave	Commented on 10.August 2010 Wow... I loved this style of sharing information with us... I am going to go through all the pages very soon... Thanks.
amol	Commented on 10.August 2010 how to use "Fixed" in height or width? It is not working plz explain
a	Commented on 21.August 2010 aaa
vucuongkg	Commented on 24.August 2010 Thank! :)