|
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
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
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();
};
}
}
}
|
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.
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