Articles in this section
Category / Section

How to change position and Transition in NavigationDrawer control

2 mins read

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

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments
Please sign in to leave a comment
Access denied
Access denied