Understanding Pages and Layouts

Real-world apps are made of multiple pages. Think of the Facebook app: you see the news feed in the main page; then when you tap a friend’s name, a new page is opened and shows the friend’s profile. Xamarin.Forms provides a number of pages that satisfy the most common needs of a mobile app, and of course these pages are cross-platform, meaning they are available on Android and iOS (and on the Universal Windows Platform if you work with Visual Studio on Windows).

Every page has a specific layout and purpose and is represented by a class that inherits from a base class called Page. Table 7-1 summarizes the available page types in Xamarin.Forms.

In this chapter, you will see an example of navigation between two ContentPage objects. Within pages, the user interface is organized through the so-called layouts. The concept of a layout is not new since many other development platforms allow organizing the UI with layouts, such as Android and WPF and UWP. Layouts, also known as panels or containers, can be considered as containers of views, and their purpose is creating dynamic user interfaces by automatically changing the position and size of the views they contain according to conditions such as the device orientation or the screen size factor. In Xamarin.Forms, there are different kinds of layouts that satisfy the most common requirements for dynamic user interfaces, as summarized in Table 7-2.

A page can contain only one visual element, which is normally a layout that contains a hierarchy of nested layouts and views. The code snippet shown at the beginning of the “Designing the User Interface with XAML” section shows the definition of a ContentPage that contains a root StackLayout and two views. Now you will start designing the user interface of the sample application. As you can imagine, the focus here is on understanding how the Visual Studio for Mac IDE provides powerful tools for Xamarin.Forms. I will provide a description for the views that will be used, but for a full reference do not forget to visit the official documentation at https://developer.xamarin.com/guides/xamarin-forms/user-interface/controls/ .

Designing the User Interface

Differently from Xamarin.iOS and Xamarin.Android, where you have a real designer and a Toolbox, in Xamarin.Forms you need to design the user interface by writing the XAML markup manually. This is certainly a big difference if you have experience with the other Xamarin platforms or with technologies such as WPF and UWP on Windows, where you have instead a full designer. However, Visual Studio for Mac provides full IntelliSense completion for XAML code and a UI previewer, as you will see shortly.

In the Solution pad, double-click the NewsReaderPage.xaml file, which is also the main page for the application. When the XAML code editor is ready, write the following code, whose only purpose is to demonstrate IntelliSense and other editor features, inside the body of the ContentPage definition :

<StackLayout>
      <Label Text="Enter some text:"
          TextColor="Red" FontAttributes="Bold"/>

      <Entry Placeholder="Enter text here..."
      x:Name="Entry1"/>
</StackLayout>

While you type, you will immediately notice some amazing features in the code editor. First, you have full IntelliSense. Figure 7-3 shows IntelliSense in action, suggesting the available views in the given layout context.

Figure 7-3. IntelliSense suggests visual elements that can fit into a specific context

As you get more familiar with XAML in Xamarin.Forms, you will see how IntelliSense only suggests visual elements that can fit into a specific context. For example, if you want to add a child element for a view, IntelliSense will only show visual elements that can be used as a child element for a view. When you scroll the list, a tooltip describes the view or layout. When you assign a property, in some specific cases IntelliSense can provide a preview based on the property type, such as for colors. Figure 7-4 demonstrates this.

Figure 7-4. IntelliSense shows a specialized preview based on the property type

As I mentioned previously, though Visual Studio for Mac does not offer a real design tool, it provides the so-called previewer, which renders visual elements as you type in a preview, as shown in Figure 7-5.

Figure 7-5. The Xamarin.Forms previewer renders the XAML as you type

The previewer should be enabled by default, but if you do not see it, click the Preview button at the upper-right corner of the editor window. You can select the platform for the preview (Android or iOS) and the device form factor (Phone and Tablet). You will first need to rebuild the project in order for the preview to render the XAML, and this must be done for both platforms. You can also rotate the preview to simulate a landscape or portrait view. Notice that the previewer will not render the user interface if the XAML contains data-binding expressions; this is why I’m showing how to work with the previewer with a code snippet that will not be part of the sample application, which heavily relies on data binding instead.

