Articles in this section
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

NavigationDrawer_CarouselView

 

 

Please find the sample from the following link: Sample

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