How to Use ScrollView in XamarinForms

What It Is

The short answer is ScrollView is a Layout. But it can only contain a single Visual Element in its Content property.

Why That Is So

Because the layouts such as stack, relative and so on are derived from the Layout<T> generic class. This Layout<T> generic class is derived from the Layout class that is a non-generic class.

ScrollView is inherited from the Non-generic Layout class. That is the same reason why it does not support a generic way to add children. It only exhibits the Content property to accept a single view or a Layout.



Usage by example

Usage Example 1: Let's display a paragraph of scrolling text.

MainPage = new ContentPage()

  Content = new ScrollView()
  {
     Content = new Label()
     {
        Text = @"TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
                 TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
                 TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
                 TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
                 TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
                 TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
                 TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
                 TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
                 TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
                 TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
                 TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
                 TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
                 TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
                 TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
                 TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
                 TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
                 TextTextTextTextTextTextTextTextTextTextTextTextText"
     }
  }
;

Lesson learned: The ScrollView can be placed directly on the page itself with a single view in it. After we run this, it keeps the screen scrollable so the content can be read.

Usage Example #2: Let's create a standard terms and condition page.

MainPage = new ContentPage()
{
   Content = new StackLayout()
   {
      Children = {
         new Label(){
            FontAttributes = FontAttributes.Bold,
            Text = "Content to read",
            HorizontalOptions = LayoutOptions.CenterAndExpand
         },
         new ScrollView(){
            VerticalOptions = LayoutOptions.FillAndExpand,
            Content =
               new Label(){
                  Text = @"TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
                      TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
                      TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
                      TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
                      TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
                      TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
                      TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
                      TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
                      TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
                      TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
                      TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
                      TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
                      TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
                      TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
                      TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
                      TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
                      TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
                      TextTextTextTextTextTextTextTextTextTextTextTextText"

            }
        }
   }
}
};

Lesson learned: From this usage example, the ScrollView can be placed inside another Layout (in other words Stackayout in this case).

Usage Example 3: Let's display a Customer details input screen.

MainPage = new ContentPage()
{
   Content = new ScrollView()
   {
      Content = new StackLayout()
      {
         Children = {
            new Entry(){
               Placeholder = "First Name"
            },
            new Entry(){
               Placeholder = "Middle Name"
            },
            new Entry(){
               Placeholder = "Last Name"
            },
            new Entry(){
               Placeholder = "Address Line 1"
            },
            new Entry(){
               Placeholder = "Address Line 2"
            },
            new Entry(){
               Placeholder = "City"
            },
            new Entry(){
               Placeholder = "State Code (Example : OD)"
            },
            new Entry(){
               Placeholder = "Country Code (Example : IN)"
            },
            new Entry(){
               Placeholder = "Zip code"
            },
            new Entry(){
               Placeholder = "Phone number"
            },
            new Entry(){
               Placeholder = "Consumer Number"
            },
            new Entry(){
               Placeholder = "Agent Name"
            },
            new Entry(){
               Placeholder = "Agent Code"
            },
         }
      }
   }
}

Lesson learned: Not only a single view but also another Layout (Stack Layout in this case) can be placed inside a ScrollView too.

Note: I am using Visual Studio with Xamarin. Forms 1.3.

That's it. Happy coding.