Getting Started with the Telerik SideDrawer Control in Xamarin.Forms


Captura de Pantalla 2019-11-11 a la(s) 18.08.20.png

It is normal to see a side menu in every application that allows the user to navigate to other sections quickly and as a Xamarin developer, we know that there are several ways to implement this option, some complex and others not so much.

Considering this, Telerik decided to create the SideDrawer control that allows its integration in a simple way, and that in addition to this allows developers to embed any content within the sliding panel, from text and icons to sliders and filters. The best thing about this is that it is compatible with Xamarin.iOS, Xamarin.Android, the Universal Windows Platform and Xamarin.Forms

Various Customization Options

In addition, this control is highly customizable, since we can customize the side where we want the menu to appear, this from any of the four sides of the screen. It also has several effects and transition modes, some of them include:

Push, Reveal, Reverse Slide Out, Slide Along, Slide In On Top, Scale Up, Fade In.

Let’s Start!

  1. First of all we need install Telerik in your Visual Studio:
    For Mac    For Windows
  1. Add Telerik NugetPackage (See the instructions here)
  2. Let’s continue with the implementation, add the namespace:
  3. Then we add the control in the following simple way:

SideDrawer on XAML

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="TrkSideDrawer.Views.SideDrawerXAML"
xmlns:telerik="clr-namespace:Telerik.XamarinForms.Primitives;assembly=Telerik.XamarinForms.Primitives">
<telerik:RadSideDrawer x:Name="Drawer" DrawerLength="200" >
<telerik:RadSideDrawer.MainContent>
<Label Text="Side Menu" Margin="15,50"/>
</telerik:RadSideDrawer.MainContent>
<telerik:RadSideDrawer.DrawerContent>
<StackLayout Margin="0,38">
<Button Text="Home" />
<Button Text="Calendar" />
<Button Text="News" />
</StackLayout>
</telerik:RadSideDrawer.DrawerContent>
</telerik:RadSideDrawer>
</ContentPage>

view raw
SideDrawerXAML.xaml
hosted with ❤ by GitHub

SideDrawer on CS

using Xamarin.Forms;
using Telerik.XamarinForms.Primitives;
namespace TrkSideDrawer.Views
{
public class SideDrawerCode : ContentPage
{
public SideDrawerCode()
{
var drawerContent = new StackLayout();
drawerContent.Margin = new Thickness(18, 30);
drawerContent.Children.Add(new Button { Text = "Home" });
drawerContent.Children.Add(new Button { Text = "Calendar" });
drawerContent.Children.Add(new Button { Text = "News" });
drawerContent.Children.Add(new Button { Text = "Tasks" });
var sideDrawer = new RadSideDrawer
{
MainContent = new Label { Text = "Side Menu", Margin = new Thickness(15, 50),
},
DrawerContent = drawerContent,
DrawerLength = 200
};
Content = sideDrawer;
}
}
}

view raw
SideDrawerCode.cs
hosted with ❤ by GitHub

Once implemented, let’s save and see how it works:

iPhoneSideDrawer 1

Effects and Transitions

Remember that we have some effects that will make the menu more dynamic, here are some examples that we can use:

Location:

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="TrkSideDrawer.Views.LocationPage"
xmlns:telerikPrimitives="clr-namespace:Telerik.XamarinForms.Primitives;assembly=Telerik.XamarinForms.Primitives">
<ContentPage.ToolbarItems>
<ToolbarItem Activated="OnToolbarButtonClick"
Order="Primary"
Priority="0"
Text="IsOpen">
<ToolbarItem.Icon >
<OnPlatform x:TypeArguments="FileImageSource"
Android="hamburgerButtonIcon.png"
iOS="hamburgerButtonIcon.png" />
</ToolbarItem.Icon>
</ToolbarItem>
</ContentPage.ToolbarItems>
<Grid>
<telerikPrimitives:RadSideDrawer x:Name="drawer" DrawerLength="250" Margin="10,10">
<telerikPrimitives:RadSideDrawer.MainContent>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Label Text="Menu Location" />
<ListView x:Name="listview" Grid.Row="1" />
</Grid>
</telerikPrimitives:RadSideDrawer.MainContent>
<telerikPrimitives:RadSideDrawer.DrawerContent>
<Grid BackgroundColor="#826182" WidthRequest="220">
<ListView x:Name="drawerList" />
</Grid>
</telerikPrimitives:RadSideDrawer.DrawerContent>
</telerikPrimitives:RadSideDrawer>
</Grid>
</ContentPage>

view raw
LocationPage.xaml
hosted with ❤ by GitHub

