|
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:
|
2X faster development
The ultimate Xamarin UI toolkit to boost your development speed.
This page will automatically be redirected to the sign-in page in 10 seconds.
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.
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..