Xamarin表单:如何在ListView中创建图像圈？

Question

今天是个好日子.我目前正在创建一个允许我添加员工记录的简单项目.所有创建的记录都显示在ListView上.我能够显示记录,结果证明:

(我甚至不知道这个Xamarin Icon的位置.)

但我想要实现的是:

我听说过使用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();

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

有关使用情况的文档可以在插件的GitHub存储库中找到.

编辑 从您编辑的答案中,如上所述,您只需Image在XAML中替换即可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一样.