Post
Ask Question

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
  1. using ReactiveUI;  
  2. using System;  
  3. using System.Collections.Generic;  
  4. using System.Linq;  
  5. using System.Text;  
  6. using System.Threading.Tasks;  
  7.   
  8. namespace SlideUpDemo.ViewModels  
  9. {  
  10.     public class AbstractViewModel : ReactiveObject  
  11.     {  
  12.         public AbstractViewModel()  
  13.         {  
  14.   
  15.         }  
  16.     }  
  17. }   
Next, add another class named TestPageAllXamlViewModel.cs and insert the code given below.
 
C# Code 
  1. using ReactiveUI.Fody.Helpers;  
  2. using System;  
  3. using System.Collections.Generic;  
  4. using System.Linq;  
  5. using System.Text;  
  6. using System.Threading.Tasks;  
  7. using System.Windows.Input;  
  8. using Xamarin.Forms;  
  9.   
  10. namespace SlideUpDemo.ViewModels  
  11. {  
  12.     public class TestPageAllXamlViewModel : AbstractViewModel  
  13.     {  
  14.           
  15.         [Reactive]  
  16.         public bool IsPlaying { get; set; }  
  17.         [Reactive]  
  18.         public bool IsFavorite { get; set; }  
  19.   
  20.         [Reactive]  
  21.         public ImageSource PlayButtonImage { get; set; }  
  22.   
  23.         [Reactive]  
  24.         public ImageSource FavoriteButtonImage { get; set; }  
  25.   
  26.          
  27.   
  28.         public ICommand PlayCommand { get; set; }  
  29.   
  30.         public ICommand ShowCommand { get; set; }  
  31.         public ICommand HideCommand { get; set; }  
  32.   
  33.   
  34.         [Reactive]  
  35.         public double PanelRatio { get; set; }  
  36.   
  37.         [Reactive]  
  38.         public bool HideTitleView { get; set; }  
  39.   
  40.         public TestPageAllXamlViewModel()  
  41.         {  
  42.         }  
  43.     }  
  44. }   
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.
NameSpace
  1. xmlns:DK="clr-namespace:DK.SlidingPanel.Interface;assembly=DK.SlidingPanel.Interface"  
