How To Hide Scroll Bar In Listview Xamarin.Forms

In this post, I will be explaining how to hide scrollbar for ListView in 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”.

using Xamarin.Forms;
namespace CustomListViewDemo {
    public class CustomListview: ListView {}
}

Step 2

Create the renderer for Android platform.

using Android.Content;
using CustomListViewDemo;
using CustomListViewDemo.Droid;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
[assembly: ExportRenderer(typeof(CustomListview), typeof(CustomListViewRenderer))]
namespace CustomListViewDemo.Droid {
    public class CustomListViewRenderer: ListViewRenderer {
        Context _context;
        public CustomListViewRenderer(Context context): base(context) {
            _context = context;
        }
        protected override void OnElementChanged(ElementChangedEventArgs < Xamarin.Forms.ListView > e) {
            base.OnElementChanged(e);
            if (Control != null) {
                Control.VerticalScrollBarEnabled = false;
            }
        }
    }
}

Step 3

Create a renderer for iOS platform.

using CustomListViewDemo.iOS;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
using CustomListViewDemo;
[assembly: ExportRenderer(typeof(CustomListview), typeof(CustomListViewRenderer))]
namespace CustomListViewDemo.iOS {
    public class CustomListViewRenderer: ListViewRenderer {
        protected override void OnElementChanged(ElementChangedEventArgs < ListView > e) {
            base.OnElementChanged(e);
            if (Control != null) {
                Control.ShowsVerticalScrollIndicator = false;
            }
        }
    }
}

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.

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.

<local:CustomListview></local:CustomListview>

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

<?xml version="1.0" encoding="utf-8" ?>
<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">
    <StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
        <local:CustomListview></local:CustomListview>
    </StackLayout>
</ContentPage>

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