Grid - the new panel...

digitalnetbizz — Sat, 08 May 2004 09:32:00 GMT

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.

XAML using CLR object as property ...

digitalnetbizz — Wed, 04 Feb 2004 07:22:00 GMT

Just today I discovered a feature of XAML - ability to use custom CLR object as property to my Avalon control. All you need in the XAML is to map your assembly into a namespace in XAML. This is kinda like XML serialization in CLR. Here's an example of the usage in standard XAML element[from http://longhorn.msdn.microsoft.com] -

<Rectangle RectangleLeft="10" RectangleTop="10"
      RectangleWidth="300" RectangleHeight="200">

      <Rectangle.Fill> 
        <LinearGradientBrush> 
          <LinearGradientBrush.GradientStops> 
            <GradientStopCollection>
              <GradientStop Color="red" Offset="0"/>
              <GradientStop Color="yellow" Offset="1" />
              <GradientStop Color="blue" Offset="0.5"/>
              <GradientStop Color="white" Offset="0.2"/>
            </GradientStopCollection>
          </LinearGradientBrush.GradientStops>
        </LinearGradientBrush>
      </Rectangle.Fill>

    </Rectangle>

The same technique is used in Avalon Animation markup as well. Finally, you can write your own Avalon control that take in CLR object as your property with XAML doing the parsing and object creation for you. This can be very useful.

This posting is provided "AS IS" with no warranties, and confers no rights.

digitalnetbizz's WebLog : XAML

Grid - the new panel...

XAML using CLR object as property ...