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="Stretch" 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="True" also does not help...
|
|
|
|
Paul | |
|
Commented on 31.March 2011 |
differenz types => 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 !
|
|
|
|