As the user interface becomes more complex, having a visual representation of the hierarchy of visual elements might be important. If you open the Document Outline pad, you will see a visual representation of the hierarchy in the user interface definition, and Figure 7-6 shows an example based on the current XAML markup.

Figure 7-6. The hierarchical view of the user interface in the Document Outline pad

Now that you have seen the most important tools for Xamarin.Forms in Visual Studio for Mac, you can write down the markup of the user interface, so delete the StackLayout element and its content. For this example, the user interface is not really complex. The root layout is a StackLayout that contains a ListView. As with other platforms, in Xamarin.Forms a ListView allows you to present a list of data. Each item in the list is actually an instance of the Item class. For each instance, you must specify how the ListView should display its information. The Item class will be defined shortly, but you already know its property names, so you can prepare a so-called data template that defines how the information will be displayed for each Item instance. Let’s start with a first, simplified version of the XAML markup for the main page, which looks like the following:

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:NewsReader"
 x:Class="NewsReader.NewsReaderPage" Title="Channel9 Reader">
  <StackLayout>
    <ActivityIndicator x:Name="NewsActivity" IsVisible="false" IsRunning="false"/>
    <ListView x:Name="RssView" ItemsSource="{Binding Items}"
            IsPullToRefreshEnabled="true" IsRefreshing="{Binding IsBusy}"
            Refreshing="Handle_Refreshing"
            ItemTapped="RssView_ItemTapped" HasUnevenRows="true">
      <ListView.ItemTemplate>
        <DataTemplate>
          <ViewCell>
            <StackLayout Padding="2" Orientation="Vertical">
              <Image Source="{Binding Thumbnail}" HorizontalOptions="Start" />
              <Label Text="{Binding Title}" FontAttributes="Bold"/>
              <Label Text="{Binding Author}"/>
              <Label Text="{Binding PublicationDate}" />
            </StackLayout>
          </ViewCell>
        </DataTemplate>
      </ListView.ItemTemplate>
    </ListView>
  </StackLayout>
</ContentPage>

The ContentPage root element represents a single-view page. Every page definition normally includes a number of so-called XML namespaces, which you can recognize by the xmlns literal. An XML namespace can be considered as the way XAML can reference .NET namespaces. This allows for using objects, such as views, exposed by .NET types also in XAML markup. This requires specifying an identifier for XML namespaces after the xmlns literal. By default, Xamarin.Forms includes the xmlns:local and xmlns:x namespaces, where local points to the current assembly and x refers to the root system namespace. With the same syntax you can include references to other .NET types, such as third-party views. Notice how you can assign a value for the Title property; this will be displayed when the page is in the navigation stack, as demonstrated shortly. ActivityIndicator is a view that is used to display an indicator while an operation is in progress. In this case, the IsVisible and IsRunning propertie are set to false because the indicator will be actually enabled in C# when the application is downloading content. The ListView receives the list of data through the ItemsSource property and via data binding. Data binding is a programming technique that allows for connecting two objects, keeping them in sync. If you are not familiar with data binding, make sure you read the official documentation at http://developer.xamarin.com/guides/xamarin-forms/xaml/xaml-basics/data_binding_basics . ItemsSource is data bound to a collection called Items that will be exposed by the view model. The data-binding syntax requires the {Binding} expression, followed by the name of the object you want to bind. The extended form is {Binding Path = objectName}, but Path is optional. Notice how an event handler is specified for the ItemTapped event, which is raised when the user taps an item in the list. The HasUnevenRows property allows for generating rows whose height is not fixed. Both iOS and Android offer the pull-to-refresh gesture, which allows users to pull and release a list with a finger to update the list content. Xamarin.Forms has support for this gesture through the IsPullRefreshEnabled property, set as true; the IsRefreshing property, which represents the state of the refresh operation and which is data bound to a Boolean property from the view model called IsBusy; and the Refreshing event, whose handler is responsible for refreshing the content. The data template is defined inside the DataTemplate node. When you define a data template in Xamarin.Forms, you actually need to define a cell. There are several cells available: EntryCell (label plus text box), TextCell (primary text plus secondary text), SwitchCell (label plus a Switch view), and ImageCell (label plus an image). These are limited to very specific situations, so you can use a ViewCell, a special cell that allows you to write custom data templates. In this case, the ViewCell is made of a StackLayout whose content is aligned vertically and in which the distance between the contained views is set with the Padding property. Padding is different from Margin, because the latter is used to set the distance between a view and other views in the parent layout. In this layout, you see four views. One is the Image view that will display a thumbnail for each item and that is bound to the Thumbnail property of the Item class (it has also the HorizontalOptions property assigned with Start, which aligns an image from left to right; other values are StartToExpand, End, EndToExpand). The others are three Label views that are data bound to corresponding string properties in the Item class. You can specify different appearance settings for each view, such as specifying a different font weight with the FontAttributes property.

