滚动视图允许内容溢出

Question

目标

我试图使scrollview可以溢出（而不是剪辑其子元素）。我已经在走马灯视图中实现了这个效果，但无法在scrollview中获得相同的结果。

这个想法是将scrollview居中并允许溢出，以使内容看起来居中（被用作选项卡）。

---

代码

Xamarin Forms中使用scrollview：

 var scrollView = new ScrollView
 {
    WidthRequest = 200,
    HorizontalOptions = LayoutOptions.Center,
    Orientation = ScrollOrientation.Horizontal,
    Content = scrollViewContent,
    IsClippedToBounds = false
 };

这是我为 scrollview 编写的自定义渲染器：

public class CenteredScrollViewRenderer : 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;
            GetChildAt(0).OverScrollMode = OverScrollMode.Never;

            // Try and disable clip
            ((ViewGroup)GetChildAt(0)).SetClipToPadding(false);
            ((ViewGroup)GetChildAt(0)).SetClipChildren(false);
        }
    }
}

---

其他尝试

我还创建了一个函数来遍历所有父级以禁用裁剪，以查看是否有父级造成问题。这仍然没有起作用。

那么我们该如何允许 scrollview 内容溢出其边界呢？

^{注意：我标记了 Android，因为这可能是对本机控件的简单误解。}

---

更新：

我已经尽力制作了一个所需效果的图像。

那么，大蓝色边框是中间的 scrollview，位于 contentview 中间。只有当在 scrollview 内部时才能看到滚动内容（它总是这样工作的）。我正在尝试不裁剪内容，以便始终可以看到所有内容（溢出），而不仅仅是在 scrollview 内部。

---

更新 2：

下面的链接可能比我更好地解释了我想要的效果。请看一下，有任何问题请告诉我。

启用分页的UIScrollView带有预览

注意：我已将触摸事件链接起来，所以我只需要找到禁用裁剪边界的解决方法。

- Ruddy

---

你想要实现什么效果？能否请您展示一张图片？我不明白ScrollViewer的内容怎么可能会溢出，但是您需要类似于ScrollView淡入/淡出的效果吗？ - Grace Feng

@GraceFeng-MSFT 谢谢您的评论。我觉得我可能没有解释清楚，所以尝试创建了一个更新来提供更多信息。如果这似乎无法解释清楚，我可以创建一个项目并将其提供给您。注意：我相信我正在尝试制作的Android已经有了一个Recycle view，使用它可以使内容居中并滚动（它会锁定到一个瓷砖并始终居中，就像Play商店一样）。但是我正在尝试在Xamarin Forms中实现这一点。 - Ruddy

如果您可以使用“Recyclerview”实现它，那么在XF中，您可以尝试使用“ViewRenderer”进行自定义。 - Grace Feng

@GraceFeng-MSFT 目前我已经让所有东西都按照预期工作，除了最后这一部分。这应该很容易解决，因为我已经在 iOS 上用一行代码（v.ClipsToBounds = false;）使其正常工作。如果要尝试实现 Recyclerview，那将是很多工作量，但几乎没有任何收益。 - Ruddy

你可以尝试与高程/阴影裁剪相同的方法。添加一个父布局，为父布局添加填充（以实现“居中”项目），并在父布局中设置clipToPadding=false。 - damian

Answer 1

您可以尝试与高程/阴影剪辑相同的方法。添加一个父布局，为父布局添加填充（以实现居中项），并在父布局中设置clipToPadding=false。

由于问题涉及Xamarin，我将提到对于本机Android开发，您可以使用RecyclerView和SnapHelper类的实现来实现相同的中心锁定效果。

- damian

---

至于这个答案的第二部分，这是我的备选方案。我一直在阅读关于使用Xamarin Forms很难让Recycler View正常工作的问题。所以这个答案暂时满足了我的需求。再次感谢。我很快就会授予奖励，看看是否有人能够超越你的答案！;) - Ruddy