Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Xamarin Notes — Xamarin.Forms: Pages

DZone's Guide to

Xamarin Notes — Xamarin.Forms: Pages

Learn about the five types of Page in Xamarin, which can be used to develop mobile apps using XAML for the frontend code and C# for the backend.

· Mobile Zone ·
Free Resource

In the previous chapter, I explained how you can prepare your environment for Android or iOS application development, in this chapter I will start presenting the structure of our page in Xamarin.Forms.

Xamarin.Forms are based on the Page notion, where we can create a mobile application using XAML to design our page and C# language for backend code.

We have five types: ContentPage, NavigationPage, TabbedPage, CarouselPage, and MasterDetailPage.

Building the Sample

To start a new project in Visual Studio 2017, we choose File/New/Project.

We will get another window to select in Visual C#/Cross-Platform. The .NET framework will be the latest version, in our case, framework 4.6.2:

After that, another window is displayed to choose between a Blank App and a Master-Detail project (which integrates the use of MVVM Pattern). This template allows you to select what you’d like, even the platforms you want on targeting, and your code sharing strategy.

Before that, we get this window:

In the recent version of Visual Studio 2015 15.5.2, in "Code Sharing Strategy," we don't have the PCL (Portable Class Library); it’s replaced by .NET Standard! We are even able to select the platform from the same interface. Let’s understand some points related to this.

PCL, or Portable Class Library, is a group of libraries that target a set of the platform (having the "least common denominator" of APIs of those platforms). For more details, go to this link.

.NET Standard is a "standard" set of APIs, rather than a platform. We are not talking about platforms, it’s only the standard (now 2.0), and your code will work on all platforms that support it. However, in November 2017, .NET Standard is coming to Xamarin.Forms project templates.

Targeting a PCL to.NET Standard only differs in the sense that types and namespace pointers are standardized in a different way. The new version of.NET Standard 2.0 is dedicated to sharing code via various platforms by introducing it in Xamarin.Forms via the cross-platform app wizar. Now, it will use PackageReference by default. Let take a look at the new windows:

For more details related to .NET Standard, check out the GitHub, and this good article which explains it.

UI Structure

The first page that you get is this one, so what is a Page? What can it contain?

The page is the primary container. In our sample, it’s a ContentPage.

Inside the Page, we will add a Layout. In the sample, we use StackLayout, and inside the StackLayout, we will add the view that is a list of Controls. In this sample, we used a Label, an Entry (input text), and a Button.

Pages

Xamarin.Forms offer many possibilities of pages, allowing us to propose different experiences of navigation. To define exactly what is an instance of a Xamarin.Forms Page, the official documentation presents a clear and concise definition, as mentioned in this link:

“A Page is a visual element that occupies most or all of the screen and contains a single child. A page represents a View Controller in iOS a Page in Windows and acts a lot like an Activity on Android, but is not an activity.”

1) ContentPage

The simplest page, without any particular features, is the template used to start a blank page:

<? 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 = "Sample.MyContentPage" 
        Title = "ContentPage Presentation" Padding = "10"> 
   <StackLayout> 
     <Label Text = "Welcome to Xamarin.Forms !" /> 
   </StackLayout> 
</ContentPage>

ContentPage inherits from TemplatedPage. This is the base class in Xamarin.Forms.dll:

To add a new ContentPage, we select: New Item/ContentPage.xaml.

2) NavigationPage

This is a type of Page which can hold multiple pages but display only one, and provides the capability of navigation between them.

In this video, you will find a sample that uses the NavigationPage. We are able to navigate from a page to another.

In our sample, we have instantiated a new NavigationPage object, and in the constructor, the first page to display it.

NavigationPage inherits from the Page class.

We have some functions to use when we would like to move from one page to another. If we want to go to another page from a button action event, we use this: Navigation.PushAsync(new AboutPage());

Or, for asynchronous mode: Navigation.PushModalAsync(new AboutPage());

We can go back to the previous page but using this: Navigation.PopAsync(); or Navigation.PopModalAsync();

Other methods used include Navigation.PopToRootAsync(); to pop all but the root Xamarin.Forms.Page off the navigation stack.

We can use the navigation in XAML like this:

 <NavigationPage Title="Schedule" Icon="schedule.png"> 
        <x:Arguments> 
            <local:MyPage1 /> 
        </x:Arguments> 
</NavigationPage>

This example is called a Page with a title Schedule and an Icon, "schedule.png." The content of our page is inside MyPage1, a ContentView, not ContentPage.

I invite you to read more about it at this link.

3) TabbedPage

As the name of this type, it’s like tabulation in the web or a Pivot control; it allows us to display a page containing several tabs. You can find an example about TabbedPage on my YouTube Channel.

In the video, we created the TabbedPage with C#:

public partial class App : Application
{
InitializeComponent();
    var tabbedPage = new TabbedPage(); 

    tabbedPage.Children.Add(new Page1()); 

