Silverlight Grid for Dummies
Being a UI designer is not enough. You should be able to render those designs somewhere. Well, i have started my journey as a UI developer and designer in the world of Silverlight. It is a fantastic framework of tools and technology. The best part being that it uses common languages like XML and C#. Well anyhow, i have been working with it for a little over two months now and i have finally recognized its most important control, the <Grid />.So i am going to give a bit of a Silverlight <Grid/> for Dummies.
Introduction:
To start with lets look at what the Grid has to offer. The Grid is a basic control which is used everywhere to set up the layout of your UI page, window, space, etc. You can define the rows and columns, thus forming cells, whose heights and widths are very customizable and flexible to adjust. It is within these cells that we place all our controls. Hence it is like a Sectional Map to a UI. Now, most of this can be done in the Extensible Application Markup Language or XAML, although i love to get dirty with the code behind and take the pain of defining everything there. This approach might be painstaking and you might even consider me crazy for doing after you realize how difficult it is with C# and how blissful it is with XAML. By the way, stick to the XAML, i use C# to irritate my friends at times ;) .
Basics:
0. <Grid/> or <Grid></Grid>
This is the Empty Grid or a Single Cell Grid with nothing in it.
1. <Grid.RowDefinitions/> and <Grid.ColumnDefinitions/>
These are probably the first things you will write within a Grid element. These tags are used to define the Row and Columns of a Grid. However, note that these are not entirely important. They can be omitted, as every grid by default has one cell. So if you were to add anything within that cell it would just act like a container for the controls or UI elements. Using the Row and Column definitions can be useful as it gives you complete control over your UI Map. You can actually dedicate one cell for each UI element and then all the margin adjustments for that UI control will be based with respect to the boundaries of that grid.
2. <RowDefinition/> and <ColumnDefinition/>
These are used inside the <Grid.RowDefinitions/> and <Grid.ColumnDefinitions/> Tags respectively. They are used to define individual Rows and Columns. To get a better understanding of the whole thing have a look at the following code:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"></RowDefinition>
<RowDefinition Height="50"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="50"></ColumnDefinition>
</Grid.ColumnDefinitions>
</Grid>
Notice how the Widths are set in the ColumnDefinition's and Height is set inside the RowDefinition's. You cannot do things the other way round, simply because it does not make sense.
3. Gird.Row, Gird.RowSpan, Gird.Column, Gird.ColumnSpan
Now that you have defined the Row and Column Definitions its time to use it. All the Row and Column definitions inside the <Grid.RowDefinitions/> and <Grid.ColumnDefinitions/> Tags are maintained as zero indexed Collections or Lists. Thus the 1st Row can be referenced by saying Grid.Row = "0" and so on (similarly for Columns).
So lets fill it up:
<Grid x:Name="grdLayoutRoot" Background="White" Width="400" Height="300" ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="50"></RowDefinition>
<RowDefinition Height="50"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="50"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Button x:Name="btnTest" Width="50" Height="30" Content="Text"Grid.Row="0" Grid.Column="0"></Button>
<Rectangle x:Name="rectBlue" Width="50" Height="30" Fill="Blue"Grid.Row="2" Grid.Column="1"></Rectangle>
</Grid>
In this example, i have given the Grid a name or a unique identifier using which you can access its inner controls, in this case the Button and the Rectangle, which have their own names. I have also given the Grid a background (you can do better than white though), a static height and width. An interesting property happens to be the ShowGridLines which you can set to true or false. Setting it to true will mark the Grid lines for better understandability only. Simply because they do not look pretty, unless ofcourse you want to use Grid lines such as those. Here is an example:
[caption id="attachment_58" align="aligncenter" width="404" caption="Grid with the Grid Lines"]
[/caption]
Apart from setting the Grid.Row and Grid.Column, you can also set the Grid.RowSpan and Grid.ColumnSpan Properties. Setting these values allows any control to go beyond its established grid boundary.
4. The Auto and *
Now, most of the lengths that you let for Heights and Widths of a Grid Row and Column is in pixels, always. And to the best of my knowledge you cannot not use any other unit of measurement. Apart from that you can use the Auto and * which behave in the following manner:
a. Setting the Height to Auto will adjust the Grid Row to the height of a control with the maximum height in that Row.
b. Setting the Height to * will make the Grid Row take up the Remaining height within the Grid apart from that taken up by the fixed & auto sized rows.
c. Setting all the Heights to * for a set of rew definitions will ensure that the rows are given equal Heights from that which is remaining after the fixed and auto sized grids have be assigned spaces or heights.
Same is the case for a Column and its Width.
Conclusion:
These were just the basics of the Grid control but the most important and elementary chunks when it comes to developing UI in Silverlight. Do remind me if i have missed any points which can be added here, that you come across. I have only covered the basics and will deal with the other features and uses in another post. I do hope that this helped you a little.