Developing a Simple Resume App with Xamarin.Forms and CSharp

In this article, we will learn about what MasterDetailPage in Xamarin.Forms is and what purpose does it resolve. We will implement MasterDetailPage in the practical demonstration and create a small resume mobile app with Xamarin.Forms.

In Xamarin.Forms, MasterDetailPage is a kind of page, which contains master and detail both type of information. Master part of the MasterDetailPage keeps the information about a master thing, which is accessible from any of the detail page whereas Detail part of the MasterDetailPage keeps the information about the detail page, means it contains the individual page information. Master Page is always with Content Page. It means, master part of the MasterDetailPage contains a list of item and detail part of MasterDetailPage contains the more information about that particular list item.

For example, you have seen many apps, which has navigation links or menus, logo or some other information that are available on each page. Therefore, here menus are master part and page is detail part.

So, we have learned about basic of MasterDetailPage in Xamarin.Forms. Now it's time to move to a practical demonstration where we learn how to use MasterDetailPage in Xamarin.Forms while creating a mobile app. Let's create a new Xamarin.Forms project in Visual Studio 2017. To create new Xamarin.Forms project, Open Visual Studio 2017 > Go to File menu and select New and then Project. The New Project will be opened as follows.  From the installed template > select Visual C# > Cross-Platform > Cross-Platform-App (Xamarin.Forms or Native).  Then provide the name of the project (FirstNativeApp) and save location for the project and OK. From the next screen, we have to choose "Black App" as a new cross-platform app template.

Know more from here to Build Native Cross-platform Apps with Xamarin Forms and Visual Studio.

Once the project is ready, just move to shared project where we will find "MainPage.xaml" and "MainPage.xaml.cs" file as follows.

MainPage.xaml

<?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:FirstNativeApp"
             x:Class="FirstNativeApp.MainPage">

	<Label Text="Welcome to First Native Xamarin Forms App!" 
           VerticalOptions="Center" 
           HorizontalOptions="Center" />

</ContentPage>

MainPage.xaml.cs

using Xamarin.Forms;

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

As we can see with above code by default MainPage.xaml is using ContentPage template. To use master detail page template, we have to change "ContentPage" with "MasterDetailPage" as follows. As we have already known that "MasterDetailPage" contains two part, first one to show master the detail as "MasterDetailPage.Master" and another one is to show the detail about master data as "MasterDetailPage.Detail". So, now modify MainPage.xaml with following codes.

Please note to be here that ContentPage should always decorate with the Title attribute, otherwise it will throw an exception.

MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:FirstNativeApp"
             x:Class="FirstNativeApp.MainPage">

    <MasterDetailPage.Master>
        <ContentPage Title="Master" Padding="15">
            <ContentPage.Content>
                <StackLayout Margin="10">
                    <Label Text="Master Page Items"></Label>
                </StackLayout>
            </ContentPage.Content>
        </ContentPage>
    </MasterDetailPage.Master>

    <MasterDetailPage.Detail>
        <ContentPage Title="Content" Padding="15">
            <ContentPage.Content>
                <StackLayout Margin="10">
                    <Label Text="Content Page Items"></Label>
                </StackLayout>
            </ContentPage.Content>
        </ContentPage>
    </MasterDetailPage.Detail>

</MasterDetailPage>

As we have modified our MainPage.xaml to use MasterDetailPage rather than ContentPage. Same we have to modify in the class file of MainPage.xaml and inherited ContentPage should replace with MasterDetailPage. We can see with the code as follows, now MainPage class is inheriting MasterDetailPage.

MainPage.xaml.cs

using Xamarin.Forms;

namespace FirstNativeApp
{
    public partial class MainPage : MasterDetailPage
	{
		public MainPage()
		{
			InitializeComponent();
		}
	}
}

Now we have the project ready with MasterDetailPage. So, let's run it and see the output. To run it, first be sure that "Android" project should be set up as "startup project" and then choose the emulator for running the app. Here we have chosen "Visual Studio Android-23 x86" Emulator. Once we run and if everything works fine then our output for the MasterDetailPage will be as follows [See the image below].

Here we can see master-detail page contains the item as master data. By default, this master screen will not be populated. To see master data, we have to swipe the menu from left to right. Yet we don't have configured the menu button for toggling the menu. But yes, at the last of this demonstration, we will definitely configure the menu button.

This will be our default screen page for Detail Data. Here data will be populated for which we have chosen from the Master Data.

So, till now, we have set up small content to understand Master data and Detail data. Let's move to understand it in a broad way to create a Resume app. 

