Master Details Page using Xamarin Community Toolkit

Introduction

In this post, we are going see the "How to create Master Details Page using Xamarin Community Toolkit". To know more about Xamarin Community Toolkit, check the previous posts.

• Xamarin Community Toolkit - Tutorial Series
• Xamarin Community Toolkit - Featured Views

Coding Part

Steps

1. Step 1: Creating new Xamarin.Forms Projects
2. Step 2: Setting up the Xamarin Community Toolkit in Xamarin.Forms .Net Standard Project
3. Step 3: Implementation of Master Details Page using Xamarin Community Toolkit

Step 1: Creating new Xamarin.Forms Projects

Create New Project by Selecting New Project à Select Xamarin Cross Platform App and Click OK.

Note: Xamarin.Forms version should be greater than 5.0.

Then Select Android and iOS Platforms as shown below with Code Sharing Strategy as PCL or .Net Standard and Click OK.

Step 2: Setting up the Xamarin Community Toolkit in Xamarin.Forms .Net Standard Project

In this step, we will see how to setup the plugin.

• Open the Nuget Manager in the Visual Studio Solution by right click the solution and select “Manage Nuget Packages”.
  
• Then select “Xamarin Community Toolkit” and check all the projects in the solution, install the plugin

Step 3: Implementation of Master Details Page using Xamarin Community Toolkit.

In this step, we will see how to implement the Implementation of Master Details Page using Xamarin Community Toolkit in XAML. We have expalined the steps below.

• Open your XAML design file and add the following namespace to utilise the views in the screen.

  xmlns:xct="http://xamarin.com/schemas/2020/toolkit"

• SideMenuView
  1. Basically, SideMenuView can be added as a child to any layout (e.g. you can put SideMenuView inside StackLayout or even make every item view in CollectionView be SideMenuView as well) or into ContentPage as the root view.
  2. Here, three views inside the SideMenuView. These views represent the Main View, the Left Menu, the Right Menu. This can be determined by using "SideMenuView.Position" property.
  3. SideMenuView.MenuWidthPercentage attached property for determining side menu's size.

  <xct:SideMenuView x:Name="SideMenu">
  	<!--MainView-->
  	<AbsoluteLayout BackgroundColor="White">
  
  		<StackLayout AbsoluteLayout.LayoutFlags="All"
  			AbsoluteLayout.LayoutBounds="0, 0, 1, 1"
  				   VerticalOptions="Center"
  				   HorizontalOptions="Center">
  
  			<Frame BackgroundColor="#2196F3" Padding="24" CornerRadius="0">
  				<Label Text="Master Detail Page using XCT" 
  					   HorizontalTextAlignment="Center" TextColor="White" FontSize="36"/>
  			</Frame>
  
  			<Label Text="<-- Swipe Left or Right -->"
  				   TextColor="Black"
  				   VerticalOptions="Center"
  				   HorizontalOptions="Center"
  				   FontSize="20"/>
  
  		</StackLayout>
  
  		<StackLayout Orientation="Horizontal"
  					 Padding="15, 10"
  					 AbsoluteLayout.LayoutFlags="WidthProportional"
  					 AbsoluteLayout.LayoutBounds="0, 0, 1, -1">
  			<Button Text="|||"
  					TextColor="White"
  					BackgroundColor="#2196F3"
  					WidthRequest="40"
  					FontSize="20"
  					VerticalOptions="Center"
  					Clicked="OnLeftButtonClicked"/>
  			<Button Text="|||"
  					BackgroundColor="#2196F3"
  					TextColor="White"
  					WidthRequest="40"
  					VerticalOptions="Center"
  					FontSize="20"
  					HorizontalOptions="EndAndExpand"
  					Clicked="OnRightButtonClicked" />
  		</StackLayout>
  	</AbsoluteLayout>
  
  	<!--LeftMenu-->
  	<ScrollView xct:SideMenuView.Position="LeftMenu"
  				xct:SideMenuView.MenuWidthPercentage="0.5"
  				BackgroundColor="Orange">
  		<StackLayout HeightRequest="2000">
  			<Button Text="TO RIGHT" FontSize="25" Clicked="OnRightButtonClicked" />
  		</StackLayout>
  	</ScrollView>
  
  	<!--RightMenu-->
  	<ScrollView xct:SideMenuView.Position="RightMenu"
  				xct:SideMenuView.MenuWidthPercentage="0.35"
  				BackgroundColor="Gold">
  		<StackLayout HeightRequest="2000">
  			<Button Text="TO LEFT" FontSize="25" Clicked="OnLeftButtonClicked" />
  		</StackLayout>
  	</ScrollView>
  
  </xct:SideMenuView>

• Opening the side menu from right or left can be controlled by the State property of the SideMenuView.

  SideMenu.State = SideMenuState.LeftMenuShown; (or SideMenuState.RightMenuShown;)

Demo:

Download Code:

You can download the code from GitHub. If you have doubt, feel free to post comment. If you like this article and is useful to you, do like, share the article & star the repository on GitHub.