Post
Ask Question

Xamarin.Forms - Horizontal And Vertical Scroll View Using C# In Visual Studio 2017

What are Xamarin and Xamarin Forms?

  • Xamarin is a cross-platform to develop Multi-Platform Applications.
  • Xamarin is a shared code (C#) but Separately Design UIs Android (java), Windows(C#), iOS (Objective – C & XCODE).
  • Xamarin forums are UIs & shared code (C#) are same. To develop multi-platforms Applications, run all the projects (Android, Windows, iOS) at the same time.

Prerequisites

  • Visual Studio 2017 Enterprise.

The steps given below are required to be followed in order to design Horizontal & Vertical scroll views, using Xamarin Forms in Visual Studio 2017.

Step 1

  • Go to Visual Studio.
  • Click File -> New -> Project.

Step 2

  • In this step, click C# -> Cross Platform(Android, iOS, Windows) -> Cross Platform App (Native or Xamarin forms).
  • Enter the Application Name, followed by clicking OK.

    Xamarin Xamarin

Step 3

  • Go to New Cross Platform app and click Blank App.
  • UIs Technology needs to click Xamarin forums.
  • Code sharing strategy needs to Click PCL(Portable Class Library).
  • Click OK.

    Xamarin

Step 4

  • In UWP Project, select Target version & Minimum Version, followed by clicking OK.

    Xamarin

Step 5.1

Horizontal View
  • In this step, go to Solution Explorer -> Portable Class Library, followed by clicking Xaml.cs, inserting the code given below the MainPage.Xaml.cs Page and save it.

    Xamarin

    Xamarin
    1. using System;  
    2. using System.Collections.Generic;  
    3. using System.Linq;  
    4. using System.Text;  
    5. using System.Threading.Tasks;  
    6. using Xamarin.Forms;  
    7.   
    8.   
    9.   
    10. namespace ColorScroll  
    11. {  
    12.     public partial class MainPage : ContentPage  
    13.     {  
    14.         public MainPage()  
    15.         {  
    16.             var colors = new[]  
    17.             {  
    18.                 new { value = Color.White, name = "White" },  
    19.                 new { value = Color.Silver, name = "Silver" },  
    20.                 new { value = Color.Gray, name = "Gray" },  
    21.                 new { value = Color.Black, name = "Black" },  
    22.                 new { value = Color.Red, name = "Red" },  
    23.                 new { value = Color.Maroon, name = "Maroon" },  
    24.                 new { value = Color.Yellow, name = "Yellow" },  
    25.                 new { value = Color.Olive, name = "Olive" },  
    26.                 new { value = Color.Lime, name = "Lime" },  
    27.                 new { value = Color.Green, name = "Green" },  
    28.                 new { value = Color.Aqua, name = "Aqua" },  
    29.                 new { value = Color.Teal, name = "Teal" },  
    30.                 new { value = Color.Blue, name = "Blue" },  
    31.                 new { value = Color.Navy, name = "Navy" },  
    32.                 new { value = Color.Pink, name = "Pink" },  
    33.                 new { value = Color.Fuchsia, name = "Fuchsia" },  
    34.                 new { value = Color.Purple, name = "Purple" },  
    35.                 new { value = Color.White, name = "White" },  
    36.                 new { value = Color.Silver, name = "Silver" },  
    37.                 new { value = Color.Gray, name = "Gray" },  
    38.                 new { value = Color.Black, name = "Black" },  
    39.                 new { value = Color.Red, name = "Red" },  
    40.                 new { value = Color.Maroon, name = "Maroon" },  
    41.                 new { value = Color.Yellow, name = "Yellow" },  
    42.                 new { value = Color.Olive, name = "Olive" },  
    43.                 new { value = Color.Lime, name = "Lime" },  
    44.                 new { value = Color.Green, name = "Green" },  
    45.                 new { value = Color.Aqua, name = "Aqua" },  
    46.                 new { value = Color.Teal, name = "Teal" },  
    47.                 new { value = Color.Blue, name = "Blue" },  
    48.                 new { value = Color.Navy, name = "Navy" },  
    49.                 new { value = Color.Pink, name = "Pink" },  
    50.                 new { value = Color.Fuchsia, name = "Fuchsia" },  
    51.                 new { value = Color.Purple, name = "Purple" }  
    52.             };  
    53.   
    54.             StackLayout stackLayout = new StackLayout  
    55.   
    56.             {  
    57.                 Orientation = StackOrientation.Horizontal,  
    58.   
    59.                 BackgroundColor = Color.Blue,  
    60.   
    61.   
    62.   
    63.   
    64.             };  
    65.   
    66.   
    67.   
    68.             foreach (var color in colors)  
    69.             {  
    70.                 stackLayout.Children.Add  
    71.                     (  
    72.                     new Label  
    73.                     {  
    74.                         Text = color.name,  
    75.                         TextColor = color.value,  
    76.                         FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label))  
    77.                     }  
    78.                     );  
    79.   
    80.             }  
    81.   
    82.             Padding = new Thickness(5, Device.OnPlatform(20, 5, 5), 5, 5);  
    83.             Content = new ScrollView  
    84.             {  
    85.                 Orientation=ScrollOrientation.Horizontal,  
    86.                 Content = stackLayout  
    87.             };  
    88.         }  
    89.     }  
    90. }  

Step 5.2

