Xamarin Forms Master-Detail Page Menu

Question

I have a MainPage that has a MasterDetailPage I am using it to store the menupage control. The menu display but I am not able to navigating to the new page.

Do I need to add a MasterDetailPage.Detail to the homePage.xaml?

MenuPage

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition />
    </Grid.RowDefinitions>
    <StackLayout Orientation="Horizontal" Spacing="10">
        <Label VerticalOptions="Center" Text="SideDrawer" />
    </StackLayout>
    <StackLayout VerticalOptions="FillAndExpand">
        <ListView x:Name="ListViewMenu"
                HasUnevenRows="True">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Grid Padding="10">
                            <Label Text="{Binding Title}" FontSize="20"/>
                        </Grid>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</Grid>
public partial class MenuPage : ContentPage
{
    MainPage RootPage { get => Application.Current.MainPage as MainPage; }
    public NavigationPage Detail { get; private set; }
    List<HomeMenuItem> menuItems;
    public MenuPage ()
    {
        InitializeComponent ();
        menuItems = new List<HomeMenuItem>
        {
            new HomeMenuItem {Id = MenuItemType.Home, Title="Home" ,IconSource="Home.png", TargetType = typeof(Pages.HomePage)},
            new HomeMenuItem {Id = MenuItemType.Share, Title="Share App" ,IconSource="Home.png" ,TargetType = typeof(Pages.HomePage)},
            new HomeMenuItem {Id = MenuItemType.About, Title="About App",IconSource="Home.png",TargetType = typeof(Pages.HomePage) }
        };
        ListViewMenu.ItemsSource = menuItems;
        ListViewMenu.ItemSelected += OnItemSelected;
    }
    void OnItemSelected(object sender, SelectedItemChangedEventArgs e)
    {
        var item = e.SelectedItem as HomeMenuItem;
        if (item != null)
        {
            //This will create instance of the page using the parameterized constructor you defined in each DetailPages
            Detail = new NavigationPage((Page)Activator.CreateInstance(item.TargetType));
        }
    }
}

you are assigning a local variable named Detail, this is NOT the same thing as the Detail property of your MasterDetail page — Jason

TaylorD TaylorD · Accepted Answer · 2019-02-28T20:07:04

You need a page that inherits from MasterDetailPage. That will give you a Detail property to set and navigate properly.

I would suggest following this guide to help you out!

Xamarin.Forms Master-Detail Page

Xamarin Forms Master-Detail Page Menu

1 Answers