Disable ScrollView in Xamarin Forms without disabling buttons

Question

I have the following XAML. I want to target phones with a scrollview, and want scrolling disabled on a tablet.

 <ScrollView InputTransparent="False" Orientation="Both" >

            <ScrollView.IsEnabled>
                <OnIdiom x:TypeArguments="x:Boolean">

                    <OnIdiom.Phone>True</OnIdiom.Phone>
                    <OnIdiom.Tablet>True</OnIdiom.Tablet>
                </OnIdiom>
            </ScrollView.IsEnabled>

    <StackLayout VerticalOptions="FillAndExpand" BackgroundColor="White" >
                <StackLayout.HorizontalOptions>
                    <OnIdiom x:TypeArguments="LayoutOptions">
                        <OnIdiom.Tablet>FillAndExpand</OnIdiom.Tablet>
                        <OnIdiom.Phone>Start</OnIdiom.Phone>
                    </OnIdiom>

                </StackLayout.HorizontalOptions>

                <Grid BackgroundColor="White" HeightRequest="65" MinimumHeightRequest="65">
                    <Grid.HorizontalOptions>
                        <OnIdiom x:TypeArguments="LayoutOptions">
                            <OnIdiom.Tablet>CenterAndExpand</OnIdiom.Tablet>
                            <OnIdiom.Phone>Start</OnIdiom.Phone>
                        </OnIdiom>

                    </Grid.HorizontalOptions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition  Width="Auto"  />
                    </Grid.ColumnDefinitions>
                    <WebView x:Name="webViewBtn1" HeightRequest="65" Grid.Column="0" Grid.ColumnSpan="1"  VerticalOptions="FillAndExpand" BackgroundColor="White">
                    <WebView.HorizontalOptions>
                        <OnIdiom x:TypeArguments="LayoutOptions">
                            <OnIdiom.Tablet>CenterAndExpand</OnIdiom.Tablet>
                            <OnIdiom.Phone>Start</OnIdiom.Phone>
                        </OnIdiom>
                    </WebView.HorizontalOptions>
                        <WebView.WidthRequest>
                            <OnIdiom x:TypeArguments="x:Double">
                                <OnIdiom.Tablet>770</OnIdiom.Tablet>
                                <OnIdiom.Phone>300</OnIdiom.Phone>

                            </OnIdiom>

                        </WebView.WidthRequest>
                    </WebView>
                    <Button Grid.Column="0" Grid.ColumnSpan="1" x:Name="btn1" Clicked="btn1_Clicked" BackgroundColor="Transparent" TextColor="Transparent"  BorderColor="White" />
                </Grid>
    </StackLayout>
        </ScrollView>

the buttons no longer allow the user to click on them if I set ScrollView.IsEnabled the following way:

  <OnIdiom.Tablet>False</OnIdiom.Tablet>

My assumption that using InputTransparent was not correct. Is there a way to make the buttons clickable inside a scroll view that has scrolling disabled?

I essentially am looking for something like Orientation=None, but that is not an option.

If the content of the scrollview fits within the bounds of the scrollview, scrolling will be disabled by default anyway, so there's no reason to differentiate between phone and tablet. — Philippe Leybaert
– Philippe Leybaert, Commented Oct 20, 2018 at 1:36

Ranga · Accepted Answer · 2018-10-20 01:29:29Z

8

You need to write a CustomRenderer for disabling the scroll.

On iOS UIScrollView has a ScrollEnabled property

protected override void OnElementChanged(VisualElementChangedEventArgs e)
{
    base.OnElementChanged(e);
    // IsScrollEnabled just a custom property
    // handled it in OnPropertyChanged too
    ScrollEnabled = Element.IsScrollEnabled;
}

Android it is a bit tricky, there is not direct property. We intercept the touch event and return without handling it.

public override bool OnInterceptTouchEvent(MotionEvent ev)
{
    if (Element.IsScrollEnabled)
    {
        return base.OnInterceptTouchEvent(ev);
    }
    else
    {
        return false;
    }
}

public override bool OnTouchEvent(MotionEvent ev)
{
    if (Element.IsScrollEnabled)
    {
        return base.OnTouchEvent(ev);
    }
    else
    {
        return false;
    }
}

answered Oct 20, 2018 at 1:29

