Introduction
This article demonstrates how to create a Xamarin application for a ScrollView Multiple Circle Image. Xamarin is a platform that allows us to create a multi-platform mobile application for platforms, like Android, Windows, and IOS through a single integrated development environment (IDE).
Let's Start
Step 1
Open Visual Studio and go to New Project >> Installed >> Visual C# >> Cross-Platform.
Select Cross-Platform app, then give your project a name and location and click "OK" button.
Step 2
Install the following NuGet package to your project.
  • Xam.Plugin.Forms.ImageCircle
Now, Select the following NuGet package and select your project to install in it.
Step 3
Next, add an image to Solution Explorer >> Project Name.Android >> Resources >> Right-Click >> drawable >> Add >> Existing Item.
Next, a dialogue box will open. Choose image location and add images.
The Images are added successfully.
Step 4
Open Solution Explorer >> Project Name (Portable) >> MainPage.xaml. Double Click in open the design view of this page.
The Code is given below.
Xaml Code
We are creating a Circle image with WidthRequest, HeightRequest, BorderColor, and BorderThickness inside the StackLayout. StackLayout is inside the scroll view. Just copy the code in your project.
Assembly
  1. xmlns:image="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin.Abstractions"
  1. <?xml version="1.0" encoding="utf-8" ?>
  2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
  3. xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
  4. xmlns:local="clr-namespace:Circle_Image"
  5. xmlns:image="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin.Abstractions"
  6. x:Class="Circle_Image.MainPage"
  7. BackgroundColor="Black">
  8. <ScrollView>
  9. <StackLayout HorizontalOptions="Center" VerticalOptions="Center">
  10. <image:CircleImage Source="Corner.png"
  11. Aspect="AspectFill" WidthRequest="120" HeightRequest="120"
  12. BorderColor="White" BorderThickness="2">
  13. </image:CircleImage>
  14. <image:CircleImage Source="Android.jpg"
  15. Aspect="AspectFill" WidthRequest="120" HeightRequest="120"
  16. BorderColor="White" BorderThickness="2" HorizontalOptions="End">
  17. </image:CircleImage>
  18. <image:CircleImage Source="Windows.jpg"
  19. Aspect="AspectFill" WidthRequest="120" HeightRequest="120"
  20. BorderColor="White" BorderThickness="2" HorizontalOptions="End">
  21. </image:CircleImage>
  22. <image:CircleImage Source="IOS.png"
  23. Aspect="AspectFill" WidthRequest="120" HeightRequest="120"
  24. BorderColor="White" BorderThickness="2">
  25. </image:CircleImage>
  26. <image:CircleImage Source="Corner.png"
  27. Aspect="AspectFill" WidthRequest="120" HeightRequest="120"
  28. BorderColor="White" BorderThickness="2">
  29. </image:CircleImage>
  30. <image:CircleImage Source="Android.jpg"
  31. Aspect="AspectFill" WidthRequest="120" HeightRequest="120"
  32. BorderColor="White" BorderThickness="2">
  33. </image:CircleImage>
  34. <image:CircleImage Source="Windows.jpg"
  35. Aspect="AspectFill" WidthRequest="120" HeightRequest="120"
  36. BorderColor="White" BorderThickness="2">
  37. </image:CircleImage>
  38. <image:CircleImage Source="IOS.png"
  39. Aspect="AspectFill" WidthRequest="120" HeightRequest="120"
  40. BorderColor="White" BorderThickness="2">
  41. </image:CircleImage>
  42. <image:CircleImage Source="Corner.png"
  43. Aspect="AspectFill" WidthRequest="120" HeightRequest="120"
  44. BorderColor="White" BorderThickness="2">
  45. </image:CircleImage>
  46. </StackLayout>
  47. </ScrollView>
  48. </ContentPage>
Step 5
Next, select the Built & Deploy option, followed by selecting from the list of Android Emulator or Simulator. You can Choose any API (Application Program Interface ) Level Emulator or simulator to run it.
Output
After a few seconds, you will see your app working.
Given below is the result.
Finally, we have successfully created Xamarin.Forms Application For ScrollView Multiple Circle Image.
Conclusion
I hope you have learned how to create a Xamarin.Forms Application for a ScrollView Multiple Circle Image with Visual Studio 15.4.4.