禁用Xamarin表单中的ScrollView而不禁用按钮

时间:2018-10-20 00:55:30

标签: xaml xamarin.forms xamarin.ios scrollview xamarin.forms-layout

我有以下XAML。我想使用滚动视图定位手机,并希望在平板电脑上禁用滚动。

 <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>

如果按以下方式设置ScrollView.IsEnabled,则按钮将不再允许用户单击它们:

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

我认为使用InputTransparent是不正确的。有没有一种方法可以使已禁用滚动的滚动视图中的按钮可单击?

我本质上是在寻找类似Orientation = None的东西,但这不是一种选择。

4 个答案:

答案 0 :(得分:1)

您需要编写一个CustomRenderer来禁用滚动。

在iOS上,UIScrollView具有ScrollEnabled属性

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

Android有点棘手,没有直接属性。我们拦截了触摸事件并返回而未对其进行处理。

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;
    }
}

答案 1 :(得分:1)

通过ScrollEnabled扩展方法,在不影响Xamarin Forms子级的情况下,一种凉爽紧凑的方式:

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;
    }
}

答案 2 :(得分:0)

我最终使用这种方法禁用了iPad(我的目标设备)上的垂直滚动。对于Android 7英寸平板电脑来说并不完美,但是很好:

            <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>

答案 3 :(得分:0)

在最新版本的Xamarin Forms中,您可以将“方向”设置为“都不”。

scrollV.Orientation = ScrollOrientation.Neither;