Scroll horizontally in Xamarin.Forms ScrollView

Question

I am using Xamarin.Forms and have created a ScrollView, which contains a horizontal StackLayout. I want to be able to scroll horizontally, so I set:

Orientation  = ScrollOrientation.Horizontal;

But I don't get horizontal scroll. The content of the StackLayout is wider than the screen, and I see the content is being clipped at the edge.

How do I achieve horizontal scroll with Xamarin.Forms ?

Can you post your code for creating the ScrollView and setting its Content with the StackLayout? — Pedro, Jun 24 '14 at 18:45

score 31 · Accepted Answer · answered Jul 25 '14 at 09:55

31

This is how I got it to work

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

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

answered Jul 25 '14 at 09:55

lee

738
1
7
18

3

Indeed, we must have Orientation = ScrollOrientation.Horizontal on the StackLayout. Thanks. – Barton Dec 06 '14 at 01:29
I have the same problem but I'm adding the stacklayout children programmatically. and below answer does not work for me! – Alireza Akbari Jul 03 '17 at 05:38
I think the key is: Orientation = ScrollOrientation.Horizontal. Of course you should set the HorizontalOptions to Fill or FillAndExpand. But when you not set the Orientation = ScrollOrientation.Horizontal, the horizontal scroll bar is not displayed – peter70 Nov 26 '19 at 05:24

score 2 · Answer 2 · answered May 27 '18 at 18:04

This nuget package will work:

https://github.com/SuavePirate/DynamicStackLayout

The property Words is a list of strings:

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

I hope it helps :)

score 0 · Answer 3 · answered Nov 25 '14 at 04:39

If you're using the templates in Visual Studio 2013 for Xamarin apps, the version of Xamarin.Forms is a bit outdated and does not support scrolling. To fix this, just nuget 'update-package' and this code

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

code will work fine on android.

For iOS, the code will work as expected.

Unfortunately, at date, for WP8 there's a bug and the hack is to add a custom renderer.

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

Scroll horizontally in Xamarin.Forms ScrollView

3 Answers3

Linked