How To Create Pages Of Different Kinds In Xamarin

Introduction

This article tells you about how to create pages in Xamarin, how to work with them, and how they differentiate from each other.

Targeted Audience

People with the basic knowledge of C# and Xamarin.

Tools

Visual Studio with Xamarin installed.

ContentPage

ContentPage is a simple blank page which allows making a single “View” object. It further consists of different layouts like AbsoluteLayout and StackLayout. The example below shows the ContentPage having a label.

 

Remember that a ContentPage can have only one child at a time. If you try to add another one, it will result in an error. To add more children, you can use layouts, which allows the addition of multiple children. You can add a Button, Entry, Label, Image, or any other type of View as you want. Also, you can set colors, background colors, and other styles.

XAML Code

<?xml version="1.0" encoding="utf-8" ?>
<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">
    <Label HorizontalOptions="Center" VerticalOptions="Center" Text="Label"></Label>
</ContentPage>

C# Code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace PracApp1
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();

        }
    }
}

TabbedPage

TabbedPage contains multiple tabs and detailed areas for each of them. Each tab loads its contents into the detail area. You can navigate between these tabs. It is necessary to add navigation between pages in most of the cases but for this example, we are using a simple tabbed page. The picture below shows a tabbed page with four tabs and the detail area.

 

 

The tab of a tabbed page can consist of a content page or any other page. So, you can work any way you want in that.

XAML Code

<?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: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>

C# Code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace PracApp1
{
    public partial class MainPage : TabbedPage
    {
        public MainPage()
        {
            InitializeComponent();
        }
    }
}

MasterDetailPage

MasterDetail Page consists of a master portion which is normally on the left side of the screen and consists of a list of menus. Each of them contains the detail section just like the TabbedPage. MasterDetailPage is pretty similar to the TabbedPage but in TabbedPage, you make pages within the TabbedPage while in MasterDetailPage, you code for the Master and the Detail portion separately. You have to add references for each of the pages to the master portion which further navigates on clicking to the targeted page. It sounds very difficult but it's easy to make it now because Visual Studio gives an option to build MasterDetailPage. You have to follow the following steps.

• Open Visual Studio and create a new project. Select cross-platform and click OK.
  
  
  
  
• When the pop up opens to ask for the page type, select MasterDetailPage and click OK. The page will automatically get created; you have to do nothing to build it.
  
  
  
  
• When the project is created, it will look like the picture below.
  
  

The master portion is already linked with the view:MenuPage file and the Detail portion with the view:ItemPage file. You can simply write the code for the master in the MenuPage.xaml.

CarouselPage

CarouselPage allows you to swipe left or right to navigate through the pages. It is also similar to the TabbedPage but does not consist of tabs. Simply, create some pages according to your need and go to App.cs to add them to the CarouselPage. The code below shows you how to easily create a CarouselPage.

XAML Code

<?xml version="1.0" encoding="utf-8" ?>
<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"
             BackgroundColor="Red">

    <ContentPage.Content>
        <StackLayout>
            <Label Text="This is Page 1"
                VerticalOptions="CenterAndExpand"
                HorizontalOptions="CenterAndExpand" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

For second 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="PracApp1.Page1"
             BackgroundColor="Green">
    <ContentPage.Content>
        <StackLayout>
            <Label Text="This is Page 2"
                VerticalOptions="CenterAndExpand"
                HorizontalOptions="CenterAndExpand" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

For third 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="PracApp1.Page2"
             BackgroundColor="Blue">
    <ContentPage.Content>
        <StackLayout>
            <Label Text="Welcome to Xamarin.Forms!"
                VerticalOptions="CenterAndExpand"
                HorizontalOptions="CenterAndExpand" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

C# Code

using System;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;

[assembly: XamlCompilation(XamlCompilationOptions.Compile)]
namespace PracApp1
{
    public partial class App : Application
    {
        public App()
        {
            InitializeComponent();

            //MainPage = new MainPage();
            CarouselPage carouselPage = new CarouselPage();
            carouselPage.Children.Add(new MainPage());
            carouselPage.Children.Add(new Page1());
            carouselPage.Children.Add(new Page2());

            MainPage = carouselPage;
        }

        protected override void OnStart()
        {
            // Handle when your app starts
        }

        protected override void OnSleep()
        {
            // Handle when your app sleeps
        }

        protected override void OnResume()
        {
            // Handle when your app resumes
        }
    }
}

Summary

This article demonstrated how to make different kinds of pages in Xamarin and what are the differences between them. I hope this will help you to know how to make pages, with a better understanding.