Home  separator  Layout  separator  Grid Panel
Bookmark and Share Share...    Subscribe to this feed Feed   About Christian Moser  


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

Introduction

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

Define Rows and Columns

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.

Fixed Fixed size of logical units (1/96 inch)
Auto Takes as much space as needed by the contained control
Star (*) Takes as much space as available (after filling all auto and fixed sized columns), proportionally divided over all star-sized columns. So 3*/5* means the same as 30*/50*. Remember that star-sizing does not work if the grid size is calculated based on its content.
 
<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>
 
 

How to add controls to the 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>
 

Resizable columns or rows

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"/>
 

How to share the width of a column over multiple grids

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.

Using GridLenghts from code

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


Auto sized GridLength.Auto
Star sized new GridLength(1,GridUnitType.Star)
Fixed size new GridLength(100,GridUnitType.Pixel)
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

How to create a resizable column



Last modified: 2011-10-03 09:22:29
Copyright (c) by Christian Moser, 2011.

 Comments on this article

Show all comments
Antony Nadan
Commented on 30.March 2011
Nice one Bro...
Ričardas
Commented on 30.March 2011
I have a problem with Grid inside ItemsControl. The Grid as DataTemplate with 1 row and 3 columns (each must have Width = Auto). When I populate buttons, they are shown with different widths (according to text lengths) - HorizontalAlignment=&quot;Stretch&quot; does not work. It fails to preserve same column width in each populated grid. Setting Column width to * is not an option to me, because sometimes I have one or two not visible columnns, and I want remaining visible columns (e.g. buttons) take whole width. The Grid.IsSharedSizeScope=&quot;True&quot; also does not help...

Paul
Commented on 31.March 2011
differenz types =&gt; different types
Great article. Thanks! You have some more typos in your tutorails, especially some if insted of it. I'll try to add it in comments in respectfull pages.
Om Prakash
Commented on 21.April 2011
Superb.........,
I Heart fully,

Thank you for your nice Material


Om Prakash Bishnoi
Software Engineer ,
DotSquare, Jaipur(RAj.)
Dennis
Commented on 5.May 2011
This is my firts time to use WPF, It is a great help. Keep it up man! Thanks
Arun
Commented on 5.May 2011
its very easy to learn as beginner
sandeep sharma
Commented on 5.May 2011
Fantastic Article...Well explained..
Ray Akkanson
Commented on 18.May 2011
We need more details.
Ra Akkanson
Simi
Commented on 19.May 2011
Hi,
that my first time to using grid layout.
So can u tell me d proper way that how can i run any program.
Manoj
Commented on 23.May 2011
Good One...........:-)
ray akkanson
Commented on 28.May 2011
thanks for the good explanation.
forogh
Commented on 5.June 2011
Thanks it was very helpfull, it is my first time using Grid
J
Commented on 14.June 2011
Nice one
Ashu
Commented on 21.June 2011
btf..nice article
Rakhi
Commented on 30.June 2011
its a very nice....
Tomer Avni
Commented on 12.July 2011
Thanks for this. I keep finding myself getting back to your web (which is both well organized and presented) and your topics are great !
B.T.W the part of GridLength(1,GridUnitType.Star) gave me the solution I was looking for the past 2 hours! (I couldn't help but creating element in code rather the XAML)
G2One Network
Commented on 30.July 2011
thank for sharing your great think.....
kisalay
Commented on 1.August 2011
How we can retrieve values of each column by iterating ?????
periyasamy
Commented on 3.August 2011
Thanks,this definition is very useful
Vijay
Commented on 16.August 2011
Nice
yeda anna
Commented on 25.August 2011
kya hai ye sab Ha ?????????????????????????????
yeda anna
Commented on 25.August 2011
how sexy is this documents
sreenivas
Commented on 8.September 2011
Good to learn
Gagan M
Commented on 9.September 2011
Hi,
I just found a typo. Will be better if you can get it rectified since it might be confusing for others.

In 'Define Rows and Columns' section,
'The following example shows a grid with three rows and two columns.' (Instead there are four rows and two columns in the example)

Thanks.
Randy
Commented on 22.September 2011
Thanks~ It is easy to understand for me !

Name
E-Mail (optional)
Comment