Using a Scrollview in XamarinForms
February 26, 2015
No comments
Article
What is it ???
The short answer is ScrollView is a Layout. But it can only contain a single Visual Element in its Content property.
Why So ???
Because, the Layouts such as Stack, relative etc. are derived from Layout<T> generic class. This Layout<T> generic class is derived from the Layout class, which 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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
MainPage = new ContentPage() { Content = new ScrollView() { Content = new Label() { Text = @"TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText" } } }; |
Lesson learnt : 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 in order to read the content.
Usage Example #2 : Let’s create a standard terms and condition page
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
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 = @"TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText" } } } } }; |
Lesson learnt : From this usage example, the ScrollView can be placed inside another Layout (i.e. Stackayout in this case).
Usage Example #3 : Let’s display Customer details input screen
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
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 learnt : Not only a single view but also another Layout (StackLaout 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 🙂
Categories: Android, Cross Platform Mobile App, CSharp, iOS, Visual Studio, Windows Phone, Xamarin