Types Of Pages In Xamarin

Introduction

In this article, you are going to learn about Xamarin Pages. Pages are the most essential part of XAML. They are used to design the screen of an application. Here, we are going to discuss some basic ones.

There are multiple types of “Pages” in Xamarin. Pages are a type of a parent object which further contains a child, which can be another Page or a Layout. Following are the common types of Xamarin pages.

Content Page
Master Detail Page
Navigation Page
Tabbed Page
Template Page
Carousel Page

Content Page

A content page is a simple blank page which allows making a single “View” object, which further consists of different layouts like GridLayout and RelativeLayout. The picture below shows a Content Page that includes some text.

XAML Code

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:PracApp1"
x:Class="PracApp1.MainPage">
<!--<StackLayout
BindingContext="{x:Reference Slider}"
VerticalOptions="Center"
HorizontalOptions="Center">
Place new controls here
<BoxView Color="Green" Opacity="{Binding Value}"></BoxView>
<Label x:Name="Label"
Text="{Binding Value,
StringFormat='Value is: {0:F2}'}"
Opacity="{Binding Value}"/>
<Slider x:Name="Slider" Minimum="0" Maximum="100"></Slider>
</StackLayout>-->
<StackLayout Style="{x:DynamicResource ThemeColor}">
<Label TextColor="{x:DynamicResource LabelColor}" HorizontalOptions="Center" VerticalOptions="Center" Text="Welcom To Xamarin.Forms!"></Label>
<Switch
BackgroundColor="{x:DynamicResource LabelColor}"
HorizontalOptions="Center" VerticalOptions="Center"
Toggled="Switch_Toggled"></Switch>
</StackLayout>
</ContentPage>

Master-Detail Page

Master-Detail page consists of two things - Menu which contains a list of pages; and Detail which shows the currently selected state of the page. For creating a master-detail page, simply go to your project and click right to add a new page and select “Master-Detail Page”. In the example below, the left side of the screen consists of the list, each of them contains the detail.

XAML Code

<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="PracApp1.MasterDetailPage1"
xmlns:pages="clr-namespace:PracApp1">
<MasterDetailPage.Master>
<pages:MasterDetailPage1Master x:Name="MasterPage" />
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<NavigationPage>
<x:Arguments>
<pages:MasterDetailPage1Detail />
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Detail>
</MasterDetailPage>

Tabbed Page

Tabbed Page consists of multiple tabs or pages and allows the navigation between each of them. It behaves like a parent and all others are its child. The example below shows the different types of tabbed pages on different devices. You can see on the bottom of iOS and also on the top of Andriod and WinPhone.

XAML Code

<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:PracApp1"
x:Class="PracApp1.MainPage">
<ContentPage BackgroundColor="Red" Title="Tab1">
<Label HorizontalOptions="Center" VerticalOptions="Center" Text="This is Tab 1"></Label>
</ContentPage>
<ContentPage BackgroundColor="Green" Title="Tab2">
<Label HorizontalOptions="Center" VerticalOptions="Center" Text="This is Tab 2"></Label>
</ContentPage>
<ContentPage BackgroundColor="Blue" Title="Tab3">
<Label HorizontalOptions="Center" VerticalOptions="Center" Text="This is Tab 3"></Label>
</ContentPage>
<ContentPage BackgroundColor="Aqua" Title="Tab4">
<Label HorizontalOptions="Center" VerticalOptions="Center" Text="This is Tab 4"></Label>
</ContentPage>
</TabbedPage>

Navigation Page

A Navigation Page simply manages the navigation between the pages. It uses the stack-based architecture and consists of Push and Pop property to navigate through pages. You can add navigation to any type of your page to navigate to another.

Carousel Page

It provides navigation through the pages by swiping right or left. It acts as a base page to the other child pages. The example below demonstrates the Carousel Page and different color pages are its child content pages.

XAML Code

<?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="XamlExample1.MyPage">
<ContentPage>
<StackLayout>
<Label Text="Red" />
<BoxView Color="Red" VerticalOptions="FillAndExpand" />
</StackLayout>
</ContentPage>
<ContentPage>
<StackLayout>
<Label Text="Green" />
<BoxView Color="Green" VerticalOptions="FillAndExpand" />
</StackLayout>
</ContentPage>
<ContentPage>
<StackLayout>
<Label Text="Blue" />
<BoxView Color="Blue" VerticalOptions="FillAndExpand" />
</StackLayout>
</ContentPage>
</CarouselPage>

Template Page

It is the base class for the content page and shows the full screen content with a controlled template. In this, you can design the template of your whole application which includes font sizes, colors and many other styling techniques.

In App.xaml, you can work like this to make a template.

XAML Code

<?xml version="1.0" encoding="utf-8" ?>
<Application xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="PracApp1.App">
<Application.Resources>
<ResourceDictionary>
<ControlTemplate x:Key="TealTemplate">
<Grid>
<BoxView/>
<Label Text="Control Template Demo App"
TextColor="White"
VerticalOptions="Center"/>
<ContentPresenter/>
<BoxView Color="Teal"/>
<Label Text="(c) Xamarin 2016"
TextColor="White"
VerticalOptions="Center" />
</Grid>
</ControlTemplate>
<ControlTemplate x:Key="AquaTemplate">
</ControlTemplate>
</ResourceDictionary>
</Application.Resources>
</Application>

Having good understanding of Pages allows you to design a better UI, and helps you deal with complex designs and create them efficiently. So, this article gives you the basic knowledge about layouts.