Telerik blogs
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

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:

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
      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


About the Author

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.

Related Posts

Comments

Comments are disabled in preview mode.