Xamarin.Forms Multiscreen Deep Dive

PDF for offline use

Let us know how you feel about this

Translation Quality


0/250

last updated: 2016-12

In the Xamarin.Forms Multiscreen Quickstart, the Phoneword application was extended to include a second screen that keeps track of the call history for the application. This article reviews what has been built in order to develop an understanding of page navigation and data binding in a Xamarin.Forms application.

Navigation

Xamarin.Forms provides a built-in navigation model that manages the navigation and user-experience of a stack of pages. This model implements a last-in, first-out (LIFO) stack of Page objects. To move from one page to another an application will push a new page onto this stack. To return back to the previous page the application will pop the current page from the stack.

Xamarin.Forms has a NavigationPage class that manages the stack of Page objects. The NavigationPage class will also add a navigation bar to the top of the page that displays a title and a platform-appropriate Back button that will return to the previous page. The following code example shows how to wrap a NavigationPage around the first page in an application:

public App ()
{
    ...
    MainPage = new NavigationPage (new MainPage ());
}

All ContentPage instances have a Navigation property that exposes methods to modify the page stack. These methods should only be invoked if the application includes a NavigationPage. To navigate to the CallHistoryPage, it is necessary to invoke the PushAsync method as demonstrated in the code example below:

async void OnCallHistory(object sender, EventArgs e)
{
    await Navigation.PushAsync (new CallHistoryPage ());
}

This causes the new CallHistoryPage object to be pushed onto the Navigation stack. To programmatically return back to the original page, the CallHistoryPage object must invoke the PopAsync method, as demonstrated in the code example below:

await Navigation.PopAsync();

However, in the Phoneword application this code isn't required as the NavigationPage class adds a navigation bar to the top of the page that includes a platform appropriate Back button that will return to the previous page.

Data Binding

Data binding is used to simplify how a Xamarin.Forms application displays and interacts with its data. It establishes a connection between the user interface and the underlying application. The BindableObject class contains much of the infrastructure to support data binding.

Data binding defines the relationship between two objects. The source object will provide data. The target object will consume (and often display) the data from the source object. In the Phoneword application, the binding target is the ListView control that displays phone numbers, while the PhoneNumbers collection is the binding source.

The PhoneNumbers collection is declared and initialized in the App class, as shown in the following code example:

public partial class App : Application
{
   public static List<string> PhoneNumbers { get; set; }

   public App ()
   {
     PhoneNumbers = new List<string>();
     ...
   }
   ...
}

The ListView instance is declared and initialized in the CallHistoryPage class, as shown in the following code example:

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage ...
             xmlns:local="clr-namespace:Phoneword;assembly=Phoneword"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             ...>
    ...
    <ContentPage.Content>
       ...
       <ListView ItemsSource="{x:Static local:App.PhoneNumbers}" />
       ...
    </ContentPage.Content>
</ContentPage>

In this example, the ListView control will display the IEnumerable collection of data that the ItemsSource property binds to. The collection of data can be objects of any type, but by default, ListView will use the ToString method of each item to display that item. The x:Static markup extension is used to indicate that the ItemsSource property will be bound to the static PhoneNumbers property of the App class, which can be located in the local namespace.

For more information about data binding, see Data Binding Basics. For more information about XAML markup extensions, see XAML Markup Extensions.

Additional Concepts Introduced in Phoneword

The ListView is responsible for displaying a collection of items on the screen. Each item in the ListView is contained in a single cell. For more information about using the ListView control, see ListView.

Summary

This article has introduced page navigation and data binding in a Xamarin.Forms application, and demonstrated their use in a multi-screen cross-platform application.

Xamarin Workbook

If it's not already installed, install the Xamarin Workbooks app first. The workbook file should download automatically, but if it doesn't, just click to start the workbook download manually.