Post
Ask Question

Xamarin.Forms Application For A ScrollView Multiple Circles Image

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.


Similar Articles