Post
Ask Question

How To Hide Scroll Bar In Listview Xamarin.Forms

I hope you are all doing well.

In this post, I will be explaining how to hide scrollbar for ListView in Xamarin.Forms.

Step 1

Create a class in PCL/.NET Standard or shared project with any name that matches your naming conventions.

Here, I have created a class with the name “CustomListview”.

  1. using Xamarin.Forms;  
  2. namespace CustomListViewDemo {  
  3.     public class CustomListview: ListView {}  
  4. }  

Step 2

Create the renderer for Android platform.

  1. using Android.Content;  
  2. using CustomListViewDemo;  
  3. using CustomListViewDemo.Droid;  
  4. using Xamarin.Forms;  
  5. using Xamarin.Forms.Platform.Android;  
  6. [assembly: ExportRenderer(typeof(CustomListview), typeof(CustomListViewRenderer))]  
  7. namespace CustomListViewDemo.Droid {  
  8.     public class CustomListViewRenderer: ListViewRenderer {  
  9.         Context _context;  
  10.         public CustomListViewRenderer(Context context): base(context) {  
  11.             _context = context;  
  12.         }  
  13.         protected override void OnElementChanged(ElementChangedEventArgs < Xamarin.Forms.ListView > e) {  
  14.             base.OnElementChanged(e);  
  15.             if (Control != null) {  
  16.                 Control.VerticalScrollBarEnabled = false;  
  17.             }  
  18.         }  
  19.     }  
  20. }  

Step 3

Create a renderer for iOS platform.

  1. using CustomListViewDemo.iOS;  
  2. using Xamarin.Forms;  
  3. using Xamarin.Forms.Platform.iOS;  
  4. using CustomListViewDemo;  
  5. [assembly: ExportRenderer(typeof(CustomListview), typeof(CustomListViewRenderer))]  
  6. namespace CustomListViewDemo.iOS {  
  7.     public class CustomListViewRenderer: ListViewRenderer {  
  8.         protected override void OnElementChanged(ElementChangedEventArgs < ListView > e) {  
  9.             base.OnElementChanged(e);  
  10.             if (Control != null) {  
  11.                 Control.ShowsVerticalScrollIndicator = false;  
  12.             }  
  13.         }  
  14.     }  
  15. }  

Step 4

To use the newly-created custom renderer in PCL/.NET Standard or Shared project, we have to do the following things. 

We have to import the namespace into XAML using the following line.

  1. xmlns:local="clr-namespace:CustomListViewDemo"  

To know more about XAML namespaces, please click here.

Use the below line of code for using customized control wherever we require.

  1. <local:CustomListview></local:CustomListview>  

Finally, everything in XAML page at one glance is given below.

  1. <?xml version="1.0" encoding="utf-8" ?>  
  2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:CustomListViewDemo" x:Class="CustomListViewDemo.MainPage">  
  3.     <StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">  
  4.         <local:CustomListview></local:CustomListview>  
  5.     </StackLayout>  
  6. </ContentPage>  

I hope you enjoyed reading this blog. Please comment if you have any doubts.