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: November 16, 2018).
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.

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