Silverlight Grid Layout and Star Sizing

When you are building an User Interface, the biggest challenge you face is how to layout your controls to present the data in the best possible way to the user. Yes, style and skins are important too but at the end it all depends on how you layout the controls. And root of all the layout is some container that you use. In Silverlight you have choice of using one of the following containers to create a layout for your application or control.

• Canvas
• Grid
• StackPanel

Unless you are developing some application that requires precise placement of controls based on exact position coordinates and things like that, most of us end up with Grid as container for all other controls. Therefore it is important that you understand how Grid layout works.

See an example

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

<Grid x:Name="LayoutRoot" Background="{StaticResource app_background}" 
	ShowGridLines="True">
 <Grid.RowDefinitions>
  <RowDefinition Height="40"></RowDefinition>
  <RowDefinition Height="*"></RowDefinition>
  <RowDefinition Height="2*"></RowDefinition>
  <RowDefinition Height="20"></RowDefinition>
 </Grid.RowDefinitions>
 <Grid.ColumnDefinitions>
  <ColumnDefinition Width="Auto"></ColumnDefinition>
  <ColumnDefinition Width="*"></ColumnDefinition>
  <ColumnDefinition Width="3*"></ColumnDefinition>
 </Grid.ColumnDefinitions>
 <Button Content="Communicate" Height="23" HorizontalAlignment="Left" 
  Margin="0" Name="button1" VerticalAlignment="Top" Width="Auto" 
  Click="OnCommunicate" />
</Grid>

The intention of this layout is to create a grid with 4 rows and 3 columns. I will explain other concepts about layout in the rest of the post.

Defining Rows and Columns

Grid layout is like any other grids. It has rows and columns. Use of RowDefinitions and ColumnDefinitions tags provide you a way to specify how many rows and columns you want in the grid and how you would like to size them. You do not have to specify these explicitly. If you do not specify these dimensions, the framework will automaticall insert the controls into Column 0 and row 0 for you. And it will size the content in these columns based on Auto size.

Specify Height and Width

As you can see in the XAML code above, I have specified height of rows using Height property and width using Width property on rows and column definition. You can there are different ways to specify these dimensions.

• Auto: What this option means is that you want Silverlight framework to extend height or width dimension to fit the content. In the example above, you can see that I 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: This option is also called Star Sizing. This value is something that some people get confused with. 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.

  Lets look at the example above for RowDefinitions. I have specified first row to be fixed height of 40, fourth row as fixed height of 20. Then second row as * and third row as 2*. Lets assume that total height of our grid is 400. So what this means is:

  • Row 0: 40 px
  • Row 3: 20 px

  Now we have (400 - 60)=340px 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 340 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: (340/3)= 113 px
  • Row 2: (340*2/3)= 226 px
  • Row 3: 20 px

Based on this information, you should be able to figure out how sizing will work for width in columns. You can see flexible and convenient is to use Star Sizing. It provides a lot of control on how to dynamically size layouts proportionally. B