Reputation: 164291
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 ?
Upvotes: 19
Views: 30300
Reputation: 1129
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 :)
Upvotes: 2
Reputation: 924
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;
}
}
}
}
Upvotes: 0
Reputation: 758
This is how I got it to work
var scrollView = ScrollView
{
HorizontalOptions = LayoutOptions.Fill,
Orientation = ScrollOrientation.Horizontal,
Content = new StackLayout{
Orientation = StackOrientation.Horizontal,
Children = {}
}
};
Upvotes: 32