Layout in Xamarin.Forms (XAM135)

Xamarin.Forms apps run on a wide range of devices with varying screen sizes and pixel densities. It is challenging to create a UI that looks good and behaves correctly in all cases. Xamarin.Forms helps solve this problem by providing flexible layout containers that can calculate the size and position of your UI controls automatically; they even recalculate if the user rotates the device or changes the size of the app's window. This course contains in-depth coverage of StackLayout and Grid, the two most popular layout containers in Xamarin.Forms. It also shows you how to add scrolling when your UI is too large for the available screen area.

Recommended prerequisite for this course

• XAML in Xamarin.Forms (XAM130)

Upon completion you will be able to:

• Specify the size of a view
• Arrange views with StackLayout
• Apply Attached Properties
• Arrange views with Grid
• Scroll a layout with ScrollView

Course exercise download

Exercise materials are available from GitHub. The code can be cloned through a desktop Git client or downloaded directly as a ZIP file.

If you are using Windows, try to select a location with a shorter path length to make sure you don't exceed the 260 character limit.

Lecture

Here are the lecture slides.

Exercises

1. Exercise 1: Explore alignment options
   

   The primary goal of this lab is see the effect of the four primary layout options when applied to a view contained in a StackLayout. There is no code to write for this exercise.

2. Exercise 2: Use StackLayout to build a UI
   

   The goal of this lab is to use nested StackLayouts to arrange the views in a UI.

3. Exercise 3: Use Grid to build a UI
   

   The goal of this lab is to use a Grid to arrange the views in a UI.

Additional resources

Additional Documentation