Master Details Page Using Xamarin Community Toolkit

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

Coding Part

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 scanner 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 Master Details Page using Xamarin Community Toolkit in XAML. We have explained the steps below.

Open your XAML design file and add the following namespace to utilize the views on the screen.

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

SideMenuView

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.
Here, are three views inside the SideMenuView. These views represent the Main View, the Left Menu, and the Right Menu. This can be determined by using "SideMenuView.Position" property.

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;)

Download Code

You can download the code from GitHub. If you have doubts, 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.