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()
  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"
  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.