Post
Ask Question

Mobile Page Design Using Xamarin.Forms Pages

Introduction

In this tutorial, I will show you how to implement different paging using Xamarin Forms.The Mobile Page design will act as the main role in the app so before you start designing, you need to decide which page you are going to use in Xamarin Forms.

Xamarin Forms Pages

The Xamarin Forms Page will support all the mobile platforms, and  it will work like Viewcontrollers(iOS), Activity(Android), and Page(Windows) but Xamarin Form has different pages

 
I will explain ContentPage, CarouselPage, TabbedPage, masterDetails pages with examples, in this article.



ContentPage 

A ContentPage displays a single View, often a container such as a StackLayout or a ScrollView. You can add any control inside the content page. I have created 4 ContentPage - AboutMe, Blogs, CSharp, MSDN. Those pages are referred to from all other page examples.

 
The image, below, shows a ContentPage where the Content property was filled with a label and WebView.

 
AboutMe.xaml

The below code was used to create this ContentPage and added label.

  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="DevEnvExePages.AboutMe">  
  5.    
  6.   <Label Text="I enjoy challenging opportunities to learn new things, solve complex technical design/development issues and collaborate with people across various teams in different parts of the globe -Around 10 years of experience in Microsoft technologies like Windows Phone , Windows Store , UWP, Xamarin , SharePoint ,ASP.Net, VB.Net, C#.net, SQL server, WCF, WPF, SSRS, AJAX and working as Project Team Lead in a US based MNC and done several certifications on Microsoft technology(MCP, MCAD, MCSD, MCTS)"  
  7.            HorizontalOptions="Center" />  
  8. </ContentPage>  

The code below was used to create this ContentPage and added web view.

Blogs.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="DevEnvExePages.Blogs">  
  5.   <WebView Source="http://www.devenvexe.com" HeightRequest="592" HorizontalOptions="Center"/>  
  6. </ContentPage>  

Csharp.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="DevEnvExePages.CSharp" >  
  5.   <WebView Source="http://www.c-sharpcorner.com/members/suthahar-j" HeightRequest="592" HorizontalOptions="Center"/>  
  6. </ContentPage>  

MSDN.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="DevEnvExePages.MSDN">  
  5.   <WebView Source="https://social.msdn.microsoft.com/profile/j%20suthahar/" HeightRequest="592" HorizontalOptions="Center"/>  
  6. </ContentPage>  
CarousaelPage

The Xamarin Form Carousel Page is identical on each platform. Pages can be navigated through by swiping horizontally to both sides.

 

The following XAML example, creates a new content page using File > Add new, and then changes the XAML to like below (making sure your x:Class are correct for your project) and also changes the base class in the code behind to Carouselpage.

The CarouselPage displays three simple ContentPage elements like below.

  1. <?xml version="1.0" encoding="utf-8" ?>  
  2. <CarouselPage xmlns="http://xamarin.com/schemas/2014/forms"  
  3.              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
  4.              x:Class="DevEnvExePages.ExCarouselPage">  
  5.   <ContentPage>  
  6.     <!--First Item-->  
  7.     <StackLayout>  
  8.       <WebView Source="https://social.msdn.microsoft.com/profile/j%20suthahar/" HeightRequest="592" HorizontalOptions="Center"/>  
  9.     </StackLayout>  
  10.   </ContentPage>  
  11.   <!--2nd  Item-->  
  12.   <ContentPage>  
  13.     <StackLayout>  
  14.       <WebView Source="http://www.devenvexe.com" HeightRequest="592" HorizontalOptions="Center"/>  
  15.     </StackLayout>  
  16.   </ContentPage>  
  17.   <!--3rd Item-->  
  18.   <ContentPage>  
  19.     <StackLayout>  
  20.       <WebView Source="http://www.c-sharpcorner.com/members/suthahar-j" HeightRequest="592" HorizontalOptions="Center"/>  
  21.     </StackLayout>  
  22.     </ContentPage>  
  23. </CarouselPage>  
  1. using Xamarin.Forms;  
  2.   
  3. namespace DevEnvExePages  
  4. {  
  5.     public partial class ExCarouselPage : CarouselPage  
  6.     {  
  7.         public ExCarouselPage()  
  8.         {  
  9.             InitializeComponent();  
  10.         }  
  11.     }  
  12. }  

