Getting Started with the Telerik SideDrawer Control in Xamarin.Forms
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!
- First of all we need install Telerik in your Visual Studio:
For Mac For Windows - Add Telerik NugetPackage (See the instructions here)
- Let’s continue with the implementation, add the namespace:
- Then we add the control in the following simple way:
SideDrawer on XAML
SideDrawer on CS
Once implemented, let’s save and see how it works:
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:
Transitions:
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!
