Xamarin Forms：如何在 ListView 中制作图像圈？答案

【问题标题】：Xamarin Forms: How can I make an Image Circle in a ListView?Xamarin Forms：如何在 ListView 中制作图像圈？
【发布时间】：2016-10-31 14:23:10
【问题描述】：

大家好。我目前正在创建一个简单的项目，允许我添加员工记录。所有创建的记录都显示在 ListView 上。我能够显示记录，结果是：

（我什至不知道这个 Xamarin 图标是从哪里拉出来的。）

但我想要实现的是：

我听说了 RoundedBoxView 的使用。但由于我是 Xamarin 的新手，我不知道这是否是我可以使用它的情况。非常感谢各位。

这是应该显示该图像的页面的代码。

<?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>

【问题讨论】：

CircularImage in Xamarin.Forms的可能重复
@jzeferino 是的，先生，这可能。但是即使我查看您提供的相同问题，我什至还没有解决我的问题。

标签： xaml listview xamarin xamarin.forms

【解决方案1】：

James Montemagno 有一个出色的 Image Circle 插件，可与 Xamarin.Forms 配合使用。您可以从 NuGet 安装它：

安装包 Xam.Plugins.Forms.ImageCircle

然后你需要在每个平台上初始化它，就像 Xamarin.Forms.Init 一样：

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

然后您可以在您的 XAML 或后面的代码中使用 CircleImage 而不是 Image。

使用文档可以在GitHub repository for the plugin找到。

编辑如上所述，从您编辑的答案中，您只需将 XAML 中的 Image 替换为 CircleImage。所以而不是：

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

修改为：

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

在这种情况下，icon.png 来自 Android Resources/drawable 文件夹，您可能希望将其绑定到其他内容。就像您在 ItemsSource 中拥有的模型中的 URL。

【讨论】：

感谢先生的回答。我应该把这些代码放在我的 XamarinForms.Droid 的哪个部分？ Xamarin.Forms.Init(); ImageCircleRenderer.Init(); 我所有的代码都在 Xamarin.Forms Portable 部分。
如果您查看 MainActivity.cs，那里应该有一个 Init()。
哦，我明白了。我已经下载了 nuget 包并添加了您提供的代码。但是我怎样才能让图像变成一个圆圈呢？我什至不知道那个 Xamarin 图标来自哪里:(
您尚未提供有关如何构建 UI 的任何信息。
我已添加此代码先生。 xmlns:controls="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin.Abstractions"

【解决方案2】：

您可以简单地使用此代码，而不需要库或其他代码：

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

【讨论】：