How to show hamburger icon in all pages in NavigationDrawer
You can display the hamburger icon in all the pages by setting the content page content to the navigation drawer content view property. Please follow the following steps to display the hamburger icon in all the pages:
Step 1: Place a grid control and define two row definitions in Xaml code.
Step 2: Place two buttons and a label in the first row of the grid control. The first button is used for showing the back button and the second button is Hamburger button. The label is used to display the page header.
Step3: Place the navigation drawer control in the second row of the grid control.
Step 4: Set the content page content to the navigation drawer content view property inside the event method.
The following code demonstrates how to show the hamburger icon in all the pages.
Xaml Code:
<Grid > <Grid.RowDefinitions> <RowDefinition Height="auto"/> <RowDefinition Height="600"/> <RowDefinition/> </Grid.RowDefinitions> <StackLayout BackgroundColor="#1aa1d6" Grid.Row="0" Orientation="Horizontal"> <Button x:Name="Back" HeightRequest="30" WidthRequest="30" IsVisible="false" Clicked="Handle_Clicked1" /> <Button x:Name="hamburgerButton" HeightRequest="50" WidthRequest="50" HorizontalOptions="Start" FontSize="20" BackgroundColor="#1aa1d6" Clicked="Handle_Clicked"/> <Label x:Name="headerLabel" HeightRequest="50" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Text="Home" FontSize="16" TextColor="White" BackgroundColor="#1aa1d6"/> </StackLayout> <navigationdrawer:SfNavigationDrawer Grid.Row="1" x:Name="navigationDrawer" DrawerWidth ="200" DrawerHeaderHeight="160"> <navigationdrawer:SfNavigationDrawer.ContentView> <Grid x:Name="mainContentView" BackgroundColor="White"> <Grid.RowDefinitions> <RowDefinition Height="600"/> <RowDefinition/> </Grid.RowDefinitions> <Label Grid.Row="0" x:Name="contentLabel" VerticalOptions="Center" HorizontalOptions="Center" Text="Content View" FontSize="14" TextColor="Black"/> </Grid> </navigationdrawer:SfNavigationDrawer.ContentView> <navigationdrawer:SfNavigationDrawer.DrawerHeaderView> <Grid BackgroundColor="#1aa1d6"> <Grid.RowDefinitions> <RowDefinition Height="120"/> <RowDefinition Height="40"/> </Grid.RowDefinitions> <Image Source="user.png" HeightRequest="110" Margin="0,10,0,0" BackgroundColor="#1aa1d6" VerticalOptions="Center" HorizontalOptions="Center"/> <Label Text="James Pollock" Grid.Row="1" HorizontalTextAlignment="Center" HorizontalOptions="Center" FontSize="20" TextColor="White"/> </Grid> </navigationdrawer:SfNavigationDrawer.DrawerHeaderView> <navigationdrawer:SfNavigationDrawer.DrawerContentView> <ListView x:Name="listView" ItemSelected ="Handle_ItemSelected"> <ListView.ItemTemplate> <DataTemplate> <ViewCell> <StackLayout HeightRequest="40"> <Label Margin="10,7,0,0" Text="{Binding}" FontSize="16"/> </StackLayout> </ViewCell> </DataTemplate> </ListView.ItemTemplate> </ListView> </navigationdrawer:SfNavigationDrawer.DrawerContentView> </navigationdrawer:SfNavigationDrawer> </Grid> |
C# code:
void Handle_ItemSelected(object sender, Xamarin.Forms.SelectedItemChangedEventArgs e)
{
if (e.SelectedItem.ToString() == "Home")
{
navigationDrawer.ContentView = new Home().Content;
headerLabel.Text = "Home";
Back.IsVisible = false;
}
else if (e.SelectedItem.ToString() == "Upload Document")
{
navigationDrawer.ContentView = new Upload_Document().Content;
headerLabel.Text = "Upload Document";
Back.IsVisible = true;
}
else if (e.SelectedItem.ToString() == "Profile")
{
navigationDrawer.ContentView = new Profile().Content;
headerLabel.Text = "Profile";
Back.IsVisible = true;
}
navigationDrawer.ToggleDrawer();
}
Sample image to show the hamburger icon in all the pages:
|
Please find the sample for showing the hamburger icon in all the pages in SfNavigationDrawer:
http://www.syncfusion.com/downloads/support/directtrac/general/ze/navsample-656403434
