How To Add ScrollView In Xamarin.Forms Application For Android And UWP

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

Before reading this article, please go through the article How To Create And Use XAML Content Page In Xamarin.Forms Application For Android And Universal Windows Platform

Reading this article, you will learn how to add ScrollView in Xamarin.Forms application for Android and Universal Windows Platform app development.

The following important tools are required for developing UWP.

1. Windows 10 (Recommended).
2. Visual Studio 2015 Community Edition (It is a free software available online).
3. Using Visual Studio 2015 Installer, enable Xamarin and C#/.NET when you install/modify Visual Studio 2015.

Now, we can discuss step by step app development.

Step 1

Open Visual Studio 2015. Go to Start -> New Project-> select Cross-Platform (under Visual C# -> Blank App (Xamarin.Forms Portable) -> Give a suitable name for your app (XamFormScroll) -> OK.



Now, create project “XamFormScroll_Droid”.

Step 2

 

Choose the target and minimum platform versions for your Universal Windows Project. 

Create project “XamFormScroll _UWP”.

Step 3

Afterwards, Visual Studio creates 6 projects and displays GettingStarted.Xamarin Page. Now, we have to update the Xamarin. Forms Reference for portable project and XamFormScroll _Droid project.

(Please refer to  How To Create And Use XAML Content Page In Xamarin Forms Application For Android And Universal Windows Platform).

Step 4

Add XAML page for ScrollView demo. Right click XamFormScroll (Portable) project, select Add >> NewItem and select CrossPlatform-> FormXamlPage -> Give a relevant name.



Step 5

Add ScrollView tag, 2 Labels and 20 Entry Controls in ScrollViewDemo.xaml.

<ScrollView>
    <StackLayout>
        <Label x:Name="lblTitle" Text="Scroll Viewer in Xamarin Forms - UWP and Android Demo" Font="Large" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" />
        <Label x:Name="lblDetails" Text="Personal Details" Font="Large" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" />
        <Entry Placeholder="Enter Your Name " />
        <Entry Placeholder="Enter Your Email ID " />
        <Entry Placeholder="Enter Your Phone Number " />
        <Entry Placeholder="Enter Your Address Door No " />
        <Entry Placeholder="Enter Your Address Street Name " />
        <Entry Placeholder="Enter Your Address Locality " />
        <Entry Placeholder="Enter Your Address Taluk " />
        <Entry Placeholder="Enter Your Address City " />
        <Entry Placeholder="Enter Your Address State " />
        <Entry Placeholder="Enter Your Address Country " />
        <Entry Placeholder="Enter Your Qualification -Highest Degree " />
        <Entry Placeholder="Enter Your Qualification -PG Degree " />
        <Entry Placeholder="Enter Your Qualification -PG Degree Percentage " />
        <Entry Placeholder="Enter Your Qualification -UG Degree " />
        <Entry Placeholder="Enter Your Qualification -UG Degree Percentage " />
        <Entry Placeholder="Enter Your Qualification -10th Percentage " />
        <Entry Placeholder="Enter Your BloodGroup " />
        <Entry Placeholder="Enter Your Father Name " />
        <Entry Placeholder="Enter Your Mother Tongue " />
        <Entry Placeholder="Enter Your Technical Skills " />
    </StackLayout>
</ScrollView>// This is just a sample script. Paste your real code (javascript or HTML) here. if ('this_is'==/an_example/){of_beautifier();}else{var a=b?(c%d):e[f];}

Step 6

Open (double click) the file App.cs in the Solution Explorer-> XamFormScroll (portable) and set the Root page.



Step 7

We will test Android and UWP. Thus, we can set the multiple startup projects as XamFormScroll.Droid and XamFormScroll.UWP (Universal Windows).



Step 8

Change the Configuration Manager settings. Go to Build -> Configuration Manager, uncheck all the "Build" and "Deploy" options except for Droid and UWP.



Step 9

Deploy your app in Local Machine. The output of the XamFormScroll App is given below.



Summary

Now, you have successfully created and tested ScrollView in Xamarin.Forms Application, using Visual C# and Xamarin.