UWP Layout Controls and Usefull features of Grid Control

In this lesson I'm going to talking about layout rather the process of positioning visual
controls in other elements in your application user interface.

Important thing about all controls in XAML is their "Content Property".

"Content property can only be set to an instance of another object". And it can be set only once but that’s not the case with layout controls.But Content Property of layout controls can be set more than once. In fact they don’t have a content property instead they have a "Children Property". Like Grid Control.

Children Property is a special data type (a collection data type) that can hold XAML
controls called UI element collection.
                In XAML as we add new instances of controls inside of the definition of our layout
control, we actually calling the add method of our layout controls. So here you can
understand that how XAML is simplifying stuff for us.

·        

Grid Control

·         Grid allows you to create rows and columns to make cells and then each of the
controls that are used by our application can request which row and which column
they wanna be placed inside of.

·         Whenever you create a new project , that project already contain a Grid with no rows
and columns defined . By default there is always 1 row and 1 column in Grid even if it is
not explicitly defined.

·         Grid.Row="0" how this works ? This is actually called attached properties.
so the point is why attached properties are exists ? This is an advance XAML topic to
discuss.

·         Attached Properties:

Look at this [Grid.Row="1"] , Grid.Row is attached property here.
attached property is just like a global property that can be accessed from anywhere in
given scope.

·         Attached Properties VS Dependency Properties :
attached properties keep your XAML simple.

·         Sizing rows and Columns

o    Height="Auto"
height="auto" mean the height for the row should be tall enough to accommodate all of the
contents inside it.

o    Height="*" ( Star Sizing )
Utilize the all available space.
when you write like Height= " 3 * " > its mean you're saying give me 3 shares from all the available space.

o    When you write height and width in numbers like Width ="100" it represents that number of pixels for the width and height.

o    In general its not a good idea to put sizing properties in numbers of pixels because there are
various screen sizes upon which your application will run.

o    When you do not specify a row or column for a control it will go to row=0 and column=0
by default.

·         VerticalAlignment and HorizontalAlignment
vertical and horizontal alignments pull controls towards their boundaries. 

·         Margin Attribute:
margin attributes push controls away from their boundaries.
margin works in a clock wise fashion. Like margin=" left , top , right , bottom "