Why does my master detail page have 2 navigation bars?

TomJefferisTomJefferis USMember
edited November 2016 in Xamarin.Forms

Hi, Im using xaml for my master detail page and other pages however when i run my app i seem to have 2 navigation bars present and one doesnt have any items. help please.

Master detail page code

`

<?xml version="1.0" encoding="UTF-8"?>

<MasterDetailPage.Master>

<ContentPage Title = "Home">
  <StackLayout>
    <Button Text="Freestyle Times" />
    <Button Text="Backstroke Times" />
    <Button Text="Brestroke Times" />
    <Button Text="Butterfly Times" />
    <Button Text="Medely Times" />
  </StackLayout>
</ContentPage>

</MasterDetailPage.Master>

<MasterDetailPage.Detail>



</NavigationPage>

</MasterDetailPage.Detail>

`
Code behind Master detail page

`using System;
using System.Collections.Generic;
using System.Threading.Tasks;
using GoogleLogin.Views;
using Xamarin.Forms;
using TimeTrackerApps;

namespace TimeTrackerApps
{
public partial class Home : MasterDetailPage
{

    public Home()
    {


        InitializeComponent();

    }



}

}`

Code for Homepage

`<?xml version="1.0" encoding="UTF-8"?>

<ContentPage.Content>

    </StackLayout>
</ContentPage.Content>

`

Code behind Homepage

`using System;
using System.Collections.Generic;

using Xamarin.Forms;

namespace TimeTrackerApps
{
public partial class Homepage : ContentPage
{
public Homepage()
{
InitializeComponent();
}
}
}
`

Image of what happens

