Xamarin.Forms - Slide-Up Panel App

Introduction
                     This article demonstrates how to enable slide-up panel in Xamarin.Forms application. This means if the user drags the panel from down to up, it shows title, image, description and more. Similarly, the user can drag the panel from up to down and it will show only the title and set the custom behavior of it. These features are not listed by default in a Xamarin.Forms application. So, we need to install a plug-in for this.

NuGet Package - Search Xamarin.Forms 

• DK.SlideUpPanel
• Reactive.Fody

Xamarin.Android Output

Let's start.

Step 1:
                You can create Xamarin.Forms app by going to File >> New >> Visual C# >> Cross-Platform >>Cross Platform App (Xamarin.Native or Xamarin.Forms), give the application name, and click OK.

(Eg- Project name: SlidingDemo)

Step 2
                After the project creation, add the following NuGet package to your project.

• DK.SlideUpPanel
• Reactive.Fody

For that, open Solution Explorer and select your solution. Right-click and select "manage Nuget Package for the Solution". In the popup window, open "Browse " tab and browse "DK.SlideUpPanel","Reactive.Fody" and select the following NuGet packages and select yours then install it. 

Step 3

                Afterwards, Add ViewModels Folder. For that, open Solution Explorer >>SlidingDemo(PCL) >> right click and select Add followed by selecting New Folder named ViewModels.

Open Solution Explorer >>SlidinDemo(PCL)>>right-click and select Add folloed by selecting New Item. In the popup window select class. In this way, you can create a new class.

In this step, add a new class named AbstractViewModels.cs and add the following code.

C# Code

Next, add another class named TestPageAllXamlViewModel.cs and insert the code given below.

C# Code 

Step 4

                Open Solution Explorer >> SlidingDemo(PCL) >> double-click to open MainPage.Xaml page and You can add assembly and XAML code to your project. Here is the code.

• SlidingUpPanel.MainiView - MainView Layout.
• SlidingUpPanel.HideTitleView - we need to show Title of Sliding Panel on Hidden Mode, so enable true.
• SlidingUpPanel.HideNavBar - we need to show NavBar on Hidden Mode, so enable true or false.
• SlidingUpPanel.HeaderView - It's the header view of Sliding panel.
• SlidingUpPanel.PictureView -It's the Picture view of Sliding panel.
• SlidingUpPanel.BodyView - It's the body view of sliding panel.
• SlidingUpPanel.PanelRatio - Set the panel ratio of sliding panel.

XAML Code

Step 5

                Next, open Solution Explorer >> SlidingDemo(PCL) >> click open desgin view of MainPage.Xaml.cs and here is the code for this page. 

• PrimaryFloatingButton - In this the floating button shows on before we slidingup
• SecondaryFloatingButton - In this the floating Button shows on after we slidingup

C# Code Behind

Step 6

                Add FodyWeavers.xml file. For that, open Solution Explorer >>SlidingDemo(PCL)>> Right-click and select New Item.  In the popup window, select Xml file named FodyWeavers.xml and click ok. Copy and Paste this file to all projects( Xamarin.Android, Xamarin.IOS).

Add the Following Code.

XML code

Step 7

                Now, go to "Build" menu and click "Configure Manager". Here, you can configure startup projects. Click F5 or start to build and run your application.

After a few seconds, the app will start running on Android simulator or emulator and we will see your app working successfully.

Finally, we have successfully created a Xamarin.Forms SlidingDemo application using DK.SlideUpPanel plugin.

Please download the source code from here.