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.

<?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="DevEnvExePages.AboutMe">
<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)"
HorizontalOptions="Center" />
</ContentPage>

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

Blogs.Xaml

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

Csharp.xaml

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

MSDN.xaml

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

<?xml version="1.0" encoding="utf-8" ?>
<CarouselPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="DevEnvExePages.ExCarouselPage">
<ContentPage>
<StackLayout>
<WebView Source="https://social.msdn.microsoft.com/profile/j%20suthahar/" HeightRequest="592" HorizontalOptions="Center"/>
</StackLayout>
</ContentPage>
<ContentPage>
<StackLayout>
<WebView Source="http://www.devenvexe.com" HeightRequest="592" HorizontalOptions="Center"/>
</StackLayout>
</ContentPage>
<ContentPage>
<StackLayout>
<WebView Source="http://www.c-sharpcorner.com/members/suthahar-j" HeightRequest="592" HorizontalOptions="Center"/>
</StackLayout>
</ContentPage>
</CarouselPage>

using Xamarin.Forms;
namespace DevEnvExePages
{
public partial class ExCarouselPage : CarouselPage
{
public ExCarouselPage()
{
InitializeComponent();
}
}
}

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.

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:DevEnvExePages;assembly=DevEnvExePages"
x:Class="DevEnvExePages.ExTabbedPage">
<NavigationPage Title="AboutMe">
<x:Arguments>
<local:AboutMe />
</x:Arguments>
</NavigationPage>
<NavigationPage Title="Blogs">
<x:Arguments>
<local:Blogs />
</x:Arguments>
</NavigationPage>
<NavigationPage Title="MSDN">
<x:Arguments>
<local:MSDN />
</x:Arguments>
</NavigationPage>
<NavigationPage Title="C# Corner">
<x:Arguments>
<local:CSharp />
</x:Arguments>
</NavigationPage>
</TabbedPage >

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

<TabbedPage.Children>
<local:AboutMe Icon="icon.png" /> // Adding page
<ContentPage Title="cSharp" Icon="icon.png" > // Adding custom template
<StackLayout>
<WebView Source="http://www.c-sharpcorner.com/members/suthahar-j" HeightRequest="592" HorizontalOptions="Center"/>
</StackLayout>
</ContentPage>
<ContentPage Title="MSDN" Icon="icon.png" />
</TabbedPage.Children>

using Xamarin.Forms;
namespace DevEnvExePages
{
public partial class ExTabbedPage : TabbedPage
{
public ExTabbedPage()
{
InitializeComponent();
}
}
}

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

using System;
namespace DevEnvExePages
{
public class Hamburgermenu
{
public Hamburgermenu(string menuname,string menuicon, Type navigation)
{
MenuName = menuname;
Navigation = navigation;
MenuIcon = menuicon;
}
public string MenuName
{
get;
set;
}
public string MenuIcon
{
get;
set;
}
public Type Navigation
{
get;
set;
}
}
}

Add new HamburgermenuPage inherit ContentPage class.

Add Listview Control inside xaml 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="DevEnvExePages.HamburgermenuPage"
Padding="0,40,0,0"
Icon="hamburger.png" Title="Micrsoft Technology Tips" >
<ContentPage.Content>
<StackLayout VerticalOptions="FillAndExpand">
<ListView x:Name="lstmenu" VerticalOptions="FillAndExpand" SeparatorVisibility="None">
<ListView.ItemTemplate>
<DataTemplate>
<ImageCell Text="{Binding MenuName}" ImageSource="{Binding MenuIcon}" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage.Content>
</ContentPage>

Add collection of menu item into ListView.

using System.Collections.Generic;
using Xamarin.Forms;
namespace DevEnvExePages
{
public partial class HamburgermenuPage : ContentPage
{
public ListView ListView { get { return lstmenu; } }
public HamburgermenuPage()
{
InitializeComponent();
GetMenuItem();
}
public void GetMenuItem()
{
var hamburgermenuItems = new List<Hamburgermenu>() { new Hamburgermenu("MSDN","",typeof(MSDN)),
new Hamburgermenu("C# Corner","", typeof(CSharp)),
new Hamburgermenu("Blogs","", typeof(Blogs)),
new Hamburgermenu("About Me","", typeof(AboutMe))
};
lstmenu.ItemsSource = hamburgermenuItems;
}
}
}

Add new page for detail page and inherit from MasterDetailPage.

Add “Master(HamburgermenuPage)” Page into below Page.

<?xml version="1.0" encoding="utf-8" ?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:DevEnvExePages;assembly=DevEnvExePages"
x:Class="DevEnvExePages.ExMasterDetailPagecs" >
<MasterDetailPage.Master>
<local:HamburgermenuPage x:Name="hamburgermenuitem" />
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<NavigationPage>
<x:Arguments>
<local:AboutMe />
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Detail>
</MasterDetailPage>

Create event for listview and implement navigation .

using System;
using Xamarin.Forms;
namespace DevEnvExePages
{
public partial class ExMasterDetailPagecs : MasterDetailPage
{
public ExMasterDetailPagecs()
{
InitializeComponent();
hamburgermenuitem.ListView.ItemSelected += OnItemSelected;
}
void OnItemSelected(object sender, SelectedItemChangedEventArgs e)
{
var item = e.SelectedItem as Hamburgermenu;
if (item != null)
{
Detail = new NavigationPage((Page)Activator.CreateInstance(item.Navigation));
hamburgermenuitem.ListView.SelectedItem = null;
IsPresented = false;
}
}
}
}

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

9 Comments

Join the conversation! Your thoughts help the community grow.

Gray Hattus8y ago
Why is your download 48.1 MB? Recommend trimming out the unneeded content.
- Gray Hattus8y ago
  After removing the bin/obj/.vs folders it's now 70.6 KB. Just food for thought. Nice example still
- Suthahar Jegatheesan8y ago
  Hello John , Welcome to c# Corner . Thanks for your feedback .I will clean and upload from next article :)
Ajay Singh9y ago
Thanks you.. Its very helpfull.
Joe Wilson10y ago
Thank you very much for your answer.
Marcos Casor10y ago
Good explanation, Very helpful, thank you.
C# Corner10y ago
Good article. Thank you. Is it possible to CarousaelPage with webviews (multiply browsers) >I mean to swipe throw webviews very similar like in gmail.app.
- C# Corner10y ago
  Yes, that's exactly what I am trying.
- Suthahar Jegatheesan10y ago
  Hi marek, Do you mean List View item horizontal swipes?