Here is how you can easily add RadSideDrawer with a hamburger button to your application:
<
ContentPage
xmlns
=
"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
>
<
ToolbarItem
Activated
=
"OnToolbarButtonClick"
Order
=
"Primary"
Priority
=
"0"
Icon
=
"hamburgerButtonIcon"
/>
</
ContentPage.ToolbarItems
>
<
Grid
>
<
telerikPrimitives:RadSideDrawer
x:Name
=
"drawer"
DrawerLength
=
"250"
>
<!-- RadSideDrawer content -->
</
telerikPrimitives:RadSideDrawer
>
</
Grid
>
</
ContentPage
>
void
OnToolbarButtonClick(
object
sender, 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 =
new
List<
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.
Update: Check out the newly released Telerik Tagit, a cross-platform native mobile Xamarin app. We give you source code and a six-part walkthrough of how it was created. Check out how we implemented the SideDrawer control in that app, right here!
Nikolay Diyanov Diyanov is the Product Manager of the Native Mobile UI division at Progress. Delivering outstanding solutions that make developers' lives easier is his passion and the biggest reward in his work. In his spare time, Nikolay enjoys travelling around the world, hiking, sun-bathing and kite-surfing.
Find him on Twitter @n_diyanov or on LinkedIn.