Post
Ask Question

Simple Resume Mobile App With Xamarin.Forms Master-Detail Page And C#

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

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

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

So, we have learned about the basics 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 click 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

  1. <?xml version="1.0" encoding="utf-8" ?>  
  2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"  
  3.              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
  4.              xmlns:local="clr-namespace:FirstNativeApp"  
  5.              x:Class="FirstNativeApp.MainPage">  
  6.   
  7.     <Label Text="Welcome to First Native Xamarin Forms App!"   
  8.            VerticalOptions="Center"   
  9.            HorizontalOptions="Center" />  
  10.   
  11. </ContentPage>  

MainPage.xaml.cs

  1. using Xamarin.Forms;  
  2.   
  3. namespace FirstNativeApp  
  4. {  
  5.     public partial class MainPage : ContentPage  
  6.     {  
  7.         public MainPage()  
  8.         {  
  9.             InitializeComponent();  
  10.         }  
  11.     }  
  12. }  

As we can see with the above code, by default MainPage.xaml is using the 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 parts, the first one to show is "MasterDetailPage.Master" and another one is to show the detail about master data as "MasterDetailPage.Detail". So, now modify MainPage.xaml with the following codes.

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

MainPage.xaml

  1. <?xml version="1.0" encoding="utf-8" ?>  
  2. <MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"  
  3.              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
  4.              xmlns:local="clr-namespace:FirstNativeApp"  
  5.              x:Class="FirstNativeApp.MainPage">  
  6.   
  7.     <MasterDetailPage.Master>  
  8.         <ContentPage Title="Master" Padding="15">  
  9.             <ContentPage.Content>  
  10.                 <StackLayout Margin="10">  
  11.                     <Label Text="Master Page Items"></Label>  
  12.                 </StackLayout>  
  13.             </ContentPage.Content>  
  14.         </ContentPage>  
  15.     </MasterDetailPage.Master>  
  16.   
  17.     <MasterDetailPage.Detail>  
  18.         <ContentPage Title="Content" Padding="15">  
  19.             <ContentPage.Content>  
  20.                 <StackLayout Margin="10">  
  21.                     <Label Text="Content Page Items"></Label>  
  22.                 </StackLayout>  
  23.             </ContentPage.Content>  
  24.         </ContentPage>  
  25.     </MasterDetailPage.Detail>  
  26.   
  27. </MasterDetailPage>  

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

MainPage.xaml.cs

  1. using Xamarin.Forms;  
  2.   
  3. namespace FirstNativeApp  
  4. {  
  5.     public partial class MainPage : MasterDetailPage  
  6.     {  
  7.         public MainPage()  
  8.         {  
  9.             InitializeComponent();  
  10.         }  
  11.     }  
  12. }  

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 it and if everything works fine then our output for the MasterDetailPage will be as follows [See the image below].

Here we can see that the 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 the menu button configured  for toggling the menu. But yes, at the end of this demonstration, we will definitely configure the menu button.

Note
You will get this exception if you're not setting the Title attribute for ContentPage "System.Reflection.TargetInvocationException: Exception has been thrown by the target of an invocation".

Xamarin

 

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

Xamarin

 

So far, we have set up some 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.

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Text;  
  4.   
  5. namespace FirstNativeApp.Entity  
  6. {  
  7.     public class MasterMenuItems  
  8.     {  
  9.         public string Text { get; set; }  
  10.         public string Detail { get; set; }  
  11.         public string ImagePath { get; set; }  
  12.         public Type TargetPage { get; set; }  
  13.     }  
  14. }  

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 named "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.

Xamarin

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 as a .png file from google and putting 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 the following

