)
We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to toggle the SfNavigationdrawer control

Platform: Xamarin.Forms |
Control: SfNavigationDrawer |
Published Date: April 7, 2017 |
Last Revised Date: June 24, 2019

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 before toggle Navigation Drawer

 

Image after toggle Navigation Drawer:

Image after toggle Navigation Drawer:

 

 

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon