Create main screen, Master-Detail Page – Part 3

All code can be found in my Github repository.

In this part, I’m going to create a main screen for the app and it’s going to be skeleton as some kind of blue·print so we can fill these pages later on with controls and contents.
First of all, you should ask yourself a question:

What is Master-Details page?

According to xamarin.com, 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.
it looks like as shown below:

master-detail

So, what am willing to do is to have the main screen where I can show all the promoted products and any news or trends in the detail page and on the master page i will list all the menu items, and so far am adding these:

  • Home
  • Products
  • Contact us

In summary, the list pages will be like this:

  • MainPage.xaml: MasterDetailPage, is the main container which has the menu (Hamburger menu) and contains Master and Detail properties that are both of type Page and used to get and set the master and detail pages respectively.
  • MasterPage.xaml: page where we will list all the menu items in, and once a user taps on one of these menu items, we will load this page in the detail page.
  • HomePage.xaml: page where I’ll show all the promoted products and any news or trends as mentioned above – this page will be loaded initially in MainPage.
  • ProductsPage.xaml: page where we will show products to be purchased, might contain search functionality and some filtrations.
  • ContactUsPage.xaml: Regular contact us page.

Before we get started on making pages, I would like to make a new folder name it Pages and after that, we shall create page by page (in the part, we will cover main, master and home pages).

MainPage

So on the Pages folder, we right click -> Add -> New file… and then from the forms menu choose Forms ContentPage Xaml, let’s name it MainPage.xaml
In this page, you can write the following XAML code:

<?xml version=1.0 encoding=UTF8?>
<MasterDetailPage
        xmlns=http://xamarin.com/schemas/2014/forms
        xmlns:x=http://schemas.microsoft.com/winfx/2009/xaml
        x:Class=PuzzlersJordan.MainPage
        xmlns:local=clrnamespace:PuzzlersJordan;assembly=PuzzlersJordan
        Title=Main>
    <MasterDetailPage.Master>
        <local:MasterPage x:Name=masterPage>
        </local:MasterPage>
    </MasterDetailPage.Master>
    <MasterDetailPage.Detail>
        <NavigationPage>
            <x:Arguments>
                <local:HomePage />
            </x:Arguments>
        </NavigationPage>
    </MasterDetailPage.Detail>
</MasterDetailPage>

you can find in this XAML code that there is unusual declaration shown in below line:

xmlns:local=clrnamespace:PuzzlersJordan;assembly=PuzzlersJordan

This line is a reference declaration to the current assembly in order to reference any class found in the assembly, to reference any class you should use the local keyword as shown below:

  <local:MasterPage x:Name=masterPage>
  </local:MasterPage>

Or in:

<local:HomePage />

So to set MasterDetailPage.Master property we assign MasterPage to it and we gave it a name which is masterPage (so we can call it from the code behind).
On the other hand, for the detail property, we set a navigation page with a root page Home page.

So for the code behind, open MainPage.xaml.cs and the code should look like below:

using System;
using System.Collections.Generic;

using Xamarin.Forms;

namespace PuzzlersJordan
{
    public partial class MainPage : MasterDetailPage
    {
        public MainPage()
        {
            InitializeComponent();
            masterPage.masterMenuList.ItemSelected += OnItemSelected;
        }

        void OnItemSelected(object sender, SelectedItemChangedEventArgs e)
        {
            var item = e.SelectedItem as MasterPageItem;
            if (item != null)
            {
                Detail = new NavigationPage((Page)Activator.CreateInstance(item.TargetType));
                masterPage.masterMenuList.SelectedItem = null;
                IsPresented = false;
            }
        }
    }
}

In the constructor, we accessed masterPage and then an instance of the masterMenuList (which is a listView that we will talk about later) to assign an event handler whenever a user taps on any of the menu items (item get selected).
So what we’re going to do is when the user taps on the menu item we will take the corresponding page and load it on the detail property and set selectedItem to null so it won’t be highlighted.

MasterPage

It’s the left menu that has all the menu items, UI wise it’s just a contentPage that has a simple StackLayout with some decoration properties shown below:

<?xml version=1.0 encoding=UTF8?>
<ContentPage xmlns=http://xamarin.com/schemas/2014/forms xmlns:x=http://schemas.microsoft.com/winfx/2009/xaml x:Class=PuzzlersJordan.MasterPage Padding=0,40,0,0 Icon=Hamburger Title=Menu>
    <ContentPage.Content>
        <StackLayout VerticalOptions=FillAndExpand>
            <ListView x:Name=MenuListView VerticalOptions=FillAndExpand SeparatorVisibility=None>
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <TextCell Text={Binding Title} TextColor=#a9d300 />
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Let’s talk a little bit about the code above:

  • Content page with padding of 40 points from the top and a must have title.
  • Set the icon of Hamburger which comes for free with android but we have to set it manually on iOS (follow this tutorial in order to do that).
  • We have ListView control with a data template to bind data from item class.

As for the code behind:

using System;
using System.Collections.Generic;

using Xamarin.Forms;

namespace PuzzlersJordan
{
    public class MasterPageItem
    {
        public string Title { get; set;}
        public Type TargetType { get; set; }

    }

    public partial class MasterPage : ContentPage
    {

        public ListView masterMenuList
        {
            get
            {
                return MenuListView;
            }
        }

        public MasterPage()
        {
            InitializeComponent();
            var masterPageItems = new List<MasterPageItem>();

            masterPageItems.Add(new MasterPageItem
            {
                Title = Home,
                TargetType = typeof(HomePage)
            });

            masterPageItems.Add(new MasterPageItem
            {
                Title = Products,
                TargetType = typeof(ProductsPage)
            });

            masterPageItems.Add(new MasterPageItem
            {
                Title = Contact us,
                TargetType = typeof(ContactUsPage)
            });

            MenuListView.ItemsSource = masterPageItems;
        }
    }
}

I declared a simple class (MasterPageItem) with two properties Title and TargetType. On the constructor, filled out a list of menu items in the new instance of a list of MasterPageItem and assigned it to the ItemSource.

HomePage

Just an empty content page that we will work on it later, but we need it here just to not break the detail page on MainPage.

One thought on “Create main screen, Master-Detail Page – Part 3

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s