Xamarin

 

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,

  1. <?xml version="1.0" encoding="utf-8" ?>  
  2. <MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"  
  3.              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
  4.              xmlns:local="clr-namespace:FirstNativeApp"  
  5.              x:Class="FirstNativeApp.MainPage"  
  6.              xmlns:pages="clr-namespace:FirstNativeApp"  
  7.              MasterBehavior="Popover" Title="Mukesh Kumar Resume">  
  8.   
  9.     <MasterDetailPage.Master>  
  10.         <ContentPage Title="Menu" BackgroundColor="LightCyan" Padding="10">  
  11.             <ContentPage.Content>  
  12.                 <StackLayout Margin="10" Orientation="Vertical">                      
  13.                     <Image x:Name="profileImage"></Image>  
  14.                     <ListView x:Name="aboutList" ItemSelected="OnMenuItemSelected">>  
  15.                         <ListView.ItemTemplate>  
  16.                             <DataTemplate>  
  17.                                 <ImageCell Text="{Binding Text}" Detail="{Binding Detail}"  
  18.                                            ImageSource="{Binding ImagePath}">  
  19.                                 </ImageCell>  
  20.                             </DataTemplate>  
  21.                         </ListView.ItemTemplate>  
  22.                     </ListView>  
  23.                 </StackLayout>  
  24.             </ContentPage.Content>  
  25.         </ContentPage>  
  26.     </MasterDetailPage.Master>  
  27.   
  28.     <MasterDetailPage.Detail>  
  29.         <NavigationPage></NavigationPage>  
  30.     </MasterDetailPage.Detail>  
  31.   
  32. </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. 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 the menu to be opened 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.

  1. using FirstNativeApp.Entity;  
  2. using FirstNativeApp.Views;  
  3. using System;  
  4. using System.Collections.Generic;  
  5. using Xamarin.Forms;  
  6.   
  7. namespace FirstNativeApp  
  8. {  
  9.     public partial class MainPage : MasterDetailPage  
  10.     {          
  11.         public MainPage()  
  12.         {  
  13.             InitializeComponent();  
  14.             profileImage.Source = ImageSource.FromUri(new Uri("http://www.mukeshkumar.net/Content/img/users/Mukesh%20Kumar.jpg"));  
  15.   
  16.             aboutList.ItemsSource = GetMenuList();  
  17.              
  18.             var homePage = typeof(AboutPage);  
  19.             Detail = new NavigationPage((Page)Activator.CreateInstance(homePage));            
  20.   
  21.             IsPresented = false;  
  22.         }  
  23.   
  24.         public List<MasterMenuItems> GetMenuList()  
  25.         {  
  26.             var list = new List<MasterMenuItems>();  
  27.   
  28.             list.Add(new MasterMenuItems()  
  29.             {  
  30.                 Text = "About",  
  31.                 Detail = "Basic Info",  
  32.                 ImagePath = "about.png",  
  33.                 TargetPage = typeof(AboutPage)  
  34.             });  
  35.   
  36.             list.Add(new MasterMenuItems()  
  37.             {  
  38.                 Text = "Experiences",  
  39.                 Detail = "Something More",  
  40.                 ImagePath = "experience.png",  
  41.                 TargetPage = typeof(ExperiencePage)  
  42.             });  
  43.   
  44.             list.Add(new MasterMenuItems()  
  45.             {  
  46.                 Text = "Skils",  
  47.                 Detail = "Known Technologies",  
  48.                 ImagePath = "skills.png",  
  49.                 TargetPage = typeof(SkillsPage)  
  50.             });  
  51.   
  52.             list.Add(new MasterMenuItems()  
  53.             {  
  54.                 Text = "Awards",  
  55.                 Detail = "Achievements",  
  56.                 ImagePath = "achievements.png",  
  57.                 TargetPage = typeof(AchievementsPage)  
  58.             });  
  59.             return list;  
  60.         }  
  61.   
  62.         private void OnMenuItemSelected(object sender, SelectedItemChangedEventArgs e)  
  63.         {  
  64.   
  65.             var selectedMenuItem = (MasterMenuItems)e.SelectedItem;  
  66.             Type selectedPage = selectedMenuItem.TargetPage;  
  67.             Detail = new NavigationPage((Page)Activator.CreateInstance(selectedPage));  
  68.             IsPresented = false;  
  69.         }  
  70.     }  
  71. }  

