xaml - Xamarin 表单 : How can I make an Image Circle in a ListView?

Question

大家好。我目前正在创建一个简单的项目，允许我添加员工的记录。所有创建的记录都显示在 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>

Answer 1

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

Install-Package 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 文件夹，您可能希望将其绑定(bind)到其他内容。就像 ItemsSource 中模型中的 URL 一样。