Creating the XAML file

Next, add a new ContentPage called MenuPage.xaml into the Pages folder in the MvxFormsMasterDetailDemo.UI project. Open the MenuPage.xaml file and replace the content by the following code:
1
<?xml version="1.0" encoding="utf-8" ?>
2
<views:MvxContentPage xmlns="http://xamarin.com/schemas/2014/forms"
3
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
4
             xmlns:views="clr-namespace:MvvmCross.Forms.Views;assembly=MvvmCross.Forms"
5
             xmlns:viewModels="clr-namespace:MvxFormsMasterDetailDemo.Core.ViewModels;assembly=MvxFormsMasterDetailDemo.Core"
6
             x:Class="MvxFormsMasterDetailDemo.UI.Pages.MenuPage"
7
             x:TypeArguments="viewModels:MenuViewModel" >
8
    <ContentPage.Content>
9
        <StackLayout>
10
            <ListView></ListView>
11
        </StackLayout>
12
    </ContentPage.Content>
13
</views:MvxContentPage>
Copied!
Open the MenuPage.xaml.cs file and set the base class and the attributes, as shown below:
1
using MvvmCross.Forms.Presenters.Attributes;
2
using MvvmCross.Forms.Views;
3
using MvxFormsMasterDetailDemo.Core.ViewModels;
4
using Xamarin.Forms.Xaml;
5
​
6
namespace MvxFormsMasterDetailDemo.UI.Pages
7
{
8
    [XamlCompilation(XamlCompilationOptions.Compile)]
9
    [MvxMasterDetailPagePresentation(Position = MasterDetailPosition.Master, WrapInNavigationPage = false, Title = "HamburgerMenu Demo")]
10
    public partial class MenuPage : MvxContentPage<MenuViewModel>
11
    {
12
        public MenuPage ()
13
        {
14
            InitializeComponent ();
15
        }
16
    }
17
}
Copied!
The Position property of the MvxMasterDetailPagePresentation attribute should be set to Master, which means that this page will be shown as the MasterPage of the MasterDetailPage. And there is another pitfall for the MasterPage: it must have the Title property set, otherwise, your application will be stuck. So you must set the Title property of the MvxMasterDetailPagePresentation attribute.
Now we need to set the data-binding for the ListView. We already have a MenuItemList in its ViewModel, so what we should do now is setting the ItemsSource of the ListView, like this:
1
<ListView ItemsSource="{Binding MenuItemList}">
2
    <ListView.ItemTemplate>
3
        <DataTemplate>
4
            <TextCell Text="{Binding}"></TextCell>
5
        </DataTemplate>
6
    </ListView.ItemTemplate>
7
</ListView>
Copied!
Currently, we just use the TextCell to show the menu text. Before we implement the full functionality of the hamburger menu, let us create the DetailPages.

Creating the ViewModel

Next - Implementing MasterDetail layout in Xamarin.Forms by MvvmCross

Creating the DetailPages

Last modified 2yr ago

Copy link