Easily create master details pages in Xamarin forms


In this blog we are sharing few insights about why Xamarin has become the most preferred choice for mobile app developers. Mobile applications are on a rise!

Xamarin forms empower you to deliver the same experience to multiple platforms.

Q. What is MasterDetailPage ?



A. 1) A Page that manages two panes of information.

2) MasterDetailPage is the main page that is responsible for two related pages.

It’s a final screen at our app, this is how our navigation drawer (Master-Detail Page menu) will look like on Android.

Start implementation creating master details page step by step :-

1. Open Visual Studio and select New Project.

2. Select project type (Cross – PlatForm) and give this project a name.

3. Select template – Blank App and code sharing as PCL.

Note => Add Some File

* Add Views Folder.

1. In views folder add HomeView .

2. In views folder add MenuViewView.

* Add ViewsModels Folder.

1. In views folder add HomeViewModel file.

4. Open HomeView.xaml and add the follwoing code


<?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=”App2.HomeView”>

<ContentPage.Content>

<StackLayout>

<Label Text=”Welcome to Xamarin.Forms!”

VerticalOptions=”CenterAndExpand”

HorizontalOptions=”CenterAndExpand” />

</StackLayout>

</ContentPage.Content>

</ContentPage>

  1. Change <ContentPage></ContentPage> to <MasterDetailPage></MasterDetailPage>

<MasterDetailPage xmlns=”http://xamarin.com/schemas/2014/forms”

xmlns:x=”http://schemas.microsoft.com/winfx/2009/xaml”

x:Class=”App2.HomeView “>

<ContentPage.Content>

<StackLayout>

<Label Text=”Welcome to Xamarin.Forms!”

VerticalOptions=”CenterAndExpand”

HorizontalOptions=”CenterAndExpand” />

</StackLayout>

</ContentPage.Content>

</MasterDetailPage>

Changes is also in HomeView.cs file

public partial class HomeView : ContentPage TO MasterDetailPage
{
public HomeView ()
{
InitializeComponent ();
}
}

  1. Add some code in HomeView.xaml

<MasterDetailPage xmlns=”http://xamarin.com/schemas/2014/forms”

xmlns:x=”http://schemas.microsoft.com/winfx/2009/xaml”

xmlns:local=”clr-namespace:App2.Views;assembly=App2″

x:Class=”App2 .Views.HomeView” Title=”Home” BackgroundColor=”White”>

<MasterDetailPage.Detail>

<NavigationPage BarBackgroundColor=”White”>

<x:Arguments>

<local:CategoriesView />

</x:Arguments>

</NavigationPage>

</MasterDetailPage.Detail>

<MasterDetailPage.Master>

<local:MenuView x:Name=”masterMenuPage”/>

</MasterDetailPage.Master>

</MasterDetailPage>

Note :-

Use this line for customer renderer :- xmlns:local=”clr-namespace:App2.Views;assembly=App2″

Changes is also in HomeView.cs file :-

using Xamarin.Forms;

using Xamarin.Forms.Xaml;

namespace App2.Views

{

[XamlCompilation(XamlCompilationOptions.Compile)]

public partial class HomeView : MasterDetailPage

{
public HomeView()
{

InitializeComponent();

NavigationPage.SetHasNavigationBar(this, false);

BindingContext = App.AppSetup.HomeViewModel;

var menupage = masterMenuPage;

Master = menupage;

masterMenuPage.menuList.ItemTapped += (sender, e) =>
{
if (e.Item == null) return;

NavigateTo(e.Item as ViewModels.Menu);

};

this.SetBinding(MasterDetailPage.IsPresentedProperty, “IsMenuListPresented”);

this.IsPresentedChanged += HomeView_IsPresentedChanged;

void HomeView_IsPresentedChanged(object sender, EventArgs e)
{
App.AppSetup.HomeViewModel.IsMenuListPresented = ((MasterDetailPage)sender).IsPresented;
}
}


#region first

// TODO: Set the navigation menu at the runtime.

void NavigateTo(ViewModels.Menu menu)
{
if (menu.TargetType == typeof(CategoriesView))
{
Detail.Navigation.PopToRootAsync();
}
else if (menu.TargetType == typeof(SignInView))
{
Detail.Navigation.PushAsync(new SignInView());
}
else if (menu.TargetType == typeof(SignUpView))
{
Detail.Navigation.PushAsync(new SignUpView());
}
else if (menu.TargetType == typeof(Nullable))
{
App.Current.MainPage = new NavigationPage(new Views.SignInSignUpView());
}
App.AppSetup.HomeViewModel.IsMenuListPresented = false;
}
#endregion
}
}

7 Add a class file named MenuView.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:App2 .CustomViews;assembly=App2″

x:Class=”App2.Views.MenuView” Title=”Menu” BackgroundColor=”#E55932″>

<StackLayout x:Name=”MainStack” HorizontalOptions=”FillAndExpand” VerticalOptions=”FillAndExpand” >

<StackLayout HorizontalOptions=”FillAndExpand” VerticalOptions=”StartAndExpand” Padding=”0,50″>

<Image Source=”icon.png” Aspect=”AspectFit” HorizontalOptions=”Center” VerticalOptions=”Center” HeightRequest=”50″ WidthRequest=”50″/>

<local:CustomListView x:Name=”masterMenuList” ItemsSource=”{Binding MenuItemList}” ItemTapped=”masterMenuList_ItemTapped” RowHeight=”50″ HorizontalOptions=”FillAndExpand” VerticalOptions=”Start” SeparatorVisibility=”None” BackgroundColor=”Transparent” >

<local:CustomListView.ItemTemplate>

<DataTemplate>

<local:CustomListViewCell>

<local:CustomListViewCell.View>

<StackLayout HorizontalOptions=”FillAndExpand” VerticalOptions=”Center”>

<local:CustomLabelRegular Text=”{Binding Title}” Grid.Row=”0″ TextColor=”#ffffff” FontSize=”18″ Grid.Column=”1″ VerticalOptions=”Center” HorizontalOptions=”Center” />

</StackLayout>

</local:CustomListViewCell.View>

</local:CustomListViewCell>

</DataTemplate>

</local:CustomListView.ItemTemplate>

</local:CustomListView>

</StackLayout>

<BoxView BackgroundColor=”#ffffff” HeightRequest=”50″ HorizontalOptions=”FillAndExpand” VerticalOptions=”EndAndExpand” Margin=”30″/>

</StackLayout>

</ContentPage>

8 = > Add a some code in MenuView.cs.

using Xamarin.Forms;

using Xamarin.Forms.Xaml;

namespace App2.Views
{
[XamlCompilation(XamlCompilationOptions.Compile)]

public partial class MenuView : ContentPage
{
public ListView menuList;

public MenuView()
{
InitializeComponent();

this.menuList = masterMenuList;

}

private void masterMenuList_ItemTapped(object sender, ItemTappedEventArgs e)

=> ((ListView)sender).SelectedItem = null;
}
}


9 Create new folder ( ViewModels ).

Add a class file named HomeViewModel.cs.

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

using Xamarin.Forms;

namespace App2.ViewModels
{
public class HomeViewModel : BaseViewModel
{
public HomeViewModel()
{
IsMenuListPresented = false;

_menuItemList = new List<Menu>()
{

new Menu {Title = “Categories”, TargetType = typeof(SearchView)},

new Menu {Title = “Shopping List”, TargetType = typeof(CategoriesView)},

new Menu {Title = “Promotions”, TargetType = typeof(SearchView)},

new Menu {Title = “About the App”, TargetType = typeof(SearchView)},

new Menu {Title = “Settings”, TargetType = typeof(SearchView)},
};
RaisePropertyChanged(() => MenuItemList);
}

#region Set Properties

private bool _isMenuListPresented;

public bool IsMenuListPresented
{
get { return _isMenuListPresented; }
set
{

_isMenuListPresented = value;

RaisePropertyChanged(() => IsMenuListPresented);

}
}

private List<Menu> _menuItemList;

public List<Menu> MenuItemList

{

get { return _menuItemList; }

set

{

_menuItemList = value;

RaisePropertyChanged(() => MenuItemList);

}

}

#endregion

}

public class Menu

{

public string Title { get; set; }

public Type TargetType { get; set; }

}

}

Run the application.

* You will get the following screen.

Easily create master details pages in Xamarin forms

Post navigation


Leave a Reply

Your email address will not be published. Required fields are marked *