AboutPage.xaml

This is the 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.

  1. <?xml version="1.0" encoding="utf-8" ?>  
  2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"  
  3.              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
  4.              x:Class="FirstNativeApp.Views.AboutPage" Title="About Mukesh Kumar">  
  5.     <ContentPage.Content>  
  6.         <StackLayout HorizontalOptions="Center" Margin="20">  
  7.             <Image x:Name="profileImage"></Image>  
  8.             <Label Text="About" Font="20" TextColor="Blue" HorizontalTextAlignment="Center"></Label>  
  9.             <Label Text="Microsoft MVP, C# Corner MVP, Technology Lover, Blogger and Software Developer!!"   
  10.                    TextColor="Black" HorizontalTextAlignment="Center"></Label>  
  11.         </StackLayout>  
  12.     </ContentPage.Content>  
  13. </ContentPage>  

ExperiencePage.xaml

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

  1. <?xml version="1.0" encoding="utf-8" ?>  
  2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"  
  3.              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
  4.              x:Class="FirstNativeApp.Views.ExperiencePage" Title="Mukesh Kumar's Experience">  
  5.     <ContentPage.Content>  
  6.         <StackLayout HorizontalOptions="Center" Margin="10">  
  7.             <Label Text="Experiences" Font="20" TextColor="Blue" HorizontalTextAlignment="Center"></Label>  
  8.             <Label Text="More than 5+ Years of experience as a Software Developer in IT! "   
  9.                    TextColor="Black" HorizontalTextAlignment="Center"></Label>  
  10.         </StackLayout>  
  11.     </ContentPage.Content>  
  12. </ContentPage>  

SkillsPage.xaml

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

  1. <?xml version="1.0" encoding="utf-8" ?>  
  2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"  
  3.              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
  4.              x:Class="FirstNativeApp.Views.SkillsPage" Title="Mukesh Kumar's Skills">  
  5.     <ContentPage.Content>  
  6.         <StackLayout HorizontalOptions="Center" Margin="10">  
  7.             <Label Text="Known Technologies" Font="20" TextColor="Blue" HorizontalTextAlignment="Center"></Label>  
  8.             <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"   
  9.                    TextColor="Black" HorizontalTextAlignment="Center"></Label>  
  10.         </StackLayout>  
  11.     </ContentPage.Content>  
  12. </ContentPage>  

AchievementsPage.xaml

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

  1. <?xml version="1.0" encoding="utf-8" ?>  
  2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"  
  3.              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
  4.              x:Class="FirstNativeApp.Views.AchievementsPage" Title="Mukesh Kumar's Achievements">  
  5.     <ContentPage.Content>  
  6.         <StackLayout HorizontalOptions="Center" Margin="20">  
  7.             <Label Text="Awards" Font="20" TextColor="Blue" HorizontalTextAlignment="Center"></Label>  
  8.             <Label Text="Microsoft MVP 2016" TextColor="Black" HorizontalTextAlignment="Start"></Label>  
  9.             <Label Text="C# Corner MVP 2018" TextColor="Black" HorizontalTextAlignment="Start"></Label>  
  10.             <Label Text="C# Corner MVP 2016" TextColor="Black" HorizontalTextAlignment="Start"></Label>  
  11.             <Label Text="C# Corner MVP 2015" TextColor="Black" HorizontalTextAlignment="Start"></Label>  
  12.         </StackLayout>  
  13.     </ContentPage.Content>  
  14. </ContentPage>  

Now, let us 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 the first default page, as the About Page.

Xamarin

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

Xamarin

 

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.

Xamarin

 

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

Xamarin

 

Conclusion

So, today we have seen how we can use MasterDetailPage Xamarin.Forms to 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.

Drop here!


Similar Articles