Post
Ask Question

Xamarin.Forms - Pages

Introduction

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 Page notion where we can create a mobile application using XAML to design our page and C# language for code-behind. 

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

Building the Sample

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

Xamarin

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

Xamarin

After another window is displayed to choose between a Blank App and a Master-Detail project (That integrate 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 we get this window,

Xamarin

But in the recent version of Visual Studio 2015 15.5.2, we don’t have in "Code Sharing Strategy" the PCL (Portable Class Library), it’s replaced by .NET Standard! Even, we are 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 (have the ‘least common denominator’ of APIs of those platforms).

For more details click here.

.NET standard: it’s a ‘standard’ set of APIs rather than a platform. Here 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. But in November 2017, .NET Standard Comes to Xamarin.Forms Project Templates.

So, 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 wizard now, it will use PackageReference by default. Let's take a look at new windows,

Xamarin

For more details related to the .NET Standard, this is the GitHub,

https://github.com/dotnet/standard

And this is a good article that explains that,

https://blog.xamarin.com/building-xamarin-forms-apps-net-standard/

Description - Structure

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

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

Xamarin

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 to propose different experiences of navigation. To define exactly what is an instance of Xamarin.Forms.Page, the official documentation presents a clear and concise definition.

As mentioned in this link: https://developer.xamarin.com/guides/xamarin-forms/user-interface/controls/pages/

“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 activity an activity.”

ContentPage

The simplest page without any particular feature is the template to use to start a blank page. 

XAML

  1. <? xml version = "1.0" encoding = "utf-8"?>   
  2. <ContentPage xmlns = "http://xamarin.com/schemas/2014/forms"   
  3.         xmlns: x = "http://schemas.microsoft.com/winfx/2009/xaml"   
  4.         x: Class = "Sample.MyContentPage"   
  5.         Title = "ContentPage Presentation" Padding = "10">   
  6.    <StackLayout>   
  7.      <Label Text = "Welcome to Xamarin.Forms !" />   
  8.    </StackLayout>   
  9. </ContentPage>  

ContentPage iherit from TemplatedPage, this is the base class inXamarin.Forms.dll,

Xamarin

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

Xamarin

NavigationPage

It's a type of Page which can hold multiple pages but display only one and rpovide the capability 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.

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

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

NavigationPage inherit from Page class.

Xamarin

We have some functions to use when we would like to move from a 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 are used,

Navigation.PopToRootAsync(); to Pops all but the root Xamarin.Forms.Page off the navigation stack.

We can use the navigation in XAML part like this,

XAML

  1.  <NavigationPage Title="Schedule" Icon="schedule.png">   
  2.         <x:Arguments>   
  3.             <local:MyPage1 />   
  4.         </x:Arguments>   
  5. </NavigationPage>  

This example we call a Page having as title Schedule and an Icon  "schedule.png", the content of our page is inside MyPage1 that is a ContentView, not ContentPage. 

I invite you to read more about it at this link: https://developer.xamarin.com/api/type/Xamarin.Forms.NavigationPage/

TabbedPage

As the name of this type, it’s like tabulation in the web or a Pivot control, it allows to display a page containing several tabs.

You can find an example about TabbedPage at my YouTube Channel,

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

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

C#

  1. public App() {  
  2.     var tabbedPage = new TabbedPage();  
  3.     tabbedPage.Children.Add(new Page1());  
  4.     tabbedPage.Children.Add(new Page2());  
  5.     tabbedPage.Children.Add(new Page3());  
  6.     MainPage = tabbedPage  
  7. }  

But we can add a TabbedPage using XAML like this sample,

XAML

Edit|Remove 

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

CarouselPage

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

For more details,

https://developer.xamarin.com/guides/xamarin-forms/application-fundamentals/navigation/carousel-page/

And you will find an example in my Channel YouTube,

https://www.youtube.com/watch?v=1XUxuM_wamA

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

C#

  1. public App() {   
  2.    
  3. CarouselPage carouselPage = new CarouselPage();   
  4. carouselPage.Children.Add(new MainPage());   
  5. carouselPage.Children.Add(new Page1());   
  6. carouselPage.Children.Add(new Page2());   
  7.    
  8. MainPage = carouselPage;   
  9. }   

But we can add CarouselPage using XAML like this sample,

HTML

  1. <?xml version="1.0" encoding="UTF-8"?>   
  2. <CarouselPage   
  3.     xmlns="http://xamarin.com/schemas/2014/forms"   
  4.     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"   
  5.     xmlns:local="clr-namespace:NogginXamarinFormSample;assembly=CarouselPage"   
  6.     x:Class="CarouselPage.Sample">   
  7.     <CarouselPage.Children>   
  8.         <local:MyPage1 />   
  9.         <local:MyPage2 />   
  10.         <local:MyPage3 />   
  11.     </CarouselPage.Children>   
  12. </CarouselPage>  

In our example, the code behind will be like this,

 C#

  1. public partial class CarouselPage : CarouselPage {   
  2. ....   
  3. }  

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. This article explains how to use a MasterDetailPage and navigate between its pages of information.” for more details: https://developer.xamarin.com/guides/xamarin-forms/application-fundamentals/navigation/master-detail-page/

Xamarin

So, Master Detail Page 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 to go back to the master, the idea is simple, if you have any button or option to display it in a menu but you want to hide them to keep a good UI experience.

We will define it using XAML in this way,

XAML

  1. <MasterDetailPage.Master >   
  2.   
  3.        <ContentPage Padding="10" BackgroundColor="Gray" Title="Master" Icon="hamburger.png">   
  4.            <ContentPage.Content>   
  5.                <StackLayout Margin="5,30,5,5">   
  6.                    <Label Text="Master Page">   
  7.                    </Label>   
  8.   
  9.                    <Button x:Name="goToPage1" Text="Go to Page 1" BackgroundColor="Yellow" Clicked="goToPage1_Clicked"></Button>   
  10.   
  11.                    <Button x:Name="goToPage2" Text="Go to Page 2" BackgroundColor="Red" Clicked="goToPage2_Clicked"></Button>   
  12.   
  13.                    <Button x:Name="goToPage3" Text="Go to Page 3" BackgroundColor="Green" Clicked="goToPage3_Clicked"></Button>   
  14.   
  15.                </StackLayout>   
  16.            </ContentPage.Content>   
  17.        </ContentPage>   
  18.    </MasterDetailPage.Master>   
  19. <MasterDetailPage.Detail>   
  20.   
  21.        <ContentPage Padding="10">   
  22.            <ContentPage.Content>   
  23.                <StackLayout Margin="5,30,5,5">   
  24.                    <Label Text="Detail  Page">   
  25.                    </Label>   
  26.                </StackLayout>   
  27.            </ContentPage.Content>   
  28.        </ContentPage>   
  29.    </MasterDetailPage.Detail>  

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

In <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 Master-Detail Page.

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

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

C#

  1. public MasterPage ()  
  2.         {  
  3.             InitializeComponent ();  
  4.             Detail = new NavigationPage(new Page1());  
  5.   
  6.             //Summary:  
  7.             //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.  
  8.   
  9.             //    Remarks:  
  10.             //Setting this property causes the Xamarin.Forms.MasterDetailPage.IsPresentedChanged event to be raised.  
  11.             //We initialize it to false  
  12.             IsPresented = false;  
  13.         }  
  14.   
  15.   
  16.         void goToPage1_Clicked(object sender, System.EventArgs e)  
  17.         {  
  18.             //We will display the first page  
  19.             Detail = new NavigationPage(new Page1());  
  20.             IsPresented = false;  
  21.   
  22.         }  

Property IsPresented says that Master Detail menu should be hidden or not after the tap.

To have more examples you can check my video on YouTube,

 

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

 

Source Code Files

  • https://github.com/didourebai/MasterProject
  • https://github.com/didourebai/Xamarin-Sample2


Similar Articles