Using MasterPage In Xamarin.Form

Introduction

Xamarin is a platform that allows us to create multi-platform mobile applications like Windows phone, Apple iOS, and Android through a single integrated development environment (IDE). We will discuss how to create MasterDetail Page applications from VS2017. There are many plugins available for Xamarin Cross platform including Stack Layout, Label,ScrollView and buttons.

STEP 1

First, select FILE >> NEW >> PROJECT>>Cross Platform App(Xamarin.Form or Native)>>CHANGE YOUR OWN Name then click OK button .

 

Step2

When New Cross Platform App is created then click on BlankApp. We need to select xamarin.forms next select Portable class library (PCL) go to click on button.

 

Step3

Select MaterDetailPageDemo right click to more options available select add option extract to click on New Item…

 

Step4

Next appears New item list and we will select Cross Platform. Then click on Form; then blank content page.Xaml form; then  visual C# change your name and click on OK button

 

Step5

We will select Homepage.Xaml Default Mainpage.Xaml is available but choose a meaningful name for the homepage.

 

I have a code to generate the program otherwise you will prepare own code to generate the program.But you have to create a new one including StackLayout .

Source 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" x:Class="MasterDetailPageDemo.HomePage" BackgroundColor="White"> b
    <StackLayout>
        <Label Text="Home" FontSize="Medium" TextColor="Red" VerticalOptions="Center" HorizontalOptions="Center" />
        <Label Text="All Device Access" TextColor="Gray" FontSize="Medium" FontAttributes="Bold" VerticalOptions="Center" HorizontalOptions="Center" />
        <Button Text="Click" Clicked="Button_Clicked" /> </StackLayout>
</ContentPage>

step6

 

CS Code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
namespace MasterDetailPageDemo {
    public partial class HomePage: ContentPage {
        public HomePage() {
            InitializeComponent();
        }
        private void Button_Clicked(object sender, EventArgs e) {
            DisplayAlert("Alaram", "Main", "Tryagain");
        }
    }
}

Step7

All HomePage t o the MenuPage.Xaml.

 

I have a code to generate the program otherwise you will prepare your own code to generate the program

Xaml Code 

<?xml version="1.0" encoding="utf-8" ?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="MasterDetailPageDemo.MenuPage" xmlns:local="clr-namespace:MasterDetailPageDemo;assembly=MasterDetailPageDemo">
    <MasterDetailPage.Master>
        <ContentPage Title="Menu">
            <StackLayout Orientation="Vertical">
                <Button Text="News" />
                <Button Text="Android" />
                <Button Text="UWP" />
                <Button Text="IOS" />
                <Button Text="WinStore" /> </StackLayout>
        </ContentPage>
    </MasterDetailPage.Master>
    <MasterDetailPage.Detail>
        <local:HomePage/> </MasterDetailPage.Detail>
</MasterDetailPage>

Step8

Then go to the MenuPage.Xaml.cs fill in some condition or content.

 

Source Code 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
namespace MasterDetailPageDemo {
    public partial class MenuPage: MasterDetailPage {
        public MenuPage() {
            InitializeComponent();
        }
    }
}

Step9

Click on calling or App.cs Page. App page is declared within Home Page and Menu page calling condition.So Compile process completes to create a masterpage

 

Code 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

using Xamarin.Forms;

namespace MasterDetailPageDemo
{
    public class App : Application
    {
        public App()
        {
            // The root page of your application
            MainPage = new MenuPage();
        }

        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
        }
    }
}

 

Step10

Then click on Build Button.  Build operation is for sets of packages and compiling processes any error or warning message in the display. 

 

Select your execution part click on the execution devices then compiling and deploy process will start. Connect mobile to computer if needed 

 

Then start deploying 5”Kitkat (4.4)XXHOP phone display just a few seconds  

Click to DisplayAlertMessage 

 

StackLayout including NEW,ANDROID,IOS,UWP,WINSTORE this button will be shown in MenuPage this concept is called MasterPage.

 

Later we will discuss more Xamarin.Form Applications

SUMMARY

In this article, you learned how to create a MasterPage in app using the Xamarin.Forms application development feature of Xamarin with .NET Standard libraries.

If you have any questions/ feedback/ issues, please write in the comment box.