    tabbedPage.Children.Add(new Page2()); 

    tabbedPage.Children.Add(new Page3()); 

    MainPage = tabbedPage 

}

We can also add a TabbedPage using XAML, like this sample:

<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"xmlns:mypages="clr-namespace:MyApp.Pages;assembly=MyApp"  
            x:Class="MyApp.Pages.Navigation"> <TabbedPage.Children> <mypages:Page1 Title="Page 1"/><mypages:Page2 Title="Page 2"/><mypages:Page3 Title="Page 3"/>  
  </TabbedPage.Children>  
</TabbedPage>

4) CarouselPage

As a definition, it’s navigating between pages using a swipe gesture.

For more details, go to this link.

You will find an example on my YouTube channel.

In the video, we created the CarouselPage with C#:

public App() { 

CarouselPage carouselPage = new CarouselPage(); 
carouselPage.Children.Add(new MainPage()); 
carouselPage.Children.Add(new Page1()); 
carouselPage.Children.Add(new Page2()); 

MainPage = carouselPage; 
} 

We can also add CarouselPage using XAML, like this sample:

<?xml version="1.0" encoding="UTF-8"?> 
<CarouselPage 
    xmlns="http://xamarin.com/schemas/2014/forms" 
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
    xmlns:local="clr-namespace:NogginXamarinFormSample;assembly=CarouselPage" 
    x:Class="CarouselPage.Sample"> 
    <CarouselPage.Children> 
        <local:MyPage1 /> 
        <local:MyPage2 /> 
        <local:MyPage3 /> 
    </CarouselPage.Children> 
</CarouselPage>

In our example, the backend code will be like this:

public partial class CarouselPage : CarouselPage { 
.... 
}

5) MasterDetailPage

The Xamarin.Forms MasterDetailPage is a page that manages two related pages of information — a master page that presents items, and a detail page that presents details about items on the master page. A MasterDetailPage can be used to navigate between its pages of information. For more details, check out this link.

The MasterDetailPage container possesses two pages; one is the master and the other is the details. The master will contain the menu list and the detail will display the detail, and will link back to the master. The idea is simple; you can use it if you have any button or option to display in a menu but you want to hide it to keep a good UI experience.

We will define it using XAML in this way:

 <MasterDetailPage.Master > 

        <ContentPage Padding="10" BackgroundColor="Gray" Title="Master" Icon="hamburger.png"> 
            <ContentPage.Content> 
                <StackLayout Margin="5,30,5,5"> 
                    <Label Text="Master Page"> 
                    </Label> 

                    <Button x:Name="goToPage1" Text="Go to Page 1" BackgroundColor="Yellow" Clicked="goToPage1_Clicked"></Button> 

                    <Button x:Name="goToPage2" Text="Go to Page 2" BackgroundColor="Red" Clicked="goToPage2_Clicked"></Button> 

                    <Button x:Name="goToPage3" Text="Go to Page 3" BackgroundColor="Green" Clicked="goToPage3_Clicked"></Button> 

                </StackLayout> 
            </ContentPage.Content> 
        </ContentPage> 
    </MasterDetailPage.Master> 
 <MasterDetailPage.Detail> 

        <ContentPage Padding="10"> 
            <ContentPage.Content> 
                <StackLayout Margin="5,30,5,5"> 
                    <Label Text="Detail  Page"> 
                    </Label> 
                </StackLayout> 
            </ContentPage.Content> 
        </ContentPage> 
    </MasterDetailPage.Detail>

In the <MasterDetailPage.Master> tag, we will define the master view; in our case, we have three Buttons that will link our pages.

In the <MasterDetailPage.Detail> tag, we will contain the default content if we didn’t define it in the constructor of the class.

These tags are mandatory for a MasterDetailPage.

We will create three pages: Page1, Page2, and Page3, with different content and background colors.

Now, in the C# part, we will define the default page to display when we start our application.

public MasterPage ()
{
InitializeComponent ();
            Detail = new NavigationPage(new Page1());

            //Summary:
            //Gets or sets a value that indicates whether or not the visual element that is represented by the Xamarin.Forms.MasterDetailPage.Master property is presented to the user.

            //    Remarks:
            //Setting this property causes the Xamarin.Forms.MasterDetailPage.IsPresentedChanged event to be raised.
            //We initialize it to false
            IsPresented = false;
}


        void goToPage1_Clicked(object sender, System.EventArgs e)
        {
            //We will display the first page
            Detail = new NavigationPage(new Page1());
            IsPresented = false;

        }

}

The property IsPresented says whether the MasterDetail menu should be hidden or not after the tap.

For more examples, you can check out my videos on YouTube:

https://www.youtube.com/watch?v=DiFWxxnpObo

https://www.youtube.com/watch?v=fhNDxfXiVcA

Source code files:

Topics:
xamarin ,xamarin.forms ,ui ,pages ,c# ,xaml ,tutorial ,mobile ,mobile app development

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}