Now, it will work like below.



TabbedPage

The TabbedPage page is a bit like a navigation page in that it is a collection of other pages. However, instead of a navigation bar, we are shown a collection of tabs. Each tab has a title and may have an icon.

Create a new content page using File > Add new, and then change the XAML to like below (making sure your x:Class and xmlns:local are correct for your project) and also change the base class in the code behind to TabbedPage.

  1. <?xml version="1.0" encoding="utf-8" ?>  
  2. <TabbedPage  xmlns="http://xamarin.com/schemas/2014/forms"  
  3.              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
  4.               xmlns:local="clr-namespace:DevEnvExePages;assembly=DevEnvExePages"  
  5.              x:Class="DevEnvExePages.ExTabbedPage">  
  6.   <NavigationPage Title="AboutMe">  
  7.     <x:Arguments>  
  8.       <local:AboutMe />  
  9.     </x:Arguments>  
  10.   </NavigationPage>  
  11.   <NavigationPage Title="Blogs">  
  12.     <x:Arguments>  
  13.       <local:Blogs />  
  14.     </x:Arguments>  
  15.   </NavigationPage>  
  16.   <NavigationPage Title="MSDN">  
  17.     <x:Arguments>  
  18.       <local:MSDN />  
  19.     </x:Arguments>  
  20.   </NavigationPage>  
  21.   <NavigationPage Title="C# Corner">  
  22.     <x:Arguments>  
  23.       <local:CSharp />  
  24.     </x:Arguments>  
  25.   </NavigationPage>  
  26. </TabbedPage >  

Try the below code for adding a custom template instead of adding to page.

  1. <TabbedPage.Children>  
  2.     <local:AboutMe Icon="icon.png" /> // Adding page  
  3.     <ContentPage Title="cSharp" Icon="icon.png" > // Adding custom template  
  4.       <StackLayout>  
  5.       <WebView Source="http://www.c-sharpcorner.com/members/suthahar-j" HeightRequest="592" HorizontalOptions="Center"/>  
  6.       </StackLayout>  
  7.     </ContentPage>  
  8.     <ContentPage Title="MSDN" Icon="icon.png" />  
  9.   </TabbedPage.Children>  
  1. using Xamarin.Forms;  
  2.   
  3. namespace DevEnvExePages  
  4. {  
  5.     public partial class ExTabbedPage : TabbedPage  
  6.     {  
  7.         public ExTabbedPage()  
  8.         {  
  9.             InitializeComponent();  
  10.         }  
  11.     }  
  12. }  
 

MasterDetailsPage

The 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. From here we are going to see how to create hamburgermenu using master details page.

How to use MasterDetails Pag

Add New Model Class and add menu property 

  1. using System;  
  2.   
  3. namespace DevEnvExePages  
  4. {  
  5.     public class Hamburgermenu  
  6.     {  
  7.         public Hamburgermenu(string menuname,string menuicon, Type navigation)  
  8.         {  
  9.             MenuName = menuname;  
  10.             Navigation = navigation;  
  11.             MenuIcon = menuicon;  
  12.         }  
  13.         public string MenuName  
  14.         {  
  15.             get;  
  16.             set;  
  17.         }  
  18.         public string MenuIcon  
  19.         {  
  20.             get;  
  21.             set;  
  22.         }  
  23.         public Type Navigation  
  24.         {  
  25.             get;  
  26.             set;  
  27.         }  
  28.   
  29.     }  
  30.   
  31. }  
Add new HamburgermenuPage inherit ContentPage class.
 
