How to add Navigation Drawer inside the Tabbed Page?
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:
|
|
Image of NavigationDrawer inside First page:
|
Image of NavigationDrawer 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 forums, Direct-Trac, or feedback portal. We are always happy to assist you!
