How to hide scroll bar in Listview Xamarin Forms

Hello All, I hope you are all doing well and good.

In this post I will gonna be explaining about how to hide scroll bar 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 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 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 newly created custom renderer in PCL/.NET Standard or Shared project, we have to do following things.

We have to import namespace into XAML using below line

          xmlns:local="clr-namespace:CustomListViewDemo"

To know more about XAML namespaces, please click here.

Use below line of code for using customized control wherever we require      <local:CustomListview></local:CustomListview>

Finally, everything in XAML page at one glance using content page and stack layout is like 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 article. Please comment me if you have any doubts.