Ranga

1,1087 silver badges13 bronze badges

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

3 Comments

lucidbrot Over a year ago

The solution for iOS is awesome, thanks! Can we, on android, distinguish between touch events for scrolling and for tapping child buttons?

Ranga Over a year ago

I haven't tried it yet but, the touch event should pass through all the containing elements.

lucidbrot Over a year ago

It does propagate to the child elements, but it also does still scroll. At least it does for me. returning true instead of false in OnTouchEvent does not seem to affect that. Returning true from OnInterceptTouchEvent does stop the scrolling from happening, but also blocks the children.

Moataz Hossam · Accepted Answer · 2019-11-25 06:36:34Z

5

In the latest version of Xamarin Forms, you can set the Orientation to Neither.

scrollV.Orientation = ScrollOrientation.Neither;

answered Nov 25, 2019 at 6:36

Moataz Hossam

4137 silver badges20 bronze badges

7 Comments

Vlad Servitola Over a year ago

It makes my scrollview jump to the top. Any ideas?

Moataz Hossam Over a year ago

Try to set it in the initialization of the page. Is this applicable in your case?

Vlad Servitola Over a year ago

sadly but no. I want to disable it temporary while moving some points on a chart. And the user can be on any scroll position at the moment

Moataz Hossam Over a year ago

ok. another workaround would be to add a transparent view above the whole scrollview which will be only visible if the chart is animating

Vlad Servitola Over a year ago

Hm. It gave me a good idea. Thank you very much. Really. Yes, the overlay can solve it in this kind of way.

|

Mike Wiggens 442 · Accepted Answer · 2018-10-20 07:33:05Z

I ended up using this approach to disable vertical scrolling on an iPad, which is my target device. Not perfect for android 7 inch tablets, but oh well:

            <ScrollView.Orientation>
                <OnPlatform x:TypeArguments="ScrollOrientation">
                    <On Platform="iOS">
                        <OnIdiom x:TypeArguments="ScrollOrientation">
                            <OnIdiom.Phone>Both</OnIdiom.Phone>
                            <OnIdiom.Tablet>Horizontal</OnIdiom.Tablet>
                        </OnIdiom>
                    </On>
                    <On Platform="Android">
                        <OnIdiom x:TypeArguments="ScrollOrientation">
                            <OnIdiom.Phone>Both</OnIdiom.Phone>
                            <OnIdiom.Tablet>Both</OnIdiom.Tablet>
                        </OnIdiom>
                    </On>
                    <On Platform="UWP">Both</On>
                </OnPlatform>
            </ScrollView.Orientation>

Alex Perelberg · Accepted Answer · 2019-10-27 14:41:11Z

Cool and compact way to disable scrolling in Xamarin Forms without affecting it's children through ScrollEnabled extension method:

public static class ScrollViewEx
{
    /// <summary>
    /// Disables scrollview by modifying Scrolled Event and attaching itself to ScrollView's binding context
    /// Scrolled event sends it back to the original x,y
    /// </summary>
    public class DisabledScrollClass : IDisposable
    {
        private double ScrollX;
        private double ScrollY;
        private object OldContext;
        private ScrollView Parent;

        public DisabledScrollClass(ScrollView parent)
        {
            Parent = parent;
            ScrollX = parent.ScrollX;
            ScrollY = parent.ScrollY;
            OldContext = parent.BindingContext;
            parent.Scrolled += Scrolled;
            parent.BindingContext = this;
        }

        private void Scrolled(object sender, ScrolledEventArgs e)
        {
            (sender as ScrollView)?.ScrollToAsync(ScrollX, ScrollY, false);
        }

        public void Dispose()
        {
            Parent.Scrolled -= Scrolled;
            Parent.BindingContext = OldContext;
        }
    }

    public static ScrollView ScrollEnabled(this ScrollView scroll, bool isEnabled)
    {
        DisabledScrollClass binding = scroll.BindingContext as DisabledScrollClass;
        if (isEnabled && binding != null)
            binding.Dispose();
        if (!isEnabled && binding == null)
            _ = new DisabledScrollClass(scroll);
        return scroll;
    }
}

Collectives™ on Stack Overflow

Disable ScrollView in Xamarin Forms without disabling buttons

4 Answers 4

3 Comments

7 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related