XAML Layouts.

Well in this post I want to talk about layouts or in other words how controls are positioned in you user interface.
There are two important elements in XAML these elements are the Grid element and the Stackpanel element.

For the grid we will talk about how to define columns and rows and the various sizing options.

On the other hand, talking about the stackpanel we are going to discuss how to change the orientation for it’s items from horizontal to vertical and talking about the alignment as well.

The grid element is use for laying out other controls it allows you to define rows and columns and you have the ability to choose in which row or column (or both) that specific element should be placed inside it.

Well let’s start :
by default there is always one row and one column even if it not define in our code, so every item between the opening and closing grid tag is defined in row = 0 and column = 0.

Ok let’s take a look on defining rows and columns:

First let’s define our rows like this:

Here I have three rows defined in a
the first one of a fixed height (the actual number of pixels) of 200px, the second one of an auto height which means take a 200px from our grid to that specific row.

Note: 200px because we have a rectangle that has a height of 200.

Then we have a row definition with star (*).The star means use the remainder area available. So the first row is 200px and the second row is 200px that mean the third row equal = the whole height – (200+200).

Notice that I have assigned the rectangle element to the first row by using Grid.Row = 0, and the second one by Grid.row =” 1”.

For the “*” size you have other options
you can type something like that:

Grid.RowDefinations

Grid.RowDefinations Height = “1*”

 or
Grid.RowDefinations Height = “2*”
Grid.RowDefinations

 

and so on so forth.

The “1*” means give me one share of the height, the second one says give me two shares of the remainder height.

So then you define your rectangles as follows:

Rectangle fill=”red” Grid.Row=”0”
Rectangle fill=”cyan” Grid.Row=”1”

then it will fill up the heights since we didn’t define a height or width.

Now let’s talk about columns it is pretty much the same but vertically ;)                             

So let’s define our columns:

Here I have three columns defined in a
the first one of a fixed Width (the actual number of pixels) of 500px, the second one of an auto width which means take a 200px from our grid to that specific column.

So you will get the next layout!

 

 
As I mentioned before what apply for rows come true for columns too.

Ok we have finished our talk about grids.
in the very next post we will talk about stackpanels.