Xamarin.Forms ScrollView

Download Sample Download the sample

ScrollView contains layouts and enables them to scroll offscreen. ScrollView is also used to allow views to automatically move to the visible portion of the screen when the keyboard is showing.

Purpose

ScrollView can be used to ensure that larger views display well on smaller phones. For example, a layout that works on an iPhone 6s may be clipped on an iPhone 4s. Using a ScrollView would allow the clipped portions of the layout to be displayed on the smaller screen.

Usage

Note

ScrollView objects should not be nested. In addition, ScrollViews should not be nested with other controls that provide scrolling, like ListView and WebView.

ScrollView exposes a Content property, which can be set to a single view or layout. Consider this example of a layout with a very large boxView, followed by an Entry:

<ContentPage.Content>
    <ScrollView>
        <StackLayout>
            <BoxView BackgroundColor="Red" HeightRequest="600" WidthRequest="150" />
            <Entry />
        </StackLayout>
    </ScrollView>
</ContentPage.Content>

In C#:

public class ScrollingDemoCode : ContentPage
{
    public ScrollingDemoCode()
    {
        StackLayout stackLayout = new StackLayout();
        stackLayout.Children.Add(new BoxView { BackgroundColor = Color.Red, HeightRequest = 600, WidthRequest = 150 });
        stackLayout.Children.Add(new Entry());
        ScrollView scrollView = new ScrollView();
        scrollView.Content = stackLayout;
        Content = scrollView;
    }
}

Before the user scrolls down, only the BoxView is visible:

Notice that when the user starts to enter text in the Entry, the view scrolls to keep it visible on screen:

Properties

ScrollView defines the following properties:

Note

Scrolling can be disabled by setting the Orientation property to Neither.

Methods

ScrollView provides a ScrollToAsync method, which can be used to scroll the view either using coordinates or by specifying a particular view that should be made visible.

When using coordinates, specify the x and y coordinates, along with a boolean indicating whether the scrolling should be animated:

scroll.ScrollToAsync(0, 150, true); //scrolls so that the position at 150px from the top is visible

scroll.ScrollToAsync(label, ScrollToPosition.Start, true); //scrolls so that the label is at the start of the list

Important

The ScrollToAsync method will not result in scrolling when the ScrollView.Orientation property is set to Neither.

When scrolling to a particular element, the ScrollToPosition enumeration specifies where in the view the element will appear:

  • Center – scrolls the element to the center of the visible portion of the view.
  • End – scrolls the element to the end of the visible portion of the view.
  • MakeVisible – scrolls the element so that it is visible within the view.
  • Start – scrolls the element to the start of the visible portion of the view.

The IsAnimated property specifies how the view will be scrolled. When set to true, a smooth animation will be used, rather than instantly moving the content into view.

Events

ScrollView defines just one event, Scrolled. Scrolled is raised when the view has finished scrolling. The event handler for Scrolled takes ScrolledEventArgs, which has the ScrollX and ScrollY properties. The following demonstrates how to update a label with the current scroll position of a ScrollView:

Label label = new Label { Text = "Position: " };
ScrollView scroll = new ScrollView();
scroll.Scrolled += (object sender, ScrolledEventArgs e) => {
    label.Text = "Position: " + e.ScrollX + " x " + e.ScrollY;
};

Note that scroll positions may be negative, due to the bounce effect when scrolling at the end of a list.