<ContentPage.Padding>
    <OnPlatform x:TypeArguments="Thickness" iOS="0,20,0,0" Android="0,0,0,0" />
</ContentPage.Padding>

<ListView.SeparatorColor>
  <OnPlatform x:TypeArguments="Color" iOS="Transparent"/>
</ListView.SeparatorColor>

<ListView.RowHeight>
  <OnPlatform x:TypeArguments="x:Int32" iOS="200"/>
</ListView.RowHeight>
<ListView.HasUnevenRows>
  <OnPlatform x:TypeArguments="x:Boolean" iOS="false" Android="true"/>
</ListView.HasUnevenRows>

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:NewsReader" x:Class="NewsReader.NewsReaderPage">
  <StackLayout>
    <ActivityIndicator x:Name="NewsActivity" IsVisible="false" IsRunning="false"/>
    <ListView x:Name="RssView" ItemsSource="{Binding Items}"
            IsPullToRefreshEnabled="True" IsRefreshing="{Binding IsBusy}"
            Refreshing="Handle_Refreshing"
            ItemTapped="RssView_ItemTapped">
      <ListView.SeparatorColor>
        <OnPlatform x:TypeArguments="Color" iOS="Transparent"/>
      </ListView.SeparatorColor>
      <ListView.RowHeight>
        <OnPlatform x:TypeArguments="x:Int32" iOS="200"/>
      </ListView.RowHeight>
      <ListView.HasUnevenRows>
        <OnPlatform x:TypeArguments="x:Boolean" iOS="false" Android="true"/>
      </ListView.HasUnevenRows>
      <ListView.ItemTemplate>
        <DataTemplate>
          <ViewCell>
            <StackLayout Padding="2" Orientation="Vertical">
              <Image Source="{Binding Thumbnail}" HorizontalOptions="Start" />
              <Label Text="{Binding Title}" FontAttributes="Bold"/>
              <Label Text="{Binding Author}"/>
              <Label Text="{Binding PublicationDate}" />
            </StackLayout>
          </ViewCell>
        </DataTemplate>
      </ListView.ItemTemplate>
    </ListView>
  </StackLayout>
    <ContentPage.Padding>
        <OnPlatform x:TypeArguments="Thickness" iOS="0,20,0,0" />
    </ContentPage.Padding>
</ContentPage>

Implementing the Model

In most programming patterns, the model consists of one or more classes that map in code the structure of the data you need to represent. In the case of the sample application that downloads and displays the content of the RSS news feed from the Channel9 web site, you have just one model class that represents a single item in the news feed. RSS feeds consist of XML nodes and elements, so you need a class that represents an XML element in a .NET way.

