Xamarin Forms: How can I make an Image Circle in a ListView?

Question

Good Day Everyone. I'm currently creating a simple project that allows me to Add record of an Employee. All created records are displayed on a ListView. I was able to display the records and this turns out :

(I don't even know where this Xamarin Icon was pulled of.)

But what I want to achieve is this:

I heard about the use of RoundedBoxView. But since I'm new to Xamarin, I don't know if this is a case where I can use it. Thanks a lot guys.

Here's the code for the page that should display that Images.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Class="XamarinFormsDemo.EmployeeRecordsPage"
         xmlns:ViewModels="clr-namespace:XamarinFormsDemo.ViewModels;assembly=XamarinFormsDemo"
         BackgroundImage="bg3.jpg"
         Title="List of Employees">


  <ContentPage.BindingContext>
    <ViewModels:MainViewModel/>
  </ContentPage.BindingContext>

  <StackLayout Orientation="Vertical">



  <ListView ItemsSource="{Binding EmployeesList, Mode=TwoWay}"
        HasUnevenRows="True">
    <ListView.ItemTemplate>
      <DataTemplate>
        <ViewCell>
          <Grid Padding="10" RowSpacing="10" ColumnSpacing="5">
            <Grid.RowDefinitions>
              <RowDefinition Height="Auto"/>
              <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
          <ColumnDefinition Width="Auto"/>
          <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <Image Source="icon.png"
               HeightRequest="66"
               HorizontalOptions="CenterAndExpand"
               Aspect="AspectFill"
               WidthRequest="66"
               Grid.RowSpan="2"
               />


        <Label Grid.Column="1"
          Text="{Binding Name}"
               TextColor="#24e97d"
               FontSize="24"/>

        <Label Grid.Column="1"
               Grid.Row="1"
              Text="{Binding Department}"
               TextColor="Gray"
               FontSize="18"
               Opacity="0.6"/>


          </Grid>
        </ViewCell>
      </DataTemplate>
    </ListView.ItemTemplate>

  </ListView>


    <StackLayout Orientation="Vertical"
         Padding="30,10,30,10"
         HeightRequest="20"
         BackgroundColor="#24e97d"
         VerticalOptions="Center"
         Opacity="0.5">
  <Label Text="© Copyright 2015   smesoft.com.ph   All Rights Reserved "
         HorizontalTextAlignment="Center"
         VerticalOptions="Center"
         HorizontalOptions="Center" />
    </StackLayout>
  </StackLayout>

</ContentPage>

Answer 1

James Montemagno has an excellent Image Circle plugin which works with Xamarin.Forms. You can install it from NuGet:

Install-Package Xam.Plugins.Forms.ImageCircle

Then you need to initialize it per platform, same place as Xamarin.Forms.Init like:

Xamarin.Forms.Init();
ImageCircleRenderer.Init();

Then you can use CircleImage instead of Image in your XAML or in code behind.

Documentation on usage can be found in the GitHub repository for the plugin.

EDIT From your edited answer, as mentioned above, you just replace Image in your XAML with CircleImage. So instead of:

<Image Source="icon.png"
    HeightRequest="66"
    HorizontalOptions="CenterAndExpand"
    Aspect="AspectFill"
    WidthRequest="66"
    Grid.RowSpan="2"
    />

Modify it to:

<CircleImage Source="icon.png"
    HeightRequest="66"
    HorizontalOptions="CenterAndExpand"
    Aspect="AspectFill"
    WidthRequest="66"
    Grid.RowSpan="2"
    />

In this case icon.png comes from the Android Resources/drawable folder, you might want to bind that to something else. Like an URL in your model you have in your ItemsSource.