XAML Code 
  1. <?xml version="1.0" encoding="utf-8" ?>  
  2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"  
  3.              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
  4.              xmlns:local="clr-namespace:SlideUpDemo"  
  5.              xmlns:DK="clr-namespace:DK.SlidingPanel.Interface;assembly=DK.SlidingPanel.Interface"  
  6.              x:Class="SlideUpDemo.MainPage"  
  7.              >  
  8.     <StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">  
  9.           
  10.         <DK:SlidingUpPanel x:Name="spTest" BackgroundColor="Coral"  SlideAnimationSpeed="250" IsExpandable="True" IsPanSupport="True">  
  11.            
  12.               
  13.             <DK:SlidingUpPanel.MainView>  
  14.                 <ScrollView>  
  15.                 <StackLayout Orientation="Vertical" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">  
  16.                     <Label Text="Hai All this is Main Layout" FontSize="30"/>  
  17.                     <Label Text="Hai All this is Main Layout" FontSize="30"/>  
  18.                     <Label Text="Hai All this is Main Layout" FontSize="30"/>  
  19.                     <Label Text="Hai All this is Main Layout" FontSize="30"/>  
  20.                     <Label Text="Hai All this is Main Layout" FontSize="30"/>  
  21.                     <Label Text="Hai All this is Main Layout" FontSize="30"/>  
  22.                     <Label Text="Hai All this is Main Layout" FontSize="30"/>  
  23.                     <Label Text="Hai All this is Main Layout" FontSize="30"/>  
  24.                     <Label Text="Hai All this is Main Layout" FontSize="30"/>  
  25.                     <Label Text="Hai All this is Main Layout" FontSize="30"/>  
  26.                     <Label Text="Hai All this is Main Layout" FontSize="30"/>  
  27.                     <Label Text="Hai All this is Main Layout" FontSize="30"/>  
  28.                 </StackLayout>  
  29.                 </ScrollView>  
  30.             </DK:SlidingUpPanel.MainView>  
  31.   
  32.               
  33.               
  34.             <DK:SlidingUpPanel.HideTitleView>True</DK:SlidingUpPanel.HideTitleView>  
  35.             <DK:SlidingUpPanel.HideNavBar>True</DK:SlidingUpPanel.HideNavBar>  
  36.             <DK:SlidingUpPanel.PanelRatio>0.5</DK:SlidingUpPanel.PanelRatio>  
  37.               
  38.             <DK:SlidingUpPanel.HeaderView>  
  39.                   
  40.                     <StackLayout Orientation="Horizontal" HeightRequest="48" Padding="0, 12, 0, 12" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="#303030">  
  41.                          
  42.                     <Image HeightRequest="24" WidthRequest="24" Source="ic_keyboard_arrow_left_black_48dp.png" HorizontalOptions="Start" VerticalOptions="FillAndExpand">  
  43.                             <Image.GestureRecognizers>  
  44.                                 <TapGestureRecognizer Tapped="BackButtonTapGesture_Tapped"></TapGestureRecognizer>  
  45.                             </Image.GestureRecognizers>  
  46.                         </Image>  
  47.   
  48.                         <Label Text="Title" HorizontalOptions="CenterAndExpand" TextColor="White"></Label>  
  49.                     </StackLayout>  
  50.                   
  51.   
  52.             </DK:SlidingUpPanel.HeaderView>  
  53.               
  54.             <DK:SlidingUpPanel.PictureView>  
  55.                 <Image BackgroundColor="White" HorizontalOptions="StartAndExpand" VerticalOptions="StartAndExpand" Aspect="AspectFill" Source="honda.jpg"></Image>  
  56.             </DK:SlidingUpPanel.PictureView>  
  57.   
  58.             <DK:SlidingUpPanel.TitleView>  
  59.                 <StackLayout  Orientation="Vertical" HeightRequest="80" BackgroundColor="GreenYellow">  
  60.                     <Label Text="Title 1" FontSize="20"></Label>  
  61.                     <Label Text="Title2" FontSize="20"></Label>  
  62.                 </StackLayout>  
  63.              </DK:SlidingUpPanel.TitleView>  
  64.             <DK:SlidingUpPanel.BodyView>  
  65.                 <ScrollView BackgroundColor="Blue">  
  66.                     <Label Text="Test Body y Test Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body yTest Body y ">  
  67.                       
  68.                     </Label>  
  69.                 </ScrollView>  
  70.             </DK:SlidingUpPanel.BodyView>  
  71.   
  72.         </DK:SlidingUpPanel>  
  73.     </StackLayout>  
  74.   
  75. </ContentPage>  
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
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Text;  
  5. using System.Threading.Tasks;  
  6. using DK.SlidingPanel.Interface;  
  7. using ReactiveUI;  
  8. using SlideUpDemo.ViewModels;  
  9. using Xamarin.Forms;  
  10.   
  11. namespace SlideUpDemo  
  12. {  
  13.     public partial class MainPage : ContentPage  
  14.     {  
  15.         private TestPageAllXamlViewModel ViewModel;  
  16.           
  17.   
  18.         protected override void OnBindingContextChanged()  
  19.         {  
  20.             base.OnBindingContextChanged();  
  21.   
  22.             this.ViewModel = BindingContext as TestPageAllXamlViewModel;  
  23.   
  24.             this.spTest.SetBinding(SlidingUpPanel.PanelRatioProperty, new Binding { Path = "PanelRatio" });  
  25.             this.spTest.SetBinding(SlidingUpPanel.HideTitleViewProperty, new Binding { Path = "HideTitleView" });  
  26.               
  27.             this.spTest.WhenPanelRatioChanged += SpTest_WhenPanelRatioChanged;  
  28.             this.spTest.WhenSlidingPanelStateChanged += SpTest_WhenSlidingPanelStateChanged;  
  29.   
  30.             SlidingPanelConfig config = new SlidingPanelConfig();  
  31.   
  32.             config.PrimaryFloatingActionButton = GetPrimaryFloatingActionButton();  
  33.             config.SecondaryFloatingActionButton = GetSecondaryFlotingButton();  
  34.   
  35.             spTest.ApplyConfig(config);  
  36.   
  37.               
  38.   
  39.   
  40.             if (spTest.CurrentState != SlidingPanelState.Expanded)  
  41.             {  
  42.                 spTest.HidePanel();  
  43.                   
  44.             }  
  45.             else  
  46.             {  
  47.                 spTest.ShowCollapsedPanel();  
  48.             }  
  49.   
  50.   
  51.         }  
  52.   
  53.         private Image GetSecondaryFlotingButton()  
  54.         {  
  55.             Image primaryImage = new Image();  
  56.             primaryImage.HeightRequest = 48;  
  57.             primaryImage.WidthRequest = 48;  
  58.             primaryImage.Margin = new Thickness(0, 6, 0, 0);  
  59.             primaryImage.Source = ImageSource.FromFile("StopButton.png");  
  60.   
  61.             TapGestureRecognizer tapGestureRecognizer = new TapGestureRecognizer();  
  62.             tapGestureRecognizer.Tapped += TapGestureRecognizer_Tapped;  
  63.             primaryImage.GestureRecognizers.Add(tapGestureRecognizer);  
  64.             return (primaryImage);  
  65.         }  
  66.   
  67.         private Image GetPrimaryFloatingActionButton()  
  68.         {  
  69.             Image primaryImage = new Image();  
  70.             primaryImage.HeightRequest = 48;  
  71.             primaryImage.WidthRequest = 48;  
  72.             primaryImage.Source = ImageSource.FromFile("PlayButton.png");  
  73.   
  74.             TapGestureRecognizer tapGestureRecognizer = new TapGestureRecognizer();  
  75.             tapGestureRecognizer.Tapped += TapGestureRecognizer_Tapped;  
  76.             primaryImage.GestureRecognizers.Add(tapGestureRecognizer);  
  77.             return (primaryImage);  
  78.         }  
  79.   
  80.         private void TapGestureRecognizer_Tapped(object sender, EventArgs e)  
  81.         {  
  82.             this.ViewModel.IsPlaying = !(this.ViewModel.IsPlaying);  
  83.         }  
  84.   
  85.         public MainPage()  
  86.         {  
  87.             InitializeComponent();  
  88.         }  
  89.         private void SpTest_WhenSlidingPanelStateChanged(object sender, DK.SlidingPanel.Interface.StateChangedEventArgs e)  
  90.         {  
  91.             switch (e.State)  
  92.             {  
  93.                 case SlidingPanelState.Expanded:  
  94.                       
  95.         NavigationPage.SetHasNavigationBar(this, false);  
  96.                     break;  
  97.                 case SlidingPanelState.Collapsed:  
  98.                 case SlidingPanelState.Hidden:  
  99.                 default:  
  100.                     //NavigationPage.SetHasNavigationBar(this, true);  
  101.                     break;  
  102.             }  
  103.         }  
  104.         private void SpTest_WhenPanelRatioChanged(object sender, EventArgs e)  
  105.         {  
  106.             spTest.ShowCollapsedPanel();  
  107.         }  
  108.         private void BackButtonTapGesture_Tapped(object sender, EventArgs e)  
  109.         {  
  110.             spTest.ShowCollapsedPanel();  
  111.         }  
  112.   
  113.         private void TapGestureRecognizer_OnTapped(object sender, EventArgs e)  
  114.         {  
  115.             this.ViewModel.IsPlaying = !(this.ViewModel.IsPlaying);  
  116.         }  
  117.     }  
  118. }   
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 
  1. <?xml version="1.0" encoding="utf-8" ?>  
  2. <Weavers>  
  3.   <ReactiveUI />  
  4. </Weavers>  
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.


Similar Articles