Post
Ask Question

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.

ScrollView

Usage by example

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

  1. MainPage = new ContentPage()  
  2.   
  3.   Content = new ScrollView()  
  4.   {  
  5.      Content = new Label()  
  6.      {  
  7.         Text = @"TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText  
  8.                  TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText  
  9.                  TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText  
  10.                  TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText  
  11.                  TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText  
  12.                  TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText  
  13.                  TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText  
  14.                  TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText  
  15.                  TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText  
  16.                  TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText  
  17.                  TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText  
  18.                  TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText  
  19.                  TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText  
  20.                  TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText  
  21.                  TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText  
  22.                  TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText  
  23.                  TextTextTextTextTextTextTextTextTextTextTextTextText"  
  24.      }  
  25.   }  
  26. ; 

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.

  1. MainPage = new ContentPage()  
  2. {  
  3.    Content = new StackLayout()  
  4.    {  
  5.       Children = {  
  6.          new Label(){  
  7.             FontAttributes = FontAttributes.Bold,  
  8.             Text = "Content to read",  
  9.             HorizontalOptions = LayoutOptions.CenterAndExpand  
  10.          },  
  11.          new ScrollView(){  
  12.             VerticalOptions = LayoutOptions.FillAndExpand,  
  13.             Content =  
  14.                new Label(){  
  15.                   Text = @"TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText  
  16.                       TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText  
  17.                       TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText  
  18.                       TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText  
  19.                       TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText  
  20.                       TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText  
  21.                       TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText  
  22.                       TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText  
  23.                       TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText  
  24.                       TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText  
  25.                       TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText  
  26.                       TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText  
  27.                       TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText  
  28.                       TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText  
  29.                       TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText  
  30.                       TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText  
  31.                       TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText  
  32.                       TextTextTextTextTextTextTextTextTextTextTextTextText"  
  33.   
  34.             }  
  35.         }  
  36.    }  
  37. }  
  38. }; 

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.

  1. MainPage = new ContentPage()  
  2. {  
  3.    Content = new ScrollView()  
  4.    {  
  5.       Content = new StackLayout()  
  6.       {  
  7.          Children = {  
  8.             new Entry(){  
  9.                Placeholder = "First Name"  
  10.             },  
  11.             new Entry(){  
  12.                Placeholder = "Middle Name"  
  13.             },  
  14.             new Entry(){  
  15.                Placeholder = "Last Name"  
  16.             },  
  17.             new Entry(){  
  18.                Placeholder = "Address Line 1"  
  19.             },  
  20.             new Entry(){  
  21.                Placeholder = "Address Line 2"  
  22.             },  
  23.             new Entry(){  
  24.                Placeholder = "City"  
  25.             },  
  26.             new Entry(){  
  27.                Placeholder = "State Code (Example : OD)"  
  28.             },  
  29.             new Entry(){  
  30.                Placeholder = "Country Code (Example : IN)"  
  31.             },  
  32.             new Entry(){  
  33.                Placeholder = "Zip code"  
  34.             },  
  35.             new Entry(){  
  36.                Placeholder = "Phone number"  
  37.             },  
  38.             new Entry(){  
  39.                Placeholder = "Consumer Number"  
  40.             },  
  41.             new Entry(){  
  42.                Placeholder = "Agent Name"  
  43.             },  
  44.             new Entry(){  
  45.                Placeholder = "Agent Code"  
  46.             },  
  47.          }  
  48.       }  
  49.    }  
  50. } 

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.


Similar Articles