How to change NavigationDrawer Width and Animation Duration of SfNavigationDrawer control
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:
|