using System;
using System.Linq;
using Xamarin.Forms;
using System.Collections.Generic;
using Telerik.XamarinForms.Primitives.SideDrawer;
namespace TrkSideDrawer.Views
{
public partial class LocationPage : ContentPage
{
public LocationPage()
{
InitializeComponent();
Title = "Location";
this.drawerList.ItemsSource = new List<string>() { "Home", "Contact", "Messages" };
var list = Enum.GetValues(typeof(SideDrawerLocation)).OfType<SideDrawerLocation>().ToList();
this.listview.ItemsSource = list;
Device.BeginInvokeOnMainThread(() => this.listview.SelectedItem = list[2]);
this.listview.ItemSelected += listview_ItemSelected;
}
void listview_ItemSelected(object sender, SelectedItemChangedEventArgs e)
{
if (e.SelectedItem != null)
{
drawer.DrawerLocation = (SideDrawerLocation)e.SelectedItem;
}
}
void OnToolbarButtonClick(object sender, EventArgs e)
{
drawer.IsOpen = !drawer.IsOpen;
}
}
}

view raw
LocationPage.xaml.cs
hosted with ❤ by GitHub

Transitions:

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="TrkSideDrawer.Views.TransitionsPage"
xmlns:telerik="clr-namespace:Telerik.XamarinForms.DataControls;assembly=Telerik.XamarinForms.DataControls"
xmlns:telerikPrimitives="clr-namespace:Telerik.XamarinForms.Primitives;assembly=Telerik.XamarinForms.Primitives">
<ContentPage.ToolbarItems>
<ToolbarItem Activated="OnToolbarButtonClick"
Order="Primary"
Priority="0"
Text="Open SideDrawer">
<ToolbarItem.Icon>
<OnPlatform x:TypeArguments="FileImageSource"
Android="hamburgerButtonIcon.png"
WinPhone="Assets/hamburgerButtonIcon.png"
iOS="hamburgerButtonIcon.png" />
</ToolbarItem.Icon>
</ToolbarItem>
</ContentPage.ToolbarItems>
<Grid>
<telerikPrimitives:RadSideDrawer x:Name="drawer" DrawerLength="250">
<telerikPrimitives:RadSideDrawer.MainContent>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Label Text="Transition Type:" Margin="10,10"/>
<Picker x:Name="picker"
Margin="10"
Grid.Row="1"
SelectedIndexChanged="picker_SelectedIndexChanged">
<Picker.Items>
<x:String>Push</x:String>
<x:String>Reveal</x:String>
<x:String>ReverseSlideOut</x:String>
<x:String>ScaleUp</x:String>
<x:String>SlideAlong</x:String>
<x:String>SlideInOnTop</x:String>
</Picker.Items>
</Picker>
<Label x:Name="descritpionLabel" Grid.Row="2" />
<Button x:Name="button1"
IsVisible="false"
Text="Open SideDrawer" />
</Grid>
</telerikPrimitives:RadSideDrawer.MainContent>
<telerikPrimitives:RadSideDrawer.DrawerContent>
<Grid BackgroundColor="#826182" WidthRequest="220">
<ListView x:Name="drawerList" />
</Grid>
</telerikPrimitives:RadSideDrawer.DrawerContent>
</telerikPrimitives:RadSideDrawer>
</Grid>
</ContentPage>

view raw
TransitionsPage.xaml
hosted with ❤ by GitHub

using System;
using Xamarin.Forms;
using System.Collections.Generic;
using Telerik.XamarinForms.Primitives;
namespace TrkSideDrawer.Views
{
public partial class TransitionsPage : ContentPage
{
public TransitionsPage()
{
InitializeComponent();
Title = "Transitions";
picker.SelectedIndex = 0;
this.drawerList.ItemsSource = new List<string>() { "Home", "Contact", "Messages", "Trash" };
}
void OnToolbarButtonClick(object sender, EventArgs e)
{
drawer.IsOpen = !drawer.IsOpen;
}
void picker_SelectedIndexChanged(object sender, EventArgs e)
{
switch ((sender as Picker).SelectedIndex)
{
case 1: drawer.DrawerTransitionType = SideDrawerTransitionType.Reveal; break;
case 2: drawer.DrawerTransitionType = SideDrawerTransitionType.ReverseSlideOut; break;
case 3: drawer.DrawerTransitionType = SideDrawerTransitionType.ScaleUp; break;
case 4: drawer.DrawerTransitionType = SideDrawerTransitionType.SlideAlong; break;
case 5: drawer.DrawerTransitionType = SideDrawerTransitionType.SlideInOnTop; break;
default: drawer.DrawerTransitionType = SideDrawerTransitionType.Push; break;
}
}
}
}

Share Your Feedback

For many of these we received feedback from you — extremely valuable and appreciated. Please, keep it coming, either by commenting below or by visiting our Feedback portal about Telerik UI for Xamarin. Let us know if you have any suggestions or if you need any particular features/controls.

And If you have not yet tried the Telerik UI for Xamarin suite, take it out for a spin with a 30-day free trial, offering all the functionalities and controls at your disposal at zero cost.

More Information: XamarinUI/SideDrawer

Download the solution: GitHub

¡Thanks for reading!

https://gist.github.com/LucioMSP/9c22c60af6612d899676374355afc11b.js

Responder

Por favor, inicia sesión con uno de estos métodos para publicar tu comentario:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s