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 PanelNow 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 projectNow 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 magicThis 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 UpJust 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 ActionBelow 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 UpCreating 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: Winston Gubantes