Can We Hide Scrollbar in ScrollView Xamarin.Forms

Question

As stated at the title

Is it possible to hide the scrollbar in ScrollView Xamarin.Forms without having to create a custom renderer for each platform?

I can't seem to find any answers, suggestions, or examples that are not using custom renderer.

forums.xamarin.com/discussion/28741/how-to-hide-the-scrollbar see this — AVI
– AVI, Commented Dec 17, 2015 at 10:16
No, this cannot be done without the use of a CustomRenderer — Gerald Versluis
– Gerald Versluis, Commented Dec 17, 2015 at 10:59
@DoughnutZombie I already read that article and it used CustomRenderer @GeraldVersluis I see, could you please give me a pointer to understand how to use CustomRenderer? — Akaya93
– Akaya93, Commented Dec 17, 2015 at 12:06
Sure it is not that hard. Maybe you can start by reading my blog post about this; blog.verslu.is/xamarin/… I will create an anwser post meanwhile — Gerald Versluis
– Gerald Versluis, Commented Dec 17, 2015 at 13:03

Gerald Versluis · Accepted Answer · 2018-03-07 21:22:06Z

13

edit Mar 7, 2018: for Googleability: a PR was merged which adds this ability to the default Xamarin.Forms toolkit. It should be released in the NuGets soon.

Original answer:

As stated in the comments you are not able to achieve this without the use of a CustomRenderer.

Create a class ScrollViewExRenderer in your iOS and Droid project and put this in it, the code taken from the link in the comments as well;

public class ScrollViewExRenderer : ScrollViewRenderer
{
    protected override void OnElementChanged(VisualElementChangedEventArgs e)
    {
        base.OnElementChanged(e);

        if (e.OldElement == null || this.Element == null)
            return;

        if (e.OldElement != null)
            e.OldElement.PropertyChanged -= OnElementPropertyChanged;

        e.NewElement.PropertyChanged += OnElementPropertyChanged;

    }

    protected void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
    {
        if (ChildCount > 0)
        {
            GetChildAt(0).HorizontalScrollBarEnabled = false;
            GetChildAt(0).VerticalScrollBarEnabled = false;
        }
    }
}

Above the namespace declaration put this line;

[assembly: ExportRenderer(typeof(ScrollView), typeof(ScrollViewExRenderer))]

Now your ScrollViews should not show any scrollbars

edited Mar 7, 2018 at 21:22

answered Dec 17, 2015 at 13:08

Gerald Versluis

34.4k7 gold badges88 silver badges110 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Akaya93 Over a year ago

Thanks man and sorry for replying after some time, but may I ask you how to hide the scrollbar for Windows Phone too?

Dave Wood Over a year ago

@gerald-versluis I know this is an old question/answer, but it looks like there's an error in OnElementChanged. The method will never execute the line e.OldElement.PropertyChanged -= OnElementPropertyChanged; because it would require e.OldElement != null, but if that's true, the method will exit out from the if statement above it. Unless I'm missing something?

Gerald Versluis Over a year ago

Hi Dave! That might be the case. I’d have to check. But I can do even better; I know for a fact that this will be part of Xamarin.Forms by default in the very near future! I will take another pass at this answer and update as needed. Thanks for letting me know!

Gerald Versluis Over a year ago

@DaveWood updated the answer with both the reference to the PR that got merged and fixed the code. Thanks!

Zany · Accepted Answer · 2016-08-14 13:09:21Z

Hey this seems a bit late to post an answer but since you haven't selected an answer i will post the procedure for android and windows projects. The answer given by gerald might have been true at some point but i couldn't get it to work maybe because xamarin has changed a lot.

Create a new class in .DROID and .UWP projects and add the following code

For .UWP

using Windows.UI.Xaml.Controls;
using System.ComponentModel;
using Xamarin.Forms;
using Xamarin.Forms.Platform.UWP;

[assembly: ExportRenderer(typeof(ScrollView), typeof(App3.UWP.Scrollbardisabledrenderer))]

namespace App3.UWP
{
    public class Scrollbardisabledrenderer : ScrollViewRenderer
    {
        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        {


            Control.HorizontalScrollBarVisibility = ScrollBarVisibility.Hidden;
            Control.VerticalScrollBarVisibility = ScrollBarVisibility.Hidden;

        }


    }

}

