How to enable and disable the navigation bar on the main page.
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:
First Page with NavigationBar:
Second Page With NavigationBar:
|
