Undisputedly, SideDrawer seems to be the most modern navigation paradigm these days. It does not take any screen space until you call it by a swipe gesture or on a button tap, and when you open it, you can easily see a list of all the screens that you app can offer.
![xamarin-sidedrawer]( "xamarin-sidedrawer")
So, it’s no surprise that this control is one of the most requested ones for the UI for Xamarin suite. And there you have it, the Telerik SideDrawer for Xamarin Forms is here full of transitions to choose from. The features are:
![]()
So, it’s no surprise that this control is one of the most requested ones for the UI for Xamarin suite. And there you have it, the Telerik SideDrawer for Xamarin Forms is here full of transitions to choose from. The features are:
-
Supported transitions:
- Push
- Reveal
- Reverse slide out
- Slide along
- Slide in on top
- Scale up
- Fade in
- Support for custom transitions
- Support for custom content
Here is how you can easily add RadSideDrawer with a hamburger button to your application:
<ContentPagexmlns="http://xamarin.com/schemas/2014/forms" xmlns:telerikPrimitives="clr-namespace:Telerik.XamarinForms.Primitives;assembly=Telerik.XamarinForms.Primitives" xmlns:telerik="clr-namespace:Telerik.XamarinForms.DataControls;assembly=Telerik.XamarinForms.DataControls" x:Class="SDKBrowser.Examples.SideDrawer.Transitions"> <ContentPage.ToolbarItems> <ToolbarItemActivated="OnToolbarButtonClick"Order="Primary"Priority="0"Icon="hamburgerButtonIcon"/> </ContentPage.ToolbarItems> <Grid> <telerikPrimitives:RadSideDrawerx:Name="drawer"DrawerLength="250"> <!-- RadSideDrawer content --> </telerikPrimitives:RadSideDrawer> </Grid></ContentPage>voidOnToolbarButtonClick(objectsender, EventArgs e){ drawer.IsOpen = !drawer.IsOpen;}And here is how to change the transition type:
drawer.DrawerTransitionType = SideDrawerTransitionType.SlideInOnTop;Adding menu items to the SideDrawer requires adding a RadListView with items in it, like this:
<telerikPrimitives:RadSideDrawer.DrawerContent> <Grid BackgroundColor="#826182"WidthRequest="220"> <telerik:RadListView x:Name="drawerList"/> </Grid></telerikPrimitives:RadSideDrawer.DrawerContent>this.drawerList.ItemsSource = newList<string>() { "Inbox", "Drafts", "Sent Items"};This is how we can fill the main view of the RadSideDrawer:
<telerikPrimitives:RadSideDrawer.MainContent> <!-- content here --> <Grid BackgroundColor="Gray"> </Grid></telerikPrimitives:RadSideDrawer.MainContent>Get a Trial of UI for Xamarin now and check how the SideDrawer for Xamarin.Forms works in the SDKBrowser demo app that ships with the UI for Xamarin suite.
