在 Xamarin.Forms ScrollView 中水平滚动答案

【问题标题】：Scroll horizontally in Xamarin.Forms ScrollView在 Xamarin.Forms ScrollView 中水平滚动
【发布时间】：2014-08-14 21:27:59
【问题描述】：

我正在使用 Xamarin.Forms 并创建了一个 ScrollView，其中包含一个水平 StackLayout。我希望能够水平滚动，所以我设置：

Orientation  = ScrollOrientation.Horizontal;

但我没有水平滚动。 StackLayout 的内容比屏幕宽，我看到内容在边缘被剪裁了。

如何使用 Xamarin.Forms 实现水平滚动？

【问题讨论】：

您能否发布您的代码以创建 ScrollView 并使用 StackLayout 设置其内容？

标签： xamarin.forms

【解决方案1】：

这就是我的工作方式

      var scrollView = ScrollView
        {
            HorizontalOptions = LayoutOptions.Fill,
            Orientation = ScrollOrientation.Horizontal,

            Content = new StackLayout{
               Orientation = StackOrientation.Horizontal,
               Children = {}
            }
        };

【讨论】：

确实，我们必须在 StackLayout 上有 Orientation = ScrollOrientation.Horizontal。谢谢。
我有同样的问题，但我正在以编程方式添加 stacklayout 子项。下面的答案对我不起作用！
我认为关键是：Orientation = ScrollOrientation.Horizontal。当然，您应该将 HorizontalOptions 设置为 Fill 或 FillAndExpand。但是当你不设置Orientation = ScrollOrientation.Horizontal时，水平滚动条是不显示的

【解决方案2】：

这个 nuget 包可以工作：

https://github.com/SuavePirate/DynamicStackLayout

属性 Words 是一个字符串列表：

    <ScrollView Orientation="Horizontal" HorizontalOptions="FillAndExpand">
        <dynamicStackLayout:DynamicStackLayout ItemsSource="{Binding Words}" HorizontalOptions="Fill" Orientation="Horizontal" Padding="10, -0, 50, 10">
            <dynamicStackLayout:DynamicStackLayout.ItemTemplate>
                <DataTemplate>
                    <StackLayout BackgroundColor="Gray" WidthRequest="80" HeightRequest="80">
                        <Label Text="{Binding .}" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" />
                    </StackLayout>
                </DataTemplate>
            </dynamicStackLayout:DynamicStackLayout.ItemTemplate>
        </dynamicStackLayout:DynamicStackLayout>
    </ScrollView>

希望对你有帮助:)

【讨论】：

【解决方案3】：

如果您将 Visual Studio 2013 中的模板用于 Xamarin 应用程序，则 Xamarin.Forms 的版本有点过时并且不支持滚动。要解决此问题，只需 nuget 'update-package' 和此代码

public class MainPage : ContentPage
{
    public MainPage()
    {
        Label label = new Label {
            Text = "This is a very long label which I expect to scroll horizontally because it's in a ScrollView.",
            Font = Font.SystemFontOfSize(24),
        };

        this.Content = new ScrollView {
            Content = label,
            Orientation = ScrollOrientation.Horizontal, 
        };
    }
}

代码可以在 android 上正常运行。

对于 iOS，代码将按预期工作。

不幸的是，目前 WP8 存在一个错误，破解方法是添加自定义渲染器。

using System.Windows.Controls;
using App2.WinPhone;
using Xamarin.Forms;
using Xamarin.Forms.Platform.WinPhone;

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

namespace App2.WinPhone
{
    public sealed class FixedSVRenderer : ScrollViewRenderer
    {
        protected override void OnModelSet()
        {
            base.OnModelSet();

            if (Model.Orientation == ScrollOrientation.Horizontal)
            {
                // Enable horiz-scrolling
                Control.HorizontalScrollBarVisibility = ScrollBarVisibility.Auto;
            }
        }
    }
}

【讨论】：