For .DROID

using System.ComponentModel;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;



[assembly: ExportRenderer(typeof(ScrollView), typeof(App3.Droid.Scrollbardisabledrenderer))]

namespace App3.Droid
{
    public class Scrollbardisabledrenderer : ScrollViewRenderer
    {
        protected override void OnElementChanged(VisualElementChangedEventArgs e)
        {
            base.OnElementChanged(e);

            if (e.OldElement != null || this.Element == null)
                return;

            if (e.OldElement != null)
                e.OldElement.PropertyChanged -= OnElementPropertyChanged;

            e.NewElement.PropertyChanged += OnElementPropertyChanged;



        }

        protected void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        {


                this.HorizontalScrollBarEnabled = false;
                this.VerticalScrollBarEnabled = false;



        }
    }
}

I'm sorry about .IOS I can't confirm whether my code is working or not because I dont have a mac.

Inside OnElementPropertyChanged the right code is: if (ChildCount > 0) { GetChildAt(0).HorizontalScrollBarEnabled = false; GetChildAt(0).VerticalScrollBarEnabled = false; }

Damir Beylkhanov · Accepted Answer · 2017-02-16 09:05:42Z

2

@Akaya93 @Zany you can hide scrollbar for iOS using the next code:

this.ShowsHorizontalScrollIndicator = false;
this.ShowsVerticalScrollIndicator = false;

answered Feb 16, 2017 at 9:05

Damir Beylkhanov

5553 silver badges13 bronze badges

Comments

adamm · Accepted Answer · 2021-03-11 20:51:15Z

2

If you have vertical ScrollView, you can put VerticalScrollBarVisibility="Never" in your xaml:

<ScrollView Orientation="Vertical" VerticalScrollBarVisibility="Never">

If you have horizontal ScrollView, you can put HorizontalScrollBarVisibility ="Never" in your xaml:

<ScrollView Orientation="Horizontal" HorizontalScrollBarVisibility ="Never">

answered Mar 11, 2021 at 20:51

adamm

9191 gold badge7 silver badges19 bronze badges

Comments

Dan · Accepted Answer · 2018-03-01 15:24:42Z

To hide ScrollBar in XamarinForms on my Android solution I used this:

https://forums.xamarin.com/discussion/73353/how-to-hide-scroll-bar-in-scrollview

But for IOS you have to change a code a bit:

public class ScrollBarDisabledRenderer : ScrollViewRenderer    
{   
     protected override void OnElementChanged(VisualElementChangedEventArgs e)
     {
        base.OnElementChanged(e);
        if (e.OldElement != null || Element == null)
            return;

        if (e.OldElement != null)
            e.OldElement.PropertyChanged -= OnElementPropertyChanged;
        e.NewElement.PropertyChanged += OnElementPropertyChanged;
      }

    private void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
    {
        ShowsHorizontalScrollIndicator = false;
        ShowsVerticalScrollIndicator = false;
    }
}

Above the namespace declaration:

[assembly: ExportRenderer(typeof(MyScrollView), typeof(ScrollBarDisabledRenderer))]

So, name of properties is different for IOS:

ShowsHorizontalScrollIndicator = false; ShowsVerticalScrollIndicator = false;

s.m. · Accepted Answer · 2016-09-20 09:45:49Z

-1

this code works on Android and for IOS replace :

this.HorizontalScrollBarEnabled = false;
this.VerticalScrollBarEnabled = false;

by

ShowsHorizontalScrollIndicator = false;
ShowsVerticalScrollIndicator = false;

edited Sep 20, 2016 at 9:45

s.m.

8,0732 gold badges40 silver badges48 bronze badges

answered Sep 20, 2016 at 9:23

Benoit Canonne

4506 silver badges6 bronze badges

1 Comment

Rafael Emshoff Over a year ago

You are not answering the question. The OP is specifically asking for a way to do this with one code set, not two different ones per platform.

Collectives™ on Stack Overflow

Can We Hide Scrollbar in ScrollView Xamarin.Forms

6 Answers 6

4 Comments

1 Comment

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

4 Comments

1 Comment

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related