How to create MultiDrawer Application using Navigation Drawer
Steps to create MultiDrawer Application using Navigation Drawer:
Step 1: Implement the default drawer using the default drawer settings class.
Step 2: Define the all the necessary properties such as default drawer header view, default drawer content view, and default drawer footer view for the default drawer using the Drawer settings class.
Step 3: Implement the secondary drawer using the secondary drawer settings class
Step 4: Define the all the necessary properties such as secondary drawer header view, secondary drawer content view, and secondary drawer footer view for the secondary drawer using the Drawer settings class.
Step 5: Open the default drawer using the ToggleDrawer method.
Step 6: Open the secondary drawer using the ToggleSecondaryDrawer method.
The following code demonstrates how to create MultiDrawer application.
Xaml Code:
<navigationdrawer:SfNavigationDrawer x:Name="navigationDrawer"> <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"> <Label x:Name="contentLabel" VerticalOptions="Center" HorizontalOptions="Center" Text="Content View" FontSize="14" TextColor="Black"/> <Button Text="Open Default Drawer" Clicked="Button_Clicked"></Button> <Button Text="Open Secondary Drawer" Clicked="Button_Clicked_1" /> </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="120"/> </Grid.RowDefinitions> <Label Text="Syncfusion Xamarin Products" Grid.Row="0" HorizontalTextAlignment="Center" HorizontalOptions="Center" FontSize="20" TextColor="White"/> </Grid> </navigationdrawer:DrawerSettings.DrawerHeaderView> <navigationdrawer:DrawerSettings.DrawerContentView> <ListView x:Name="listView" ItemSelected="listView_ItemSelected"> <ListView.ItemTemplate> <DataTemplate> <ViewCell> <StackLayout HeightRequest="40"> <Label Text="{Binding}" FontSize="16"/> </StackLayout> </ViewCell> </DataTemplate> </ListView.ItemTemplate> </ListView> </navigationdrawer:DrawerSettings.DrawerContentView> </navigationdrawer:DrawerSettings> </navigationdrawer:SfNavigationDrawer.DefaultDrawerSettings>
<!--Secondary Drawer--> <navigationdrawer:SfNavigationDrawer.SecondaryDrawerSettings > <navigationdrawer:DrawerSettings x:Name="secondaryDrawer" TouchThreshold="50" DrawerHeaderHeight="80" DrawerWidth="200" DrawerFooterHeight="0" DrawerHeight="300" Duration="400" Position="Right" Transition="SlideOnTop"> <navigationdrawer:DrawerSettings.DrawerHeaderView> <Grid BackgroundColor="#1aa1d6"> <Grid.RowDefinitions> <RowDefinition Height="120"/> </Grid.RowDefinitions> <Label Text="Syncfusion Enterprise solution Products" Grid.Row="0" HorizontalTextAlignment="Center" HorizontalOptions="Center" FontSize="20" TextColor="White"/>
</Grid> </navigationdrawer:DrawerSettings.DrawerHeaderView> <navigationdrawer:DrawerSettings.DrawerContentView> <ListView x:Name="listView1" ItemSelected="Handle_ItemSelected"> <ListView.ItemTemplate> <DataTemplate> <ViewCell> <StackLayout HeightRequest="40"> <Label Text="{Binding}" FontSize="16"/> </StackLayout> </ViewCell> </DataTemplate> </ListView.ItemTemplate> </ListView> </navigationdrawer:DrawerSettings.DrawerContentView> </navigationdrawer:DrawerSettings>
</navigationdrawer:SfNavigationDrawer.SecondaryDrawerSettings> </navigationdrawer:SfNavigationDrawer> |
Code to open the default and secondary drawer:
public partial class MainPage : ContentPage { public MainPage() { InitializeComponent(); hamburgerButton.Image = (FileImageSource)ImageSource.FromFile("hamburgericon.png"); List<string> list = new List<string>(); list.Add("SfAutoComplete"); list.Add("SfBusyIndicator"); list.Add("SfComboBox"); list.Add("SfPicker"); list.Add("SfNavigationDrawer"); list.Add("SfRotator"); listView.ItemsSource = list;
List<string> list1 = new List<string>(); list1.Add("Dashboard Platform"); list1.Add("Dashboard cloud"); list1.Add("BigData Platform"); list1.Add("Report Platform"); list1.Add("Data Integration Platform"); listView1.ItemsSource = list1; }
void Handle_ItemSelected(object sender, Xamarin.Forms.SelectedItemChangedEventArgs e) { navigationDrawer.ToggleSecondaryDrawer(); }
void hamburgerButton_Clicked(object sender, EventArgs e) { navigationDrawer.ToggleDrawer(); }
private void listView_ItemSelected(object sender, SelectedItemChangedEventArgs e) { // Your codes here navigationDrawer.ToggleDrawer(); }
private void Button_Clicked(object sender, EventArgs e) { navigationDrawer.ToggleDrawer(); }
private void Button_Clicked_1(object sender, EventArgs e) { navigationDrawer.ToggleSecondaryDrawer(); } } |
Sample image to show the default drawer:
Sample image to show the secondary drawer:
Please find the sample from the following link:
http://www.syncfusion.com/downloads/support/directtrac/general/ze/MultiDrawerSample352686135