UWP Layout Controls and Usefull features of Grid Control

An 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 are 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
  
  
  • Height="Auto"
    
    height="auto" mean the height for the row should be tall enough to accommodate all of the contents inside it.
    
    
  • 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.
    
    
  • When you write height and width in numbers like Width ="100" it represents that number of pixels for the width and height.
    
    
  • 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.
    
    
  • 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."