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.
  
  
  

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.
  
  
  

Step 4

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

Step 5.1

• 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.
  
  
  
  
  
  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;
  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. };
  54. StackLayout stackLayout = new StackLayout
  56. {
  57. Orientation = StackOrientation.Horizontal,
  59. BackgroundColor = Color.Blue,
  64. };
  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. );
  80. }
  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

• 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.
  
  
  
  
  
  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;
  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. };
  54. StackLayout stackLayout = new StackLayout
  56. {
  58. BackgroundColor = Color.Blue,
  63. };
  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. );
  79. }
  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.
  
  
  

Step 7

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

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

• Windows Desktop Extensions for UWP 10.0.143953
  
  
  

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
  
  
  
  
• You want to start up the multiple projects, so proceed, as shown below.
• Right click on Solution Explorer and select set start up project.
  
  
  

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.

Go to click to Start Debuging.

Thus, the outputs are given below.

Step 9.1

• 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.

The UWP Horizontal ScrollView output is given below.

Step 9.2

Thus, Vertical ScrollView Android output is given below.

The UWP Vertical Scroll View Output is given below.

• 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.