To accomplish this, in the Solution pad right-click the PCL project name and then select Add ➤ New Folder. A new folder is added to the project, so enter Model as the new folder name. Organizing code in folders helps you keep your code well organized. Next, right-click the new folder name and then select Add ➤ New File. When the New File dialog appears (see Figure 7-7), make sure the Empty Class item template is selected, then enter Item as the new class name, and finally click New.

Figure 7-7. Adding a new empty class

Visual Studio generates a new C# file called Item.cs. The Item class must expose a number of properties that map XML attributes. In Xamarin.Forms, as well as in other XAML-based platforms such as WPF and UWP, views that are data bound to an object’s properties can automatically refresh their content if the bound object raises a change notification. In .NET (and Mono), objects can raise change notifications if they implement the INotifyPropertyChanged interface. With these considerations in mind, write the following code in the Item.cs file:

using System;
using System.ComponentModel;
using System.Runtime.CompilerServices;

namespace NewsReader.Model
{
    public class Item : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
        public void OnPropertyChanged([CallerMemberName]string name = "") =>
               PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));

        private string title;
        public string Title
        {
            get
            {
                return title;
            }

            set
            {
                title = value;
                OnPropertyChanged();
            }
        }

        private string link;
        public string Link
        {
            get
            {
                return link;
            }

            set
            {
                link = value;
                OnPropertyChanged();
            }
        }

        private string author;
        public string Author
        {
            get
            {
                return author;
            }

            set
            {
                author = value;
                OnPropertyChanged();
            }
        }

        private DateTime publicationDate;
        public DateTime PublicationDate
        {
            get
            {
                return publicationDate;
            }

            set
            {
                publicationDate = value;
                OnPropertyChanged();
            }
        }

        private string thumbnail;
        public string Thumbnail
        {
            get { return thumbnail; }
            set
            {
                thumbnail = value;
                OnPropertyChanged();
            }
        }
    }
}

Notice how each property setter calls the OnPropertyChanged method to raise a change notification. The method takes advantage of the CallerMemberName attribute, which avoids the need of passing the property name as a parameter because the runtime automatically resolves the name of the caller property.

Accessing the Network with a Service Class

The next step is adding a service class. Its purpose is to download the content of the RSS news feed from the desired web site and generate a collection of Item objects, each per item in the news feed. Generally speaking, in Xamarin.Forms you can work with information on a network through the HttpClient class, from the System.Net.Http namespace. With this class, not only can you download contents, but you can also send HTTP requests through verbs such as GET, POST, PUT, and DELETE, which is the case of invoking web API services.

HttpClient exposes a number of asynchronous methods, which allow the caller client to stay responsive while the operation is in progress. By following the instructions in the previous subsection, add a folder called Services to the project, and add a new empty class file called ItemService.cs to this folder. The first part of the class definition contains using directives and two strings, one that contains the URL of the RSS feed and one that represents the XML namespaces used to specify media files in the feed.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net.Http;
using System.Threading;
using System.Threading.Tasks;
using System.Xml.Linq;
using NewsReader.Model;
using Xamarin.Forms;

