How to toggle the SfNavigationdrawer control
Syncfusion NavigationDrawer in Xamarin provides toggle drawer event to open the Drawer view. Drawer can be either opened by using “Swiping event” or by using “ToggleDrawer” method. The code snippets and the steps to be followed to toggle the SfNavigationDrawer control is given below.
To open Drawer ContentView in NavigationDrawer using toggle drawer follow the given procedure:
Step 1: Create Header, Footer inside DrawerHeaderView and DrawerFooterView. Initialize the DrawerContentView and add list of items to be visible on the drawer content.
Step 2: Create a button and set ToggleDrawer method to open the Drawer.
The below code illustrates the way to achieve this:
XAML code:
<ContentPage.Content> <navigation:SfNavigationDrawer x:Name="navigationDrawer" Position="Left" Transition="SlideOnTop" DrawerWidth="200" DrawerHeaderHeight="50" DrawerFooterHeight="50"> <navigation:SfNavigationDrawer.ContentView> <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Label x:Name="ContentHeader" Text="Content View" BackgroundColor="#1aa1d6" FontSize="14" TextColor="White" VerticalOptions="StartAndExpand" HorizontalTextAlignment="Center" HorizontalOptions="FillAndExpand" /> <Button Text="Show Menu" Grid.Row="1" BackgroundColor="#1aa1d6" x:Name="Btnmenu" HorizontalOptions="Center" VerticalOptions="Center" Clicked="Handle_Clicked" ></Button> </Grid> </navigation:SfNavigationDrawer.ContentView> <navigation:SfNavigationDrawer.DrawerHeaderView> <Grid x:Name="headerLayout" BackgroundColor="#1aa1d6" > <Label x:Name="header" Text="Header View" FontSize="14" TextColor="White" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" /> </Grid> </navigation:SfNavigationDrawer.DrawerHeaderView> <navigation:SfNavigationDrawer.DrawerFooterView> <Grid x:Name="footerrLayout" BackgroundColor="#1aa1d6" > <Label x:Name="footer" Text="Footer View" FontSize="14" TextColor="White" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" /> </Grid> </navigation:SfNavigationDrawer.DrawerFooterView> <navigation:SfNavigationDrawer.DrawerContentView> <ListView x:Name="list" /> </navigation:SfNavigationDrawer.DrawerContentView> </navigation:SfNavigationDrawer> </ContentPage.Content>
C# code:
namespace DrawerExample
{
public partial class MainPage : ContentPage
{
ListView listView = new ListView();
public MainPage()
{
InitializeComponent();
ObservableCollection<String> list = new ObservableCollection<string>();
list.Add("Home");
list.Add("Profile");
list.Add("Inbox");
list.Add("Outbox");
list.Add("Sent");
list.Add("Draft");
listView.ItemsSource = list;
navigationDrawer.DrawerContentView = listView;
}
void Handle_Clicked(object sender, System.EventArgs e)
{
navigationDrawer.ToggleDrawer();
}
}
}
Image before toggle Navigation Drawer:
|
Image after toggle Navigation Drawer:
|
