How to show NavigationDrawer in Carousel page.
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