namespace NewsReader.Services
{
    public static class ItemService
    {
        public static string FeedUri =
        "https://s.ch9.ms/Feeds/RSS";
        private static XNamespace mediaNS = XNamespace.Get("http://search.yahoo.com/mrss/");

The next part consists of a method called QueryRssAsync that uses the HttpClient class and its GetStringAsync method to download the content at the specified URL as a string. A LINQ query then generates a new Item object for each XML element called item and populates its properties with the corresponding XML attribute values.

// Query the RSS feed with LINQ and return an IEnumerable of Item
public static async Task<IEnumerable<Item>> QueryRssAsync()
{
    var client = new HttpClient();

    var data = await client.GetStringAsync(FeedUri);

    var doc = XDocument.Parse(data);
    var dcNS = XNamespace.Get("http://purl.org/dc/elements/1.1/");

    var query = (from video in doc.Descendants("item")
                 select new Item
                 {
                     Title = video.Element("title").Value,
                     Author = video.Element(dcNS + "creator").Value,
                     Link = video.Element("link").Value,
                     Thumbnail = GetThumbnail(video),
                     PublicationDate = DateTime.Parse(video.Element("pubDate").Value,
                         System.Globalization.CultureInfo.InvariantCulture)
                 });

    client.Dispose();
    return query;
}

The method returns an IEnumerable<Item> that the view model class will then be able to process in a way that is suitable for data binding. Two additional considerations are that the Channel9 RSS feed also includes links to thumbnail images (.jpg or .png), and the LINQ query invokes a method called GetThumbnail to retrieve the appropriate thumbnail link based on the device factor (the code is provided shortly); the DateTime.Parse method invoked to parse the publication date in the XML uses the invariant culture to avoid errors that might occur if the date format is not supported on the local device culture. The GetThumbnail method analyzes the url attribute of an XML item element and determines how many thumbnails are available, but it takes a step forward. Channel9’s RSS feed includes one or more thumbnails with different sizes, from the smaller to bigger, so GetThumbnail returns the smaller thumbnail if the device is a phone. Otherwise, it takes the first thumbnail available with the bigger size. This is the code, which includes closing brackets for the class:

        private static string GetThumbnail(XElement node)
        {
            var images = node.Descendants(mediaNS + "thumbnail");

            string imageUrl;

            switch (Device.Idiom)
            {
                case TargetIdiom.Phone:
                    imageUrl = images.FirstOrDefault().Attribute("url").Value;
                    break;
                default:
                    if (images.Count() > 1)
                    {
                        imageUrl = images.Skip(1).FirstOrDefault().Attribute("url").Value;
                    }
                    else
                    {
                        imageUrl = images.FirstOrDefault().Attribute("url").Value;
                    }
                    break;
            }
            return imageUrl;
        }
    }
}

The interesting piece here is the Device.Idiom property , of type TargetIdiom. The latter is an enumeration that allows you to understand if the app is running on a phone, a tablet, or a desktop machine (supported only on Windows 10). Possible values are Phone, Tablet, and Desktop. With this property, you can provide additional UI adjustments based on the device type.

Exposing Data with a View Model

A view model can be considered the place where you write the business logic of your app. It acts like a bridge between the model and the user interface and is responsible for exposing data in a way that XAML knows how to consume.

What the view model in the sample application needs to do is call the QueryRssAsync method from the service class, populate and expose a collection of Item instances that is suitable for data binding, and expose a property called IsBusy that will tell the UI if the view model is busy loading data. With this in mind, add a new folder called ViewModel to the PCL project and add a new file called ItemViewModel.cs to the folder. The code for the class is simple and looks like the following:

using System;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Runtime.CompilerServices;
using System.Threading.Tasks;
using NewsReader.Model;
using NewsReader.Services;

namespace NewsReader.ViewModel
{
    public class ItemViewModel : INotifyPropertyChanged
    {

        public event PropertyChangedEventHandler PropertyChanged;

        public void OnPropertyChanged([CallerMemberName]string name = "") =>
               PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));

        private bool isBusy;
        public bool IsBusy
        {
            get
            {
                return isBusy;
            }
            set
            {
                isBusy = value;
                OnPropertyChanged();
            }
        }

        private ObservableCollection<Item> items;
        public ObservableCollection<Item> Items
        {
            get
            {
                return items;
            }
            set
            {
                items = value;
                OnPropertyChanged();
            }
        }

        public ItemViewModel()
        {
            this.Items = new ObservableCollection<Item>();
        }

        public async Task InitializeAsync()
        {
            if (IsBusy)
                return;

            IsBusy = true;

            try
            {
                var result = await ItemService.QueryRssAsync();
                if (result != null)
                {
                    this.Items = null;
                    this.Items = new ObservableCollection<Item>(result);
                }
            }
            catch (Exception)
            {

                this.Items = null;
            }
            Finally
            {
                IsBusy = false;
            }
        }
    }
}

