Category / Section
How to show NavigationDrawer in Carousel page.
6 mins read
Steps to show Navigation Drawer in Carousel page:
Step 1: Create a content view and add navigation drawer to the content view.
Step 2: Create a carousel page and make it as main page.
Step 3: Add navigation drawer content view to the carousel page using the ContentPage property.
The following code sample demonstrates how to show navigation drawer in carousel page.
XAML
<ContentView xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:navigationdrawer="clr-namespace:Syncfusion.SfNavigationDrawer.XForms;assembly=Syncfusion.SfNavigationDrawer.XForms" x:Class="Sample.NavigationDrawer_Item1"> <ContentView.Content> <navigationdrawer:SfNavigationDrawer x:Name="navigationDrawer" DrawerWidth ="200" DrawerHeaderHeight="80"> <navigationdrawer:SfNavigationDrawer.ContentView> <Grid x:Name="mainContentView" BackgroundColor="White"> <Grid.RowDefinitions> <RowDefinition Height="auto"/> <RowDefinition/> </Grid.RowDefinitions> <StackLayout BackgroundColor="#1aa1d6" Orientation="Horizontal"> <Button x:Name="hamburgerButton" HeightRequest="50" WidthRequest="50" HorizontalOptions="Start" FontSize="20" BackgroundColor="#1aa1d6" Clicked="hamburgerButton_Clicked"/> <Label x:Name="headerLabel" HeightRequest="50" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Text="Home" FontSize="16" TextColor="White" BackgroundColor="#1aa1d6"/> </StackLayout> <StackLayout Grid.Row="1"> <WebView x:Name="webView" WidthRequest="1000" HeightRequest="1000" Source="https://www.google.co.in" /> </StackLayout> </Grid> </navigationdrawer:SfNavigationDrawer.ContentView> <!--Default Drawer--> <navigationdrawer:SfNavigationDrawer.DefaultDrawerSettings > <navigationdrawer:DrawerSettings DrawerWidth="200" Transition ="SlideOnTop" DrawerHeaderHeight="80" Position="Left"> <navigationdrawer:DrawerSettings.DrawerHeaderView> <Grid BackgroundColor="#1aa1d6"> <Grid.RowDefinitions> <RowDefinition Height="60"/> </Grid.RowDefinitions> <Label Text="Syncfusion Tree View" Grid.Row="0" HorizontalTextAlignment="Center" HorizontalOptions="Center" FontSize="20" TextColor="White"/> </Grid> </navigationdrawer:DrawerSettings.DrawerHeaderView> <navigationdrawer:DrawerSettings.DrawerContentView> <Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"> <ListView> <ListView.ItemsSource> <x:Array Type="{x:Type x:String}"> <x:String>Home</x:String> <x:String>Settings</x:String> </x:Array> </ListView.ItemsSource> </ListView> </Grid> </navigationdrawer:DrawerSettings.DrawerContentView> </navigationdrawer:DrawerSettings> </navigationdrawer:SfNavigationDrawer.DefaultDrawerSettings> </navigationdrawer:SfNavigationDrawer> </ContentView.Content> </ContentView>
XAML
<CarouselPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:local="clr-namespace:Sample" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Sample.FormsCarouselPage"> <ContentPage> <local:NavigationDrawer_Item1 /> </ContentPage> <ContentPage> <local:NavigationDrawer_Item2 /> </ContentPage> <ContentPage> <local:NavigationDrawer_Item3 /> </ContentPage> </CarouselPage>
C#
public partial class NavigationDrawer_Item1 : ContentView { public NavigationDrawer_Item1() { InitializeComponent (); hamburgerButton.Image = (FileImageSource)ImageSource.FromFile("hamburgericon.png"); } private void hamburgerButton_Clicked(object sender, EventArgs e) { navigationDrawer.ToggleDrawer(); } }
Screenshot
Please find the sample from the following link: Sample