Answers

  • SapienDeveloperSapienDeveloper USMember ✭✭

    Have you wrapped your MasterDetailPage with a NavigationPage?

  • TomJefferisTomJefferis USMember

    I don't think so, I have navigated to it by doing this

    `Navigation.InsertPageBefore(new Home(), Navigation.NavigationStack[0]);
    await Navigation.PopToRootAsync();

    `
    as the master detail page is not the root page at the start

  • LJongLJong NLMember ✭✭✭

    Well you did define a navigation page at the start as detail page.

    You need to be sure to put in the header of the page like this:

    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 xmlns:controls="clr-namespace:BNApp.Controls;assembly=BNApp"
                 x:Class="BNApp.Views.LoginPage"
                 NavigationPage.HasNavigationBar="False" 
                 NavigationPage.HasBackButton="False">
    
    </ContentPage>
    
  • solnJsolnJ FRMember ✭✭

    @LuukJongebloet said:
    Well you did define a navigation page at the start as detail page.

    You need to be sure to put in the header of the page like this:

    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 xmlns:controls="clr-namespace:BNApp.Controls;assembly=BNApp"
                 x:Class="BNApp.Views.LoginPage"
                 NavigationPage.HasNavigationBar="False" 
                 NavigationPage.HasBackButton="False">
    
    </ContentPage>
    

    I have the same problem but the backButton is displayed by default (click on it to have the icon of the hamburger menu) and the title of the page disappears... do anybody have solution?

  • Xami3Xami3 PKMember, University ✭✭✭

    @solnJ are you navigating to master detail page or is it your main page? in both cases are you wraping it in navigationPage?

  • solnJsolnJ FRMember ✭✭

    @Xami3 my master detail page is my main page. i don't think i wraping it.... i just use this code in App.xaml.cs for diplaying my hamburger menu for all other page:
    'Current.MainPage = new NavigationPage(new MainPage());
    Current.MainPage.Navigation.PushAsync(new MainPage());'

    but the link in my menu don't have two burger menu but don't display the title page :/

    This is my main page when i start the app:

    this is my main page when i access it from the hamburger menu:

  • Xami3Xami3 PKMember, University ✭✭✭

    @solnJ you are wraping it in a navigationpage at this line

    Current.MainPage = new NavigationPage(new MainPage());

    change it to

    Current.MainPage = new MainPage();

    Actually when you add a navigation page you get the first nav bar which has the back button and the master page itself has this kind of navbar but with hamburger icon. so dont use navigation page with master detail.

  • solnJsolnJ FRMember ✭✭
    edited June 2017

    @Xami3 Yes, but if I change this code, my menu hamburger does not go on the pages I access with a button on my MainPage ...

  • solnJsolnJ FRMember ✭✭

    @Xami3 i change the code but this is happening :

  • Xami3Xami3 PKMember, University ✭✭✭
    edited June 2017

    @solnJ no the hamburger icon does show on the page which are set to detail page. but if you navigate to a page then the master detail icon will not be shown because you are out of the master detail view.

    so the question is when you click on button for setting the page how do you set your page? do you navigate to new page or set new page as detail?

  • Xami3Xami3 PKMember, University ✭✭✭

    @solnJ are you still using NavigationPage in master page ? in constructor or in xaml ?

  • solnJsolnJ FRMember ✭✭
    edited June 2017

    @Xami3 My app crash when i change this:
    'Current.MainPage = new NavigationPage(new MainPage()); '
    to this:
    'Current.MainPage = new MainPage();'
    but run if i remove this:
    'Current.MainPage = new MainPage();
    //Current.MainPage.Navigation.PushAsync(new MainPage());'

    i use NavigationPage only in the default code in my partial class MainPage generate when i add my MasterPageDetail:

    'public partial class MainPage : MasterDetailPage
    {
    public MainPage()
    {
    InitializeComponent();
    MasterPage.ListView.ItemSelected += ListView_ItemSelected;
    }
    private void ListView_ItemSelected(object sender, SelectedItemChangedEventArgs e)
    {
    var item = e.SelectedItem as MainPageMenuItem;
    if (item == null)
    return;
    var page = (Page)Activator.CreateInstance(item.TargetType);
    page.Title = item.Title;
    Detail = new NavigationPage(page);
    IsPresented = false;
    MasterPage.ListView.SelectedItem = null;
    }
    }'

    i want to go on a new page this is my code:
    In Xaml:
    '<?xml version="1.0" encoding="utf-8" ?>

    <ContentPage.Content>        
        <ScrollView Padding="0,10,0,0">
            <RelativeLayout>
                <Label x:Name="title" Text="Versement - Vxxx :"  FontSize="26" HorizontalTextAlignment="Center" TextColor="#002db3"
                       RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Y, Factor=0, Constant=40}" 
                       RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}" />
    
                <Label x:Name="subtitle" Text="Unité(s) d'archivage(s)" TextColor="Black" HorizontalTextAlignment="Center" VerticalTextAlignment="End"
                       RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Y, Factor=0, Constant=70}" 
                       RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}" 
                       RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0,Constant=50}"/>
    
    
    
                <RelativeLayout HorizontalOptions="Center" VerticalOptions="End">
                    <Button x:Name="miseEnStockButton" Text="Mise en stock"  Clicked="OnMiseEnStockButtonClicked"
                            HorizontalOptions="Center" VerticalOptions="End"
                            RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0,Constant=500}"
                            RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0, Constant=0}"
                            RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width,Factor=1,Constant=0}"
                            RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0,Constant=50}"/>
                </RelativeLayout> 
    
            </RelativeLayout>
        </ScrollView>
    </ContentPage.Content>
    

    '

    in C#:
    ' public void OnMiseEnStockButtonClicked(object sender, EventArgs args)
    {
    Navigation.PushAsync( new MiseEnStockPage2());
    }'

  • Xami3Xami3 PKMember, University ✭✭✭

    @solnJ please have a look... it is working fine. although i am not sure about master page xaml.

  • Xami3Xami3 PKMember, University ✭✭✭

    @solnJ i think for the first time when you set the detail page that is not wrapped in NavigationPage... is it?

  • solnJsolnJ FRMember ✭✭

    @Xami3 i don't touch this code so yes it is wrapped with navigation page...Unless I have commented on it without realizing it

    this is work well but have you idea how i can have hamburger icon with menu instead of backButton?

  • Xami3Xami3 PKMember, University ✭✭✭
    edited June 2017

    @solnJ well there are three ways:
    1. if your project requirement can be fullfill if you set all the pages as detail pages then just set the page as detail page and you are good to go.
    2. if the above is not acceptable for you then you have to write a custom renderer for it on which you will change the back button style/image search for it in the forum or on stack overflow.
    3. or create your own navigation bar and place it ion each page

  • solnJsolnJ FRMember ✭✭

    @Xami3 I have already tried the second solution but my application crash has every try, unfortunately the first solution is not acceptable .... well I will re-try
    thank you for your help!

  • raul_9410raul_9410 Member

    @Xami3 said:
    @solnJ please have a look... it is working fine. although i am not sure about master page xaml.

    Hi @Xami3, what you say is right, but when you try to go back, from 3rd page to 1st one, or to 2nd or to one from the hamburger, there is no hamburger menu. Only the back button. There is the problem. When you navigate trough all pages, when you jump from one page to another.

Sign In or Register to comment.