First, we will create the menu inside the master data of MasterDetailPage. To create a dynamic menu, we are creating a class "MasterMenuItems" as follows which will contain the Text for the menu, some basic detail as Detail, ImagePath for showing the menu icon and TargetPage which will keep the information of the page where should be navigated when clicking to a menu.

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

namespace FirstNativeApp.Entity
{
    public class MasterMenuItems
    {
        public string Text { get; set; }
        public string Detail { get; set; }
        public string ImagePath { get; set; }
        public Type TargetPage { get; set; }
    }
}

We need some pages which should be opened while clicking on different menu items. Here we are going to create four page as "AboutPage", "ExperiencePage", "AchievemnetsPage" and "SkillsPage". To add a new page inside the shared project, first, create a folder name as "Views" and right click to "Views" folder and choose "Add" > "Add New Item". Next screen will be for "Add New Item" here from the Visual C# section, we have to choose "Forms Blank Content Page Xaml" and provide the name for the page and click to OK.

We will repeat this process four times to add four pages as we have discussed above.

Now it's time to think about the icon for the menu. To show icons for the menu inside the Master Data, we are downloading some icon a .png file from google and put it inside the Drawable folder of Resource folder in Android project. When Icons and pages are ready then our project structure will be similar to as follows

So, now once more we will change our MainPage.xaml page. Open MainPage.xaml page and inside the master part of the MasterDetailPage, add a "ListView" which have a name and an event for selecting any menu item from the list. Inside the ItemTemplate of ListView, we will decorate it with ImageCell, where we will bind dynamic Text for it, Detail and Image data for an icon.

For detail part of MasterDetailPage, we will keep only <NavigationPage> tag, which will render dynamic page inside it. So, finally, we have to change the whole MainPage.xaml code with the code a follows

<?xml version="1.0" encoding="utf-8" ?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:FirstNativeApp"
             x:Class="FirstNativeApp.MainPage"
             xmlns:pages="clr-namespace:FirstNativeApp"
             MasterBehavior="Popover" Title="Mukesh Kumar Resume">

    <MasterDetailPage.Master>
        <ContentPage Title="Menu" BackgroundColor="LightCyan" Padding="10">
            <ContentPage.Content>
                <StackLayout Margin="10" Orientation="Vertical">                    
                    <Image x:Name="profileImage"></Image>
                    <ListView x:Name="aboutList" ItemSelected="OnMenuItemSelected">>
                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <ImageCell Text="{Binding Text}" Detail="{Binding Detail}"
                                           ImageSource="{Binding ImagePath}">
                                </ImageCell>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
                </StackLayout>
            </ContentPage.Content>
        </ContentPage>
    </MasterDetailPage.Master>

    <MasterDetailPage.Detail>
        <NavigationPage></NavigationPage>
    </MasterDetailPage.Detail>

</MasterDetailPage>

Now let's move to the code behind or class file of MainPage.xaml. First of all, we are loading and binding profile image from live URL. After that, we are binding the dynamic menu generated by the method "GetMenuList()" with aboutList [ListView Name] item source. Once menu will be set up and after that, we have to set the first page as "AboutPage". Here we are setting the value of IsPresented as false, it is because we don't want to be opened menu by default. We would like to show About page as home page.

One more thing, we are implementing in the class and that has an event when selecting any menu from the list. In OnMenuItemSelected event, we are getting the selected menu and set it as for Detail page.

using FirstNativeApp.Entity;
using FirstNativeApp.Views;
using System;
using System.Collections.Generic;
using Xamarin.Forms;

namespace FirstNativeApp
{
    public partial class MainPage : MasterDetailPage
    {        
        public MainPage()
        {
            InitializeComponent();
            profileImage.Source = ImageSource.FromUri(new Uri("http://www.programmingwithmukesh.com/Content/img/users/Mukesh%20Kumar.jpg"));

            aboutList.ItemsSource = GetMenuList();
           
            var homePage = typeof(AboutPage);
            Detail = new NavigationPage((Page)Activator.CreateInstance(homePage));          

            IsPresented = false;
        }

