Krishna Mahesh: August 2015

There are many ways to layout the windows app screen design in XAML. But two primary elements are used to positioning the layout of the XAML Page. Those are Grid and StackPanel.

In Grid Layout we can define screen as Rows and Columns. We can give various sizing options for each row & column.

In StackPanel we can change the Orientation of items inside the StackPanel and we can align the items.

Grid :

Grid element is using to layout the other controls inside the Rows & Columns of the Grid. First create a new project by selecting the Blank mobile application in template wizard. Then it will Generate a mobile app Solution with mainpage.xaml. Now just open that file, you will see image like as follows.

This mainpage.xaml contain Grid element by default. This Grid element does not contain any row’s and

column’s definitions. That means it taking all the page as single cell by default these grid element contain

single row definition and Column Definition. These definitions are implicitly taken by Grid element.

Just see the following code sample.

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

To Explain About these grid element I took 4 Row Definitions and 4 Column Definitions. So our Grid size will be 4x4. Here I am filling these cells with Rectangle control along with colors. In Row Definition Height attribute can be mention in 3 ways, Those are Height=”Auto”, Height=”*” and Height=”200”.

Here Height=”Auto” Means It takes the Height from the Controls mentioned inside that row

that should be also Tallest Control Mentioned inside of that row.

Height=”*” means this will take the whole screen Height if we gave as a Single Row Definition. If we gave more than one row definition its height will depend on other rows.

Height=”200” means this will take the 200 points height on the screen.

Similarly Column definition also. But it take Width attribute not height. if width auto means it take highest width of the control.

See the following image generated by the above code.

Here have you see the Orange Red at Left Bottom Corner, Orange at the Right top Corner and white at the left top corner.

For 1st Row 1st Column I wrote the following Code

(If we are not specified any Row or Column number by default it will take the 1st row and 1st column as its position)

Here I gave Height is 100 points and width is 90 points and I am filling this rectangle with color Beige. Then it take the Size of the First row height is 100 points and width of First Column is 90 points and Now I am filling the one more cell.

Now another cell is filled with Orange and I gave the Height is 120 points and width is same as cell one. Now first row height is changed to 120 points. But Width won’t be effect if you changed the width of

the orange cell that will effect for 4th column only it won’t be effect that row cells. Now I am adding one more cell with Orange Red.

In 3rd rectangle I had changed the Both Height and Width but the height of this row won’t be effect the other rows. It will effect only on the forth row height of the grid. But the width of this rectangle will affect the 1st column of the grid, now the width of First cell is taken as 120 points not 90 points and this width won’t be effect on Orange filled Cell.

Just see the 1st cell in the image you can find the height & width difference between 1st cell & 4th cell of 1st Row and 1st cell in First row & 1st cell in the fourth row simultaneously.

A Rectangle with height is 100 and width is 90 is center aligned in 1st cell of the 1st row.

Now I am adding one more row

I am filling 2nd row 2nd column with “SteelBlue” without any height and width it takes whatever height remains in that row and whatever width remains in that column.

You may got Confused just see the image to understand now I am adding one more column to this

Now see the Green Fill area in the image (Last Column) for that I wrote both height and width as 300x300 points but this height and width are not affected on 3rd row and 3rd column. Because we mentioned it as Height=”*” and Width=”*” So it won’t depend on its controls it will depends on other rows and columns height and width. In One word we are saying to this row/column to Auto adjust their size depending on other rows and columns.

In row definition I gave height of the two controls as follows.

Here it divide the screen Remaining screen as 3 parts in that 2 parts of space is for 1st row height and 1 part is for 2nd row height. This is how the Grid (Row Definition & Column Definition) will be work.

If we mentioned Height=”*” it is equal to Height=”1*”. I hope Readers will understand this article if they practiced.

Note:

1. Here I am used Rectangles for Explanation about Grid row sizes and columns. You may better to practice with other controls.

2. And While Explaining I am represented grid rows and columns from 1 to 4 but actually C# Grid will start it rows and columns from 0 not from 1 like arrays.

in Next Article i will Explain about StackPanel. :)

Download The Project

Prev - Next

Krishna Mahesh

Pages

Sunday 2 August 2015

Windows App Development (win 8.1) - #4

LinkWithin

Search This Blog