The class implements the INotifyPropertyChanged interface to raise a notification that the user interface can catch to refresh its content, and this will be useful when you see how to implement pull-to-refresh in the UI to reload data. The InitializeAsync method invokes the ItemService.QueryRssAsync method and generates a new ObservableCollection of Item objects . This kind of collection should be always preferred in data-binding scenarios with XAML-based platforms. Notice how the code sets the value of IsBusy before and after invoking the service method. Now that you have model, service, and view model classes, you are almost ready to write the C# code for the main page. Before we dive into this, it is important to introduce another fundamental concept in Xamarin.Forms projects: navigation between pages.

Navigating Between Pages

More often than not, your apps will be made of multiple pages. Xamarin.Forms provides a built-in mechanism that allows you to navigate between pages easily. Every Page object exposes a property called Navigation, which represents the context-aware interface for navigating between pages and which is of type INavigation. The mechanism of navigation is essentially based on a stack: when the app opens a page, this is pushed to the stack, and when the app navigates back to a previous page, the other page is removed from the stack.

The order in which pages are managed on the stack is platform-specific and is not of interest at this point. The Navigation property exposes a number of methods you can call to manage navigation, as summarized in Table 7-3. All methods are asynchronous so that the user interface is always responsive while navigating.

Methods you will use more frequently are PushAsync and PopAsync. The benefit of using these methods is that Xamarin.Forms enables platform-specific navigation features such as the back button that both iOS and Android draw on the upper-left corner of a page and can understand if the user presses the hardware back button on Android. If you instead want deeper control over navigation, you might want to use PushModalAsync and PopModalAsync, but implementing the back and forward logic is then up to you.

To use navigation and invoke the aforementioned methods, the root page must be wrapped into a NavigationPage object. This means that, inside the App.xaml.cs file, you need to replace the assignment of the MainPage property as follows:

MainPage = new NavigationPage(new NewsReaderPage());

When you want to navigate to a different page, you pass an instance of the new page to PushAsync as follows:

await Navigation.PushAsync(new CustomPage());

If you want to pass data to the target page, you can use a parameterized constructor (an example is coming shortly). If you want to remove the page manually from the stack, you can call PopAsync as follows:

await Navigation.PopAsync();

This must be invoked manually only if you have custom navigation logic; otherwise, the runtime will automatically remove the page from the stack when you press either the hardware back button on Android or the software back button on both iOS and Android. Now that you have basic knowledge of how navigation works, it is time to write C# code for the root page. Further information about navigation in Xamarin.Forms is available at http://developer.xamarin.com/guides/xamarin-forms/application-fundamentals/navigation/hierarchical .

Writing C# Code for a Page

The user interface in a page can be controlled through the C# code-behind file, which has a .xaml.cs extension. In the code-behind you can handle events, you can interact with visual elements, and you can write any code that is needed to make your user interface work. If you take a look back at the XAML code for the root NewsReaderPage page, you will see that there are two events that need to be handled: an item in the ListView is tapped, and a ListView must refresh its content when pull-to-refresh is invoked.

In addition to this, the page must create an instance of the view model class to load the data it needs to display. Let’s start from this last point. In the NewsReaderPage.xaml.cs file , add the following using directives first:

using NewsReader.Model;
using NewsReader.Pages;
using NewsReader.ViewModel;

Notice that the NewsReader.Pages namespace does not exist yet because a secondary page will be created in the next subsection, so the code will not compile at the moment, but ignore any errors for now. In the body of the class, add the following code:

private ItemViewModel viewModel;

public NewsReaderPage()
{
    InitializeComponent();

    this.viewModel = new ItemViewModel();
}