        public List<MasterMenuItems> GetMenuList()
        {
            var list = new List<MasterMenuItems>();

            list.Add(new MasterMenuItems()
            {
                Text = "About",
                Detail = "Basic Info",
                ImagePath = "about.png",
                TargetPage = typeof(AboutPage)
            });

            list.Add(new MasterMenuItems()
            {
                Text = "Experiences",
                Detail = "Something More",
                ImagePath = "experience.png",
                TargetPage = typeof(ExperiencePage)
            });

            list.Add(new MasterMenuItems()
            {
                Text = "Skils",
                Detail = "Known Technologies",
                ImagePath = "skills.png",
                TargetPage = typeof(SkillsPage)
            });

            list.Add(new MasterMenuItems()
            {
                Text = "Awards",
                Detail = "Achievements",
                ImagePath = "achievements.png",
                TargetPage = typeof(AchievementsPage)
            });
            return list;
        }

        private void OnMenuItemSelected(object sender, SelectedItemChangedEventArgs e)
        {

            var selectedMenuItem = (MasterMenuItems)e.SelectedItem;
            Type selectedPage = selectedMenuItem.TargetPage;
            Detail = new NavigationPage((Page)Activator.CreateInstance(selectedPage));
            IsPresented = false;
        }
    }
}

AboutPage.xaml

This is about page where we are using StackLayout to show the data with Center alignment. First, we have profile image, we are setting value for it on MainPage.xaml.cs. Apart from this, we have two labels with different colors.

<?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="FirstNativeApp.Views.AboutPage" Title="About Mukesh Kumar">
    <ContentPage.Content>
        <StackLayout HorizontalOptions="Center" Margin="20">
            <Image x:Name="profileImage"></Image>
            <Label Text="About" Font="20" TextColor="Blue" HorizontalTextAlignment="Center"></Label>
            <Label Text="Microsoft MVP, C# Corner MVP, Technology Lover, Blogger and Software Developer!!" 
                   TextColor="Black" HorizontalTextAlignment="Center"></Label>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

ExperiencePage.xaml

This is our second dynamic page which will show the something about experience and all. 

<?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="FirstNativeApp.Views.ExperiencePage" Title="Mukesh Kumar's Experience">
    <ContentPage.Content>
        <StackLayout HorizontalOptions="Center" Margin="10">
            <Label Text="Experiences" Font="20" TextColor="Blue" HorizontalTextAlignment="Center"></Label>
            <Label Text="More than 5+ Years of experience as a Software Developer in IT! " 
                   TextColor="Black" HorizontalTextAlignment="Center"></Label>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

SkillsPage.xaml

Here on this page, we will show the list of technologies known by the user.

<?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="FirstNativeApp.Views.SkillsPage" Title="Mukesh Kumar's Skills">
    <ContentPage.Content>
        <StackLayout HorizontalOptions="Center" Margin="10">
            <Label Text="Known Technologies" Font="20" TextColor="Blue" HorizontalTextAlignment="Center"></Label>
            <Label Text="C#, .Net Framework, Asp.Net, MVC, Entity Framework, Asp.Net Core, Web API, Angular 1.x, Angular 2+, SQL, Oracle, Visual Studio, Node.JS, Azure, Git" 
                   TextColor="Black" HorizontalTextAlignment="Center"></Label>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

AchievementsPage.xaml

This page will show the list of achievements and awards for the user.

<?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="FirstNativeApp.Views.AchievementsPage" Title="Mukesh Kumar's Achievements">
    <ContentPage.Content>
        <StackLayout HorizontalOptions="Center" Margin="20">
            <Label Text="Awards" Font="20" TextColor="Blue" HorizontalTextAlignment="Center"></Label>
            <Label Text="Microsoft MVP 2016" TextColor="Black" HorizontalTextAlignment="Start"></Label>
            <Label Text="C# Corner MVP 2018" TextColor="Black" HorizontalTextAlignment="Start"></Label>
            <Label Text="C# Corner MVP 2016" TextColor="Black" HorizontalTextAlignment="Start"></Label>
            <Label Text="C# Corner MVP 2015" TextColor="Black" HorizontalTextAlignment="Start"></Label>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Now let run the project, When we run the project, we will get the output something like as follows. the first image shows about the menu and the second image shows about first default page as About Page.

When we select an experience from the Master menu, experience page will be opened as follows.

When we select Skills from the Master menu, Skills Page will be opened as follows which shows the list of skills which are known by the user.

If we select the Achievements from the Master menu, Achievements Page will be opened as follows which shows about the experience of the user.

Conclusion

So, today we have seen how we can use MasterDetailPage Xamarin.Forms and create a simple resume app with the dynamic menu and dynamic pages.

I hope this post will help you. Please put your feedback using comment which helps me to improve myself for next post. If you have any doubts please ask your doubts or query in the comment section and If you like this post, please share it with your friends. Thanks