Post
Ask Question

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.

  1. Content Page
  2. Master Detail Page
  3. Navigation Page
  4. Tabbed Page
  5. Template Page
  6. Carousel Page
Types Of Pages In Xamarin

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.

Types Of Pages In Xamarin 

XAML Code

  1. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"  
  2.              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
  3.              xmlns:local="clr-namespace:PracApp1"  
  4.              x:Class="PracApp1.MainPage">  
  5.     <!--<StackLayout   
  6.                  BindingContext="{x:Reference Slider}"  
  7.                  VerticalOptions="Center"   
  8.                  HorizontalOptions="Center">  
  9.         Place new controls here  
  10.         <BoxView Color="Green" Opacity="{Binding Value}"></BoxView>  
  11.         <Label x:Name="Label"   
  12.                Text="{Binding Value,   
  13.                StringFormat='Value is: {0:F2}'}"   
  14.                Opacity="{Binding Value}"/>  
  15.         <Slider x:Name="Slider" Minimum="0" Maximum="100"></Slider>  
  16.     </StackLayout>-->  
  17.     <StackLayout Style="{x:DynamicResource ThemeColor}">  
  18.         <Label TextColor="{x:DynamicResource LabelColor}" HorizontalOptions="Center" VerticalOptions="Center" Text="Welcom To Xamarin.Forms!"></Label>  
  19.         <Switch   
  20.             BackgroundColor="{x:DynamicResource LabelColor}"   
  21.             HorizontalOptions="Center" VerticalOptions="Center"   
  22.             Toggled="Switch_Toggled"></Switch>  
  23.     </StackLayout>  
  24. </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.

Types Of Pages In Xamarin 

XAML Code

  1. <MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"  
  2.              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
  3.              x:Class="PracApp1.MasterDetailPage1"  
  4.              xmlns:pages="clr-namespace:PracApp1">  
  5.   <MasterDetailPage.Master>  
  6.     <pages:MasterDetailPage1Master x:Name="MasterPage" />  
  7.   </MasterDetailPage.Master>  
  8.   <MasterDetailPage.Detail>  
  9.     <NavigationPage>  
  10.       <x:Arguments>  
  11.         <pages:MasterDetailPage1Detail />  
  12.       </x:Arguments>  
  13.     </NavigationPage>  
  14.   </MasterDetailPage.Detail>  
  15. </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.

Types Of Pages In Xamarin 

XAML Code

  1. <TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"  
  2.              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
  3.              xmlns:local="clr-namespace:PracApp1"  
  4.              x:Class="PracApp1.MainPage">  
  5.   
  6.     <ContentPage BackgroundColor="Red" Title="Tab1">  
  7.         <Label HorizontalOptions="Center" VerticalOptions="Center" Text="This is Tab 1"></Label>  
  8.     </ContentPage>  
  9.   
  10.     <ContentPage BackgroundColor="Green" Title="Tab2">  
  11.         <Label HorizontalOptions="Center" VerticalOptions="Center" Text="This is Tab 2"></Label>  
  12.     </ContentPage>  
  13.   
  14.     <ContentPage BackgroundColor="Blue" Title="Tab3">  
  15.         <Label HorizontalOptions="Center" VerticalOptions="Center" Text="This is Tab 3"></Label>  
  16.     </ContentPage>  
  17.   
  18.     <ContentPage BackgroundColor="Aqua" Title="Tab4">  
  19.         <Label HorizontalOptions="Center" VerticalOptions="Center" Text="This is Tab 4"></Label>  
  20.     </ContentPage>  
  21.   
  22. </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.

Types Of Pages In Xamarin 

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.

Types Of Pages In Xamarin 

XAML Code

  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <CarouselPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="XamlExample1.MyPage">  
  3.     <ContentPage>  
  4.         <StackLayout>  
  5.             <Label Text="Red" />  
  6.             <BoxView Color="Red" VerticalOptions="FillAndExpand" />  
  7.         </StackLayout>  
  8.     </ContentPage>  
  9.     <ContentPage>  
  10.         <StackLayout>  
  11.             <Label Text="Green" />  
  12.             <BoxView Color="Green" VerticalOptions="FillAndExpand" />  
  13.         </StackLayout>  
  14.     </ContentPage>  
  15.     <ContentPage>  
  16.         <StackLayout>  
  17.             <Label Text="Blue" />  
  18.             <BoxView Color="Blue" VerticalOptions="FillAndExpand" />  
  19.         </StackLayout>  
  20.     </ContentPage>  
  21. </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.

Types Of Pages In Xamarin 

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

XAML Code

  1. <?xml version="1.0" encoding="utf-8" ?>  
  2. <Application xmlns="http://xamarin.com/schemas/2014/forms"  
  3.              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
  4.              x:Class="PracApp1.App">  
  5.     <Application.Resources>  
  6.         <ResourceDictionary>  
  7.             <ControlTemplate x:Key="TealTemplate">  
  8.                 <Grid>  
  9.                     <BoxView/>  
  10.                     <Label Text="Control Template Demo App"  
  11.                            TextColor="White"  
  12.                            VerticalOptions="Center"/>  
  13.                     <ContentPresenter/>  
  14.                     <BoxView Color="Teal"/>  
  15.                     <Label Text="(c) Xamarin 2016"  
  16.                            TextColor="White"  
  17.                            VerticalOptions="Center" />  
  18.                 </Grid>  
  19.             </ControlTemplate>  
  20.             <ControlTemplate x:Key="AquaTemplate">  
  21.             </ControlTemplate>  
  22.         </ResourceDictionary>  
  23.     </Application.Resources>  
  24. </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.


Similar Articles