Articles in this section
Category / Section

How to add Navigation Drawer inside the Tabbed Page?

2 mins read

Syncfusion Xamarin.Forms Navigation Drawer provides Navigation Drawer 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

 

Conclusion

I hope you enjoyed learning about how to add Navigation Drawer inside the Tabbed Page.

You can refer to our Xamarin.Forms Navigation Drawer feature tour page to know about its other groundbreaking feature representations. You can also explore our  documentation to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forumsDirect-Trac, or feedback portal. We are always happy to assist you!


Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments
Please sign in to leave a comment
Access denied
Access denied