Circle Image Control In Xamarin.Forms Application For Android And UWP

Circular images in apps are now very popular in app development. For example we use circular profile picture images in many places.

After reading this article, you will learn how to use Circle Image Control in Xamarin.Forms Application for Android and Universal Windows Platform with XAML and Visual C# in cross platform Application development, using Visual Studio 2017RC.

The important tools given below are required to developing UWP.

1. Windows 10 (Recommended).
2. Visual Studio 2017 RC Community/Enterprise/Professional Edition (It is a Free trial software available online).
3. Using Visual studio 2017 Installer, enable the feature of Mobile development with .NET.

Now, we can discuss the step by step app development.

Step 1

Open Visual Studio 2017 RC -> Start -> New Project-> Select Cross-Platform (under Visual C#->Cross platform app-> Give the suitable name for your app (XamFormCirImg) ->OK.

Step 2

Select the Cross Platform template as Blank app -> Set UI technology as Forms and Sharing as PCL. Afterwards, Visual Studio creates 4 projects (Portable, Droid, iOS and UWP) and display Getting Started.XamarinPage.

Step 3

Now, we have to add the Xamarin forms Circle Image Control reference to all the projects.

Step 4

Add a XAML page for demo. Right click XamFormCirImg (Portable) project, select ADD-> NewItem.

Select ->CrossPlatform-> FormXamlPage-> give the relevant name (CirImgTest.Xaml).

Add an image in XamFormCirImg _Droid project Resourses-> Drawable Folder and add an image inXamFormCirImg _UWP project.

Now, in CirImgTest.Xaml, add the ImageCircle namespace and AddLabel and Circle Image Controls.

xmlns:controls="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin.Abstractions"
<StackLayout>
    <Label Text="Xamarin Forms- Circle Image Control in Android and UWP" VerticalOptions="Center" HorizontalOptions="Center" FontSize="Large" />
    <controls:CircleImage Source="Lion.jpg" Aspect="Fill" WidthRequest="250" HeightRequest="250" TranslationX="25" TranslationY="50" />
    <Label Text="Lion" TranslationX="50" TranslationY="50" VerticalOptions="Center" HorizontalOptions="Center" />
</StackLayout>

Step 5

Open (double click) the file App.cs in the Solution Explorer-> XamFormCirImg (portable) and set the root page.

Step 6

Change the Configuration Manager settings, go to Build -> Configuration Manager.

Uncheck the Build and deploy options to the iOS, check the Droid and UWP.

Step 7

Deploy your app Android emulator, Local Machine (UWP) and the output of the XamFormCirImg App is given below.

Summary

Now, you have successfully tested Circle Image Control in Xamarin.Forms Application for Cross Platform Application Development, using Visual C# and Xamarin in Visual Studio 2017 RC.