private async Task LoadDataAsync()
{
    this.NewsActivity.IsVisible = true;
    this.NewsActivity.IsRunning = true;
    await this.viewModel.InitializeAsync();
    this.RssView.ItemsSource = this.viewModel.Items;
    this.NewsActivity.IsVisible = false;
    this.NewsActivity.IsRunning = false;
}

protected override async void OnAppearing()
{
    base.OnAppearing();
    await LoadDataAsync();
}

The constructor creates an instance of the view model class, which is represented by a variable of type ItemViewModel. Once you have this instance, you have to invoke the InitializeAsync method that populates the collection of Item objects. This is accomplished in a specific method called LoadDataAsync, which not only loads the data and performs data binding but also sets the visibility for the activity indicator view. Because you cannot call an asynchronous method from the constructor, you can take advantage of the OnAppearing event, which is raised right after a page has been rendered on the screen. This is also the right place to put code that you want to be executed every time a page is displayed, and in this case the code is data binding the collection of Item instances to the ItemsSource property of the ListView. Obviously, in this sample code the data will be downloaded and reloaded every time the page is displayed, but in a real-world app you should implement logic that actually reloads data only when necessary. The next step is handling pull-to-refresh. In the XAML code, the name for the Refreshing event handler is Handle_Refreshing, and the following is the code:

private async void Handle_Refreshing(object sender, System.EventArgs e)
{
    await LoadDataAsync();
}

There is nothing really difficult in this code: when the event is raised, the collection is simply reloaded and data bound again by calling the LoadDataAsync method defined previously. The next step is handling the selection of an item in the ListView so that a secondary page is opened to display the original web page. This is accomplished by writing a handler for the ItemTapped event, which looks like the following:

private async void RssView_ItemTapped(object sender, ItemTappedEventArgs e)
{
    var selected = e.Item as Item;

    if (selected != null)
    {
        WebContentPage webPage = new WebContentPage(selected);
        await Navigation.PushAsync(webPage);
    }
}

The ItemTappedEventArgs object has a property called Item, of type Object, that represents the selected item in the list. A cast to the Item type is required because this will be passed to the constructor of a secondary page called WebContentPage. Then, with navigation, the code opens the secondary page. This secondary page is defined in the next paragraph.

Adding Secondary Pages

Visual Studio for Mac allows you to quickly add pages to a Xamarin.Forms project via the New File dialog. In the Solution pad, add a new folder called Pages to the PCL project and then right-click the folder name and select Add ➤ New File. When the New File dialog appears, locate the Forms template folder on the left. As you can see in Figure 7-8, you can select from among a number of item templates that are tailored for Xamarin.Forms, such as Forms ContentPage items and Forms ContentView items.

Figure 7-8. Adding a new XAML page

When you add a page or content view, make sure you select items whose name ends with Xaml if you want to take advantage of XAML markup to design the UI of a page or content view. In fact, other items are not based on XAML and require you to write the whole UI in C#. In this particular case, select the Forms ContentPage Xaml item and enter WebContentPage as the new page name.

After a few seconds, the new page will be visible in the Solution pad. Double-click WebContentPage.xaml so that the XAML editor and the previewer are enabled. As you can see, there is a ContentPage empty definition, whose content for this example will simply be a WebView control that allows for displaying HTML contents. So, the XAML looks like this:

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Class="NewsReader.Pages.WebContentPage">
    <ContentPage.Content>
          <WebView x:Name="ArticleWebView"/>
    </ContentPage.Content>
</ContentPage>

Notice the importance of adding a name for the WebView so that you can interact with it in C#. In the code-behind file, you must add code that receives the instance of the Item selected in the previous page. The following is the C# code for the page:

public partial class WebContentPage : ContentPage
{
    string link;

    public WebContentPage(Item feedItem)
    {
        InitializeComponent();

        this.link = feedItem.Link;
        this.Title = feedItem.Title;
    }

    public WebContentPage()
    {
        InitializeComponent();
    }

    protected override void OnAppearing()
    {
        base.OnAppearing();
        ArticleWebView.Source = link;
    }
}

