)
We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to enable and disable the navigation bar on the main page.

Platform: Xamarin.Forms |
Control: SfNavigationDrawer |
Published Date: April 7, 2017 |
Last Revised Date: June 24, 2019

Syncfusion NavigationDrawer in Xamarin has the feature of enabling and disabling the navigation bar on the main page. To attain this condition follow the below given procedure.

 

To Enable and Disable the Navigation bar on Main page follow the below given procedure:

 

Step 1: Create the NavigationDrawer sample with all necessary assemblies.

Step 2: Create an OnAppearing method for the content to be appear on the main page of NavigationDrawer. In this method use buttons to navigate to a page.

Step 3: This functions make the content which has to be shown on the Main page of NavigationDrawer.

 

The below code illustrates how to enable and disable the navigation bar in the SfNavigationDrawer.

Code behind Codes for Main Page:

namespace NDTabbedPage
{
public partial class NDTabbedPagePage : ContentPage
{
    public NDTabbedPagePage()
    {
        InitializeComponent();
    }
    void Handle_Clicked(object sender, System.EventArgs e)
    {
        Navigation.PushAsync(new FirstPage());
    }
    void Handle_Clicked1(object sender, System.EventArgs e)
    {
        Navigation.PushAsync(new SecondPage());
    }
    protected override void OnAppearing()
    {
        base.OnAppearing();
        Button b1 = new Button();
        b1.Text = "First Page";
        b1.HorizontalOptions = LayoutOptions.CenterAndExpand;
        b1.VerticalOptions = LayoutOptions.CenterAndExpand;
        b1.Clicked += Handle_Clicked;
        Button b2 = new Button();
        b2.HorizontalOptions = LayoutOptions.CenterAndExpand;
        b2.VerticalOptions = LayoutOptions.CenterAndExpand;
        b2.Text = "Second Page";
        b2.Clicked += Handle_Clicked1;
        StackLayout layout = new StackLayout();
        layout.Children.Add(b1);
        layout.Children.Add(b2);
        navigationDrawer.ContentView = layout;
    }
}
}

 

Main Page XAML Code:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
  xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
  xmlns:local="clr-namespace:NDTabbedPage" x:Class="NDTabbedPage.NDTabbedPagePage"
  xmlns:navigation="clr-namespace:Syncfusion.SfNavigationDrawer.XForms;assembly=Syncfusion.SfNavigationDrawer.XForms"
  NavigationPage.HasNavigationBar="false"> <!-- This Line is must, to make the Navigation Bar to disable on Main page -->
 
<navigation:SfNavigationDrawer x:Name="navigationDrawer" Position="Left" Transition="SlideOnTop" DrawerWidth="200" DrawerHeaderHeight="50" DrawerFooterHeight="50">
  <navigation:SfNavigationDrawer.DrawerHeaderView>
      <Grid x:Name="headerLayout" BackgroundColor="#1aa1d6" >
          <Label x:Name="header"  Text="Header View" FontSize="14" TextColor="White"  VerticalTextAlignment="Center" HorizontalTextAlignment="Center"  />
      </Grid>
  </navigation:SfNavigationDrawer.DrawerHeaderView>
 
      <navigation:SfNavigationDrawer.DrawerContentView>
      <Grid x:Name="ContentLayout"  >
          <Label x:Name="content"  Text="Drawer Content View" FontSize="14" TextColor="Black"  VerticalTextAlignment="Center" HorizontalTextAlignment="Center"  />
      </Grid>
  </navigation:SfNavigationDrawer.DrawerContentView>
        
      <navigation:SfNavigationDrawer.DrawerFooterView>
      <Grid x:Name="footerLayout" BackgroundColor="#1aa1d6" >
          <Label x:Name="footer"  Text="Footer View" FontSize="14" TextColor="White"  VerticalTextAlignment="Center" HorizontalTextAlignment="Center"  />
      </Grid>
  </navigation:SfNavigationDrawer.DrawerFooterView>
</navigation:SfNavigationDrawer>
</ContentPage>  

 

First Page Xaml Code:

<StackLayout>
<Label Text="First page with NavigationBar" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/>
</StackLayout> 

 

Second Page Xaml Code:

<StackLayout>
  <Label Text="Second Page with NavigationBar" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/>
</StackLayout>

 

 

Main Page without NavigationBar:

 

Without NavigationBar in SfNavigationDrawer

 

First Page with NavigationBar:

 

 

With NavigationBar in SfNavigationDrawer

 

Second Page With NavigationBar:

 

Page with NavigationBar in SfNavigationDrawer

 

 

 

 

 

 

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment
Comments
demo demo
Apr 02, 2018

please check once this link..https://www.syncfusion.com/support/directtrac/incidents/202494 . if u have any idea regarding this.. please update ur comments here

Reply
FEDERICA LAZZERI
Apr 17, 2018
Hi,

i have followed the instructions and everything seems to work.... as well i go ahead (with the pushasync method), but when i go back hitting the "first page" toolbar "back" button i go back... but the
app fall in almost an empty screen.
obviously i don't see the toolbar... but i neither see the page "content".

i don't know if this has something to do with it but in the console log i noticed this error:  
(11175): requestLayout() improperly called by md5270abb39e60627f0f200893b490a1ade.NavigationPageRenderer{3318a3a4 V.E..... ......I. 0,0-1440,2304 #1} during second layout pass: posting in next frame

can you please help me?

Reply

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon