Share via

Grid - the new panel...

  • Article

There's a new panel class added in Avalon not too long ago. I've been using Grid for my last coding milestone [which is why
I'm not writing for so long]. Don't mistake it for GridPanel which has been around since I started working with Avalon. Grid is a new panel that can
do what a GridPanel can do. In addition it has a few advantages, here's some of them:

1. Number of cell != number of element
In GridPanel, you need to add child element to each cell. For eg, if you have Columns=2 and you want 3 rows, you need to add 6 UIElements to it. In Grid, you can have 0-N of element(s) to map to the Grid. For example, if you
have 3 rows and 2 columns, you can have no child or 20 UIElements. Each child can set position into [x,y] cell.

2. Grid can act like a mini Canvas.
Within a Grid, you can SetTop, SetBottom, SetLeft, SetRight to child element. You can set a Text element in cell 2,2 by SetRow(element, 1); SetColumn(element, 1) and then do Struts-Spring effect on the element.

3. Each cell can host 1-N element.
In GridPanel, each cell can have 1 element only. In Grid, you can set multiple element into the same cell and it will all overlay with each other.

4. Grid has Star Sizing.
I'm not 100% sure if GridPanel has Star sizing but Grid has Star sizing for sure. Here's how Star works, if you have 3 columms, 1st column *, 2nd column 100px and 3rd column 2*. Now let's say the available width is 500px. Here's how I think it will distribute size - 1st column = 133px, 2nd column = 100px and 3rd columns = 267px.

Here's a sample of Grid markup:
<Grid>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<Text Grid.Row="1" Grid.Column="1"/>
</Grid>

Grid is definitely valuable to me - I'm pretty sure I'm missing a few more benefits of Grid. I'll add in when I recall. One thing I found Grid really useful is when I mixed Shapes like Polygon as background and overlay it with other element like Text. Those shapes are serving as decorator for me and when window resize, everything resize/move correctly - thanks to Grid.