Vertical View
  • In this step, go to Solution Explorer -> Portable Class Library, followed by clicking Xaml.cs, inserting the code given below the MainPage.Xaml.cs Page and save it.

    Xamarin

    Xamarin
    1. using System;  
    2. using System.Collections.Generic;  
    3. using System.Linq;  
    4. using System.Text;  
    5. using System.Threading.Tasks;  
    6. using Xamarin.Forms;  
    7.   
    8.   
    9.   
    10. namespace ColorScroll  
    11. {  
    12.     public partial class MainPage : ContentPage  
    13.     {  
    14.         public MainPage()  
    15.         {  
    16.             var colors = new[]  
    17.             {  
    18.                 new { value = Color.White, name = "White" },  
    19.                 new { value = Color.Silver, name = "Silver" },  
    20.                 new { value = Color.Gray, name = "Gray" },  
    21.                 new { value = Color.Black, name = "Black" },  
    22.                 new { value = Color.Red, name = "Red" },  
    23.                 new { value = Color.Maroon, name = "Maroon" },  
    24.                 new { value = Color.Yellow, name = "Yellow" },  
    25.                 new { value = Color.Olive, name = "Olive" },  
    26.                 new { value = Color.Lime, name = "Lime" },  
    27.                 new { value = Color.Green, name = "Green" },  
    28.                 new { value = Color.Aqua, name = "Aqua" },  
    29.                 new { value = Color.Teal, name = "Teal" },  
    30.                 new { value = Color.Blue, name = "Blue" },  
    31.                 new { value = Color.Navy, name = "Navy" },  
    32.                 new { value = Color.Pink, name = "Pink" },  
    33.                 new { value = Color.Fuchsia, name = "Fuchsia" },  
    34.                 new { value = Color.Purple, name = "Purple" },  
    35.                 new { value = Color.White, name = "White" },  
    36.                 new { value = Color.Silver, name = "Silver" },  
    37.                 new { value = Color.Gray, name = "Gray" },  
    38.                 new { value = Color.Black, name = "Black" },  
    39.                 new { value = Color.Red, name = "Red" },  
    40.                 new { value = Color.Maroon, name = "Maroon" },  
    41.                 new { value = Color.Yellow, name = "Yellow" },  
    42.                 new { value = Color.Olive, name = "Olive" },  
    43.                 new { value = Color.Lime, name = "Lime" },  
    44.                 new { value = Color.Green, name = "Green" },  
    45.                 new { value = Color.Aqua, name = "Aqua" },  
    46.                 new { value = Color.Teal, name = "Teal" },  
    47.                 new { value = Color.Blue, name = "Blue" },  
    48.                 new { value = Color.Navy, name = "Navy" },  
    49.                 new { value = Color.Pink, name = "Pink" },  
    50.                 new { value = Color.Fuchsia, name = "Fuchsia" },  
    51.                 new { value = Color.Purple, name = "Purple" }  
    52.             };  
    53.   
    54.             StackLayout stackLayout = new StackLayout  
    55.   
    56.             {  
    57.   
    58.                 BackgroundColor = Color.Blue,  
    59.   
    60.   
    61.   
    62.   
    63.             };  
    64.   
    65.   
    66.   
    67.             foreach (var color in colors)  
    68.             {  
    69.                 stackLayout.Children.Add  
    70.                     (  
    71.                     new Label  
    72.                     {  
    73.                         Text = color.name,  
    74.                         TextColor = color.value,  
    75.                         FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label))  
    76.                     }  
    77.                     );  
    78.   
    79.             }  
    80.   
    81.             Padding = new Thickness(5, Device.OnPlatform(20, 5, 5), 5, 5);  
    82.             Content = new ScrollView  
    83.             {  
    84.                 Content = stackLayout  
    85.             };  
    86.         }  
    87.     }  
    88. }  

Step 6

The processing given below is the same for Horizontal & Vertical Views

  • Click Build menu and go to Configuration Manager.
  • Configure your Android, Windows, IOS Depoly & Build Setting, followed by clicking Close.

    Xamarin

Step 7

  • Go to Solution Explorer -> click UWP Application ->Right click it and Add the Reference. 

    Xamarin

Click Cross Platform ->Extension->add Extension given below.

  • Windows Desktop Extensions for UWP 10.0.143953

    Xamarin

Step 8

  • First, build your Application. Select Build & deploy option, followed by clicking Start your Application.
  • In this step, go to Run option, choose from the list of an Android or an IOS or UWP Simulators, which are available (you can be choosing an IOS, wherein you need to first add MAC device in your Visual Studio). You can choose any one Simulator and run it

    Xamarin

  • You want to start up the multiple projects, so proceed, as shown below.
  • Right click on Solution Explorer and select set start up project.

    Xamarin

In this step, go to Startup Project and select Multiple Startup Project, followed by clicking Startup Projects and clicking Apply -> OK.

These are the features of Xamarin Forms.

Xamarin

Go to click to Start Debuging.

Xamarin

Thus, the outputs are given below.

Step 9.1

Horizontal View Output
  • After  afew seconds, the app will start running on your Android Simulator and UWP Application. You will see your Application working successfully.

Thus, Horizontal ScrollView Android output is given below.

Xamarin

The UWP Horizontal ScrollView output is given below.

Xamarin

Step 9.2

Vertical View Output

Thus, Vertical ScrollView Android output is given below.

Xamarin

The UWP Vertical Scroll View Output is given below.

Xamarin

  • Your Horizontal & Vertical ScrollView Application are created succesfully.

Conclusion

Thus, we learned how to design Vertical & Horizontal ScrollView Applications, using Xamarin forms in Visual Studio 2017.


Similar Articles