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

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.