)
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 add NavigationDrawer inside the Tabbed Page

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

Syncfusion NavigationDrawer in Xamarin provides NavigationDrawer inside the Tabbed page.

 

To set NavigationDrawer inside Tabbed page follow the given procedure below:

 

Step 1: Create a page with the button, when clicked it moves to Tabbed Page

Step 2: Tabbed Page consists of Navigation Drawer inside, namely First Page and Second Page.

Step 3: Create NavigationDrawer inside First page and same code can be used in Second Page also.

 

The below code illustrates the way to achieve this.

XAML code to go TabbedPage:

<ContentPage.Content>
  <StackLayout>
    <Button x:Name="btn" Text="Go to Tabbed Pages"  HeightRequest="50" Clicked="Btn_Clicked" VerticalOptions="CenterAndExpand"   HorizontalOptions="CenterAndExpand" WidthRequest="200"/>
  </StackLayout>  
</ContentPage.Content> 

 

C# code to go TabbedPage:

namespace NDTabbedPage
{
public partial class NDTabbedPagePage : ContentPage
{
    SfNavigationDrawer navigation;
    TabbedPage tabsXaml = new TabbedPage();
    public NDTabbedPagePage()
    {
        InitializeComponent();
        tabsXaml.Children.Add(new FirstPage() { Title = "First Page" });
        tabsXaml.Children.Add(new SecondPage() { Title = "Second Page" });
 
    }
    async void Btn_Clicked(object sender, EventArgs e)
    {
 
        await Navigation.PushAsync(tabsXaml);
    }
}
}
 

 

XAML code inside First Page:

<ContentPage.ToolbarItems> 
     
          <ToolbarItem x:Name="t1"></ToolbarItem>  
            
  </ContentPage.ToolbarItems>
<navigation:SfNavigationDrawer x:Name="navigationDrawer1" BackgroundColor="White" TouchThreshold="100" Position="Left" DrawerWidth="200" DrawerHeaderHeight="50" DrawerFooterHeight="50">
 
  <navigation:SfNavigationDrawer.ContentView>
    <StackLayout>
      <Label Text="First Page" VerticalOptions="Center" HorizontalOptions="Center" />
      <Button x:Name="bt" Text="Click" VerticalOptions="Center" HorizontalOptions="Center" ></Button>
    </StackLayout>
  </navigation:SfNavigationDrawer.ContentView>
      <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.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.DrawerContentView>
          <Grid x:Name="contentLayout" >
                      <Label x:Name="content"  Text="Content View" FontSize="14" TextColor="White"  VerticalTextAlignment="Center" HorizontalTextAlignment="Center"  />
                  </Grid>                
      </navigation:SfNavigationDrawer.DrawerContentView>
 
</navigation:SfNavigationDrawer>
 

 

C# code inside First Page:

namespace NDTabbedPage
{
public partial class FirstPage : ContentPage
{
 
    public FirstPage()
    {
        InitializeComponent();
 
        bt.Clicked += (object sender, System.EventArgs e) =>
        {
 
            navigationDrawer1.ToggleDrawer();
 
        };
 
    }
 
}
}

 

 

XAML code inside Second Page:

<ContentPage.ToolbarItems>
 
  <ToolbarItem x:Name="t2"></ToolbarItem>
 
</ContentPage.ToolbarItems>
 
<navigation:SfNavigationDrawer BackgroundColor="White" x:Name="navigationDrawer2" Position="Left" TouchThreshold="100" DrawerWidth="150" DrawerHeaderHeight="100" DrawerFooterHeight="100">
  <navigation:SfNavigationDrawer.ContentView>
    <StackLayout>
      <Label Text="Second Page" VerticalOptions="Center" HorizontalOptions="Center" />
              <Button x:Name="bt" Text="Click" VerticalOptions="Center" HorizontalOptions="Center" ></Button>
    </StackLayout>
  </navigation:SfNavigationDrawer.ContentView>
      <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.DrawerFooterView>
                  <Grid x:Name="footerView" BackgroundColor="#1aa1d6" >
                      <Label x:Name="footer"  Text="Footer View" FontSize="14" TextColor="White"  VerticalTextAlignment="Center" HorizontalTextAlignment="Center"  />
                  </Grid>
  </navigation:SfNavigationDrawer.DrawerFooterView>
    
  <navigation:SfNavigationDrawer.DrawerContentView>
          <Grid x:Name="contentLayout"  >
                      <Label x:Name="content"  Text="Content View" FontSize="14" TextColor="White"  VerticalTextAlignment="Center" HorizontalTextAlignment="Center"  />
                  </Grid>                
      </navigation:SfNavigationDrawer.DrawerContentView>
</navigation:SfNavigationDrawer>
     

 

C# code inside Second Page:

namespace NDTabbedPage
{
public partial class SecondPage : ContentPage
{
    public SecondPage()
    {
        InitializeComponent();
 
 
        bt.Clicked += (sender, e) =>
        {
 
            navigationDrawer2.ToggleDrawer();
        };
 
    }
}
}
 

 

Image of Main Page:

Main page in SfNavigationDrawer

 

 

 

Image of NavigationDrawer inside First page:

SfNavigationDrawer inside First page

 

Image of NavigationDrawer inside second page:

 SfNavigationDrawer inside second page

 

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

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