Add Listview Control inside xaml page.
  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="DevEnvExePages.HamburgermenuPage"  
  5.              Padding="0,40,0,0"  
  6.              Icon="hamburger.png" Title="Micrsoft Technology Tips" >  
  7.   <ContentPage.Content>  
  8.     <StackLayout VerticalOptions="FillAndExpand">  
  9.       <ListView x:Name="lstmenu" VerticalOptions="FillAndExpand" SeparatorVisibility="None">  
  10.         <ListView.ItemTemplate>  
  11.           <DataTemplate>  
  12.             <ImageCell Text="{Binding MenuName}" ImageSource="{Binding MenuIcon}" />  
  13.           </DataTemplate>  
  14.         </ListView.ItemTemplate>  
  15.       </ListView>  
  16.     </StackLayout>  
  17.   </ContentPage.Content>  
  18. </ContentPage>  
Add collection of menu item into ListView.
  1. using System.Collections.Generic;  
  2. using Xamarin.Forms;  
  3. namespace DevEnvExePages  
  4. {  
  5.     public partial class HamburgermenuPage : ContentPage  
  6.     {  
  7.         public ListView ListView { get { return lstmenu; } }  
  8.         public HamburgermenuPage()  
  9.         {  
  10.             InitializeComponent();  
  11.             GetMenuItem();  
  12.         }  
  13.        public void GetMenuItem()  
  14.         {  
  15.             var hamburgermenuItems = new List<Hamburgermenu>() { new Hamburgermenu("MSDN","",typeof(MSDN)),  
  16.                 new Hamburgermenu("C# Corner","", typeof(CSharp)),  
  17.                 new Hamburgermenu("Blogs","", typeof(Blogs)),  
  18.                 new Hamburgermenu("About Me","", typeof(AboutMe))  
  19.             };  
  20.             lstmenu.ItemsSource = hamburgermenuItems;  
  21.         }  
  22.     }  
  23. }  

Add new page for detail page and inherit from MasterDetailPage.

Add “Master(HamburgermenuPage)” Page into below Page.
  1. <?xml version="1.0" encoding="utf-8" ?>  
  2. <MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"  
  3.              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
  4.              xmlns:local="clr-namespace:DevEnvExePages;assembly=DevEnvExePages"  
  5.              x:Class="DevEnvExePages.ExMasterDetailPagecs" >  
  6.   <MasterDetailPage.Master>  
  7.     <local:HamburgermenuPage x:Name="hamburgermenuitem" />  
  8.   </MasterDetailPage.Master>  
  9.   <MasterDetailPage.Detail>  
  10.     <NavigationPage>  
  11.       <x:Arguments>  
  12.         <local:AboutMe />  
  13.       </x:Arguments>  
  14.     </NavigationPage>  
  15.   </MasterDetailPage.Detail>  
  16. </MasterDetailPage>  
Create event for listview and implement navigation .
  1. using System;  
  2. using Xamarin.Forms;  
  3.   
  4. namespace DevEnvExePages  
  5. {  
  6.     public partial class ExMasterDetailPagecs : MasterDetailPage  
  7.     {  
  8.         public ExMasterDetailPagecs()  
  9.         {  
  10.             InitializeComponent();  
  11.             hamburgermenuitem.ListView.ItemSelected += OnItemSelected;  
  12.         }  
  13.   
  14.         void OnItemSelected(object sender, SelectedItemChangedEventArgs e)  
  15.         {  
  16.             var item = e.SelectedItem as Hamburgermenu;  
  17.   
  18.             if (item != null)  
  19.             {  
  20.                 Detail = new NavigationPage((Page)Activator.CreateInstance(item.Navigation));  
  21.                   
  22.                 hamburgermenuitem.ListView.SelectedItem = null;  
  23.                 IsPresented = false;  
  24.                   
  25.             }  
  26.         }  
  27.     }  
  28. }  

Xamarin will automatically provide a hamburger menu button within navigation bar.


Similar Articles