)
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 change position and Transition in NavigationDrawer control

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

Syncfusion NavigationDrawer in Xamarin provides Position property to change the direction of the slider view in NavigationDrawer and transition property is to change the animation by which the drawer can open.

 

To change the position of the DrawerView in  NavigationDrawer us follow the given procedure:

 

In SfNavigationDrawer, the position property can be set in 4 different ways. They are

 

  1. Left
  2. Right
  3. Top
  4. Bottom

Step 1: Create Navigation Drawer and set position Property.

Step 2: DrawerView displays based on the direction given in the Position property.

 

To change the Transition of the DrawerView in  NavigationDrawer us follow the given procedure:

 

In NavigationDrawer Transition property can be set in three different ways. They are

 

  1. Push
  2. Reveal
  3. SlideOnTop

Step 1: Create NavigationDrawer and Set Transition property inside SfNavigationDrawer

Step 2: Depending on the Transition Property the DrawerSlider gets toggled in respective views.

 

The below code illustrates the way to achieve this.

XAML code:

<navigation:SfNavigationDrawer x:Name="navigationDrawer"  Position="Right" Transition="Push" TouchThreshold="30"   DrawerHeight="200" DrawerWidth="120" DrawerHeaderHeight="100" DrawerFooterHeight="100">
<!-- User can change the Position and Transition as mentioned in the above procedure -->
<navigation:SfNavigationDrawer.ContentView>
<StackLayout x:Name="ContentFrame" Orientation="Vertical">
    <StackLayout x:Name="headerFrame" Orientation="Horizontal"  BackgroundColor="#1aa1d6">
 
        <Label x:Name="homeLabel" FontSize="15" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" HorizontalOptions="FillAndExpand" HeightRequest="50" Text="Navigation Drawer" TextColor="White" />
 
    </StackLayout>
    <Button Text="Show Menu" Grid.Row="1"  BackgroundColor="#1aa1d6"  x:Name="Btnmenu" HorizontalOptions="Center" VerticalOptions="Center" ></Button>
</StackLayout>
</navigation:SfNavigationDrawer.ContentView>
 
<navigation:SfNavigationDrawer.DrawerHeaderView>
<Grid x:Name="headerLayout" BackgroundColor="#1aa1d6" >
    <Label x:Name="header"  Text="Header" FontSize="14" TextColor="White"  VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand"  />
 
</Grid>
</navigation:SfNavigationDrawer.DrawerHeaderView>
 
<navigation:SfNavigationDrawer.DrawerFooterView>
<Grid x:Name="footerLayout" BackgroundColor="#1aa1d6" >
    <Label x:Name="footer"  Text="Logout" FontSize="14" TextColor="White"  VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand"  />
</Grid>
</navigation:SfNavigationDrawer.DrawerFooterView>
 
<navigation:SfNavigationDrawer.DrawerContentView>
<ListView x:Name="listView" BackgroundColor="White"/>
</navigation:SfNavigationDrawer.DrawerContentView>
</navigation:SfNavigationDrawer> 

 

C# code:

namespace DrawerExample
{
public partial class MainPage : ContentPage
{
    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;
 
        Btnmenu.Clicked += (sender, e) =>
        {
            DependencyService.Get<IToggleDrawer>().ToggleDrawer();
        };
 
    }
}
}
 

 

Image for content page:

SfNavigationDrawer content page

 

Image for Position Right & Transition Push:

 

Position Right & Transition Push

 

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment
Comments
jahanzaib zahid
Jan 01, 2018

When drawer is open and i killed the application and then make it resume drawer left side become disabled and event like show menu dont call please figure it out the problem to solve

Reply

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