In this blog we are sharing few insights about why Xamarin has become the most preferred choice for mobile app developers and step-by-step guide to create master details pages in Xamarin Forms. 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=”https://xamarin.com/schemas/2014/forms”
xmlns:x=”https://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>
- Change <ContentPage></ContentPage> to <MasterDetailPage></MasterDetailPage>
<MasterDetailPage xmlns=”https://xamarin.com/schemas/2014/forms”
xmlns:x=”https://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 ();
}
}
- Add some code in HomeView.xaml
<MasterDetailPage xmlns=”https://xamarin.com/schemas/2014/forms”
xmlns:x=”https://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=”https://xamarin.com/schemas/2014/forms”
xmlns:x=”https://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.
Looking for Top Software Development Company? Consult Inwizards.
