Layout : Xaml

If you are familiar with Silverlight , WPF Xaml , you may find this blog very basic.
If you are new to Windows 8 app/phone app development and want to understand UI layouts then you are at the right place.

What do you mean by UI Layout?

In my last article I explained containers. Containers tell you how your controls are held on the UI , layout defines how the containers or the controls inside the containers are positioned.

If layout of your application is proper , the UI is not going to get distorted on different devices and different resolutions. The main concept of Windows 8 was Develop Once and Port anywhere. For this porting to happen smoothly we need to be careful enough when we are selecting layout of the xaml page.

For a canvas container you always define the controls at their absolute positions , for a grid/stack panel you define the controls in a relative manner.

So , if your app is targeted towards various devices the best I will suggest is grid and stackpanel.

Now that we are settled with the grid/stack panel as container , let us think on how to position them.

Windows 8 Phone/App supports two types of layout.
a. Absolute Layout
b. Dynamic Layout

Absolute layout should be used when you can define the absolute positions of the controls. That is you define exact locations of all your child elements relative to the parent.If the app requires absolute positioning of UI elements, you can design different pages for different screen resolutions or use scaling as an alternative.

By default the layout is absolute and container is grid for a Windows 8 app.

Dynamic Layout:

You specify the relative positions for all your controls.To use automatic or proportional sizing, you must assign special values to the Height and Width properties.

Microsoft recommends following for a dynamic layout:
(Following lines are taken as is from msdn)

• Set the Height and Width of the control or layout to Auto. When these values are used for controls in the Grid layout, the control fills the cell that contains it. Auto sizing is supported for controls and for the Grid and StackPanel layouts.

• For controls that contain text, remove the Height and Width properties, and set the MinWidth or MinHeight properties. This prevents the text from scaling down to a size that's unreadable.

• To set proportional values for the RowDefinition and ColumnDefinition elements in a Grid layout, use relative Height and Width values. For example, to specify that one column is five times wider than another column, use "*" and "5*" for the Width properties in the ColumnDefinition elements. 

Conclusion:
If you have a screen that should readjust itself based on reolutions my suggestion is use Grid with Dynamic layout.