As you can see, the constructor takes a parameter of type Item. The value of the Link property will be used to provide a source for the WebView control , and the Title property will be assigned to the Title property of the ContentPage so that it displays the title of the feed item.

A parameterless constructor would not be mandatory, but it is required if you want the previewer to be able to render the page. If you do not supply one, the previewer will show an error. Then you can simply assign the WebView.Source property with the URL of the web content. This property, of type WebViewSource, is very versatile because it is able to resolve contents starting from a URL and even from pure HTML passed as a string. After all this work, the sample project is ready for the first build and for debugging.

UI Debugging with the Xamarin Inspector

The Xamarin Inspector is a tool that allows you to analyze the behavior of the user interface while the application is running. Among the others, the Inspector allows you to even see the XAML view definitions and their property values. To start the Inspector, first start your app for debugging, and then in the debug toolbar click the last button on the right. After a few seconds the Xamarin Inspector will start in a separate window.

When it starts, it is in the so-called REPL mode, which allows you to use the tool as an interactive read-eval-print-loop console. This is not what you need, so click the rightmost button at the upper-right corner, which enables Inspector mode. At this point, the Inspector will show the hierarchy of the controls in the user interface, the property values for the selected control, and a live preview of the UI that you can rotate with the mouse in order to see the UI layers. Figure 7-11 demonstrates this.

Figure 7-11. Analyzing the UI behavior with the Xamarin Inspector

When you select a view in the running app, the Inspector will highlight that view, and it will show its property values. As you can see, the tool shows the property name, its current value, and its .NET type. Not limited to this, you can change a property value in the Value column where allowed, and the new value will be immediately reflected in the running app so that you can have the immediate perception of how the user interface elements appear with different values. The Xamarin Inspector is even more powerful: you can switch to the native view of UI elements by clicking the appropriate button at the upper-left corner, where Xamarin.Forms is the default selection. In Figure 7-11, which is based on the iOS version of the app, you can see the UIKit button. If you switch to the native view, you will not only see the hierarchy of views changing to display native control names, but you will also see the corresponding property names and values on the right. Also, the native view provides more granularity of control over the single UI elements that you will be able to select and highlight directly in the preview and then investigate or change their property values.

Profiling Apps with the Xamarin Profiler

The Xamarin Profiler is a tool that allows you to analyze an app for performance issues, which might involve memory and CPU usage or where the application spends most of its time. The Xamarin Profiler can be launched as a stand-alone application against different kinds of targets, but the simplest way to use it is by selecting Run ➤ Start Profiling in Visual Studio.

When the Profiler starts, it will prompt you with a list of possible investigations you can perform against the app, summarized in Table 7-4.

Figure 7-12 shows an example based on the All Instrument tool.

Figure 7-12. Investigating performance issues with the Xamarin Profiler

As you can see, the Allocations tool displays the list of object instances and their numbers and size in memory, which can be useful to analyze if the number of instances of an object is reasonable or if there might be a memory leak. The Cycles tool has detected no reference cycles in the sample app, and the Time Profiler tool is showing where and when the app is consuming more CPU resources. In the current example, you can see a peak at the app startup, which is reasonable. On the right side of the window, you can see statistics and a pie chart with top allocations. In the example, only 10MB of memory are allocated by the app, which is pretty good. You can click the Call Tree tab to see the hierarchy of method calls, and a very interesting tool is Snapshots. With this tool, you can take a picture of the memory at a certain point in time, storing the list and number of allocated objects and their types. If you take multiple snapshots, you can then open the Snapshots tab and compare the number of allocate objects between snapshots, as demonstrated in Figure 7-13.

Figure 7-13. Comparing memory snapshots

In summary, the Xamarin Profiler is a useful tool when you need to investigate different types of performance issues. You can find more detailed information about this tool at http://developer.xamarin.com/guides/cross-platform/profiler/ .