)
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 NavigationDrawer Width and Animation Duration of SfNavigationDrawer control

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

Syncfusion NavigationDrawer in Xamarin provides Duration property to set time taken for the drawer to get open. DrawerWidth property is to set the width of the drawer.

 

To set Duration in NavigationDrawer follow the given procedures below.

 

Step 1: Create NavigationDrawer sample and set the value for Duration property.

Step 2: When you swipe to open the Drawer, the time to display the DrawerContentView is based on the value given in Duration property.

 

To set Width for DrawerView in NavigationDrawer follow the given procedures below.

 

Step 1: Create NavigationDrawer sample and set the value for DrawerWidth.

Step 2: Width of the Drawer get vary based on the value given in DrawerWidth property.

 

The below code illustrates the way to achieve this.

XAML code:

<navigation:SfNavigationDrawer x:Name="navigationDrawer"  EnableSwipeGesture="true" Position="Left" Transition="Push" TouchThreshold="100" DrawerHeight="100" Duration="500" DrawerWidth="250" DrawerHeaderHeight="100" DrawerFooterHeight="100"> 
<!-- We can change the DrawerWidth to any value as per the user needs  -->
<!--    Also we can change Duration property to make how speed the drawer gets open    -->
    <navigation:SfNavigationDrawer.ContentView>
<StackLayout x:Name="ContentFrame" Orientation="Vertical" >
    <Label Text="Main Content View of SfNavigationDrawer." HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" />
</StackLayout>
</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="footerLayout" BackgroundColor="#1aa1d6" >
    <Label x:Name="footer"  Text="Footer View" FontSize="14" TextColor="White"  VerticalTextAlignment="Center" HorizontalTextAlignment="Center"  />
</Grid>
</navigation:SfNavigationDrawer.DrawerFooterView>
      <navigation:SfNavigationDrawer.DrawerContentView>
          <StackLayout >
          <Label Text="Drawer Content View"  VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand"/>
          </StackLayout>
      </navigation:SfNavigationDrawer.DrawerContentView>
</navigation:SfNavigationDrawer>  

 

 

Image of change in DrawerWidth:

DrawerWidth in SfNavigationDrawer

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment
Comments
demo demo
Apr 02, 2018

https://www.syncfusion.com/support/directtrac/incidents/202494

Please check once above link.if any one have an idea reagarding this please share with me..

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