CODEWITHSUNDEEP
xamllistviewxamarinxamarin.forms
Jaycee Evangelista
Jaycee Evangelista

Reputation: 1127

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

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.)

enter image description here

But what I want to achieve is this: enter image description here

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>

Upvotes: 4

Views: 8180

Answers (2)

MohsenB
MohsenB

Reputation: 1921

You can simply use this code and not need a library or other codes:

    <Frame 
        CornerRadius="100" 
        HeightRequest="200"
        WidthRequest="200"
        HasShadow="False"
        HorizontalOptions="Center"
        Padding="0"
        IsClippedToBounds="True">
            <Image Source="logo" 
                HorizontalOptions="Center"
                VerticalOptions="Center" />
    </Frame>

Upvotes: -1

Cheesebaron
Cheesebaron

Reputation: 24460

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.

Upvotes: 12

Related Questions