Star Sizing in Grid Layout - Silverlight

Share |

In Silverlight, you have choice of using one of the following containers to create a layout for your application or control

• Canvas
• Grid
• StackPanel

Most of us end up with Grid as container for all controls, unless you are developing applications that require precise placement of controls based on exact position co-ordinates or your creating come kind of animation. Therefore it is important that you understand how Grid layout works.

See an example

Following XAML code and picture shows layout of example that I created.

<UserControl x:Class="Demo.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="400" Height="300">

<Grid x:Name="LayoutRoot" ShowGridLines="True">

<Grid.RowDefinitions>

<RowDefinition Height="40"></RowDefinition>

<RowDefinition Height="*"></RowDefinition>

<RowDefinition Height="2*"></RowDefinition>

<RowDefinition Height="60"></RowDefinition>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto"></ColumnDefinition>

<ColumnDefinition Width="*"></ColumnDefinition>

<ColumnDefinition Width="2*"></ColumnDefinition>

</Grid.ColumnDefinitions>

<Button Content="Hello" Width="70"/>

</Grid>

</UserControl>



Grid Layout for the sample code above

The above code creates a grid with 4 rows and 3 columns.

Defining Rows and Columns

Grid layout is like the HTML 'table'. It has rows and columns. The rows and columns are defined by 'RowDefinitions' and 'ColumnDefinitions' tags plus you also define the height and width for the Rows and Columns. Every control that you specify in the Grid, is placed in this rows and columns. For every control, you have to sp[ecify the row and column where the control must be inserted, if you do not specify the row and column number, the control is inserted at column 0 by default.

Specify Height and Width

I have specified height of rows using Height property and width of columns using Width property. There are different ways to specify these dimensions.

Auto: This option means that you want Silverlight framework to extend height or width dimension to fit the content. In the example above, you can see that I have added a button to Row = 0,Column = 0. I specified fixed height of 40 for first row but I have set width of first column to Auto. This allows my first column to be as wide as it need to fit the button. If you do not set these dimension properties to any value, then Auto is default value that these take.

* or Star: It's also called Star Sizing. This is the most confusing option. This is more like specifying a dimension in "%" terms but more advanced. What this '*' means is that it wants Silverlight framework to allocate remaining space in proportion to number of STARS. Remaining is key to this option. This remaining is the space left after layout has accomodated FIXED and AUTO dimensions. I have specified first row to be fixed height of 40, fourth row as fixed height of 60. Then second row as * and third row as 2*. The total height of our grid is 300.

So what this means is:

Row 0: 40 px
Row 3: 60 px  

Now we have (300 - 100)=200px left.

This remaining height is to be divided between Row 1 and Row 2 as per Start Sizing set.

We have 1 * for Row 1 and 2 * for Row 2. These values means is of the remaing 200 px left to be allocated, give 1/3 to Row 1 and 2/3 to Row 2.

So as per this at the end we have:

Row 0: 40 px
Row 1: (200/3)= 67 px
Row 2: (200*2/3)= 133 px
Row 3: 60 px

Similarly, the sizing is applied to the column.

Hope this was useful.