XAML in Xamarin.Forms (XAM130)

Xamarin.Forms lets you define your UI using the eXtensible Application Markup Language (XAML). This gives you a clean separation of UI and behavior and makes it easy to utilize a design expert and design tools. This course shows you how to define your UI in XAML. You will create pages and add controls, all in markup. You will also see how to access UI elements from code so you can subscribe to UI events and update UI properties as your data changes.

Upon completion you will be able to:

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: Create a XAML-based calculator

    This exercise will take an existing Xamarin.Forms application (a calculator app) and convert the user interface definition from C# to XAML.

  2. Exercise 2: Add behavior to the XAML calculator

    In this exercise we will continue modifying our Calculator application and connect the behavior to the XAML-defined UI. We'll assign names to the some elements and wire events up to others.

  3. Exercise 3: Clean up the XAML and tailor the UI to the platform

    In this exercise we will continue modifying our Calculator application. We will consolidate the colors used in our UI by placing them into a shared common location and refine the UI per platform.

Additional resources

Additional Documentation

Xamarin.Forms XAML Basics

Tools

XAML Previewer for Xamarin.Forms

Samples

XAML Samples