Creating Draggable Sliding Up Panel in Xamarin Forms

Posted by at 28-05-2018 17:21:14 in Article

There were library provides a simple way to add a draggable sliding up panel (popularized by Google Music and Google Maps) to your Android application, But implementing across all platforms requires a couple of custom rendering and abstraction. Below are the popular apps that has draggable sliding up panel. Google Maps Umano

Creating Draggable Sliding Up Panel

Now lets start creating our own draggable sliding up panel in PURE xaml, No need to implement custom renderer or create bindings to an existing Android or iOS libraries (How is that possible?). Its simple we will just gonna need to subscribe to PanGestureRecognizer to the UI element in our case the bottom menu. [Below is the finish product.]

Creating Your Xamarin.Forms project 

Now let us create our new project and name it "SlidingUpPanel", you should be able to create three platforms project and atleast  one PCL project in my case i was created it in Visual Studio 2017 and im using Prism and Autofac.

The Secret in UI magic 

This is basically the classic tricks that we have done before in the previous project like "Custom Popup" you can read in this link. So first we have to wrap our content UI Elements around a GridLayout. Now inside the GridLayout we will add a StackLayout and we will gonna name it as "QuickMenuPullLayout" this will be the container of the draggable UI (handle). Now that we have completed the UI elements this time we will gonna wire up the animation in the backend code, we will gonna need extra help of one library that will gonna manage the subscription of events and to avoid memory leaked, We will gonna use Reactive Extension.

Wiring Up 

Just i have said earlier we will gonna need to subscribe to PanGestureRecognizer to the UI element in which is the bottom menu. with the help of the Reactive Extension we end up make it fluid and beautiful. With the help of PanGestureRecognizer we were able to update the UI element and make it draggable. We can also make the element not go beyond the specified bounds using Math.Max and Math.Min please the sample code below.

Awesome! Let's see it in Action 

Below is the finished product, I hope it will help you to the journey of Xamarin.Form mobile Development. If you want the source code please browse in this link here.

Wrapping Up

Creating Xamarin.forms Application should be a breeze with a tricks that have proven over time, And Xamarin is getting improved all this time and we should utilized it. If you want more and advance topic you can catch us at this facebook groups  MondPH And Xamdavao.  If you want the full sample source you can check it right here LINK. enjoy coding.
Original Author:

Tags: Creating Draggable Sliding Up Panel in Xamarin Forms

Login to comment.

Recent Comments

Be the first to Comment. You can ask a Query or Share your toughts or Just say thanks.