xaml – Xamarin表单：如何在ListView中创建图像圈？

概述今天是个好日子.我目前正在创建一个允许我添加员工记录的简单项目.所有创建的记录都显示在ListView上.我能够显示记录,结果证明： (我甚至不知道这个Xamarin Icon的位置.) 但我想要实现的是：   我听说过使用RoundedBoxView.但由于我是Xamarin的新手,我不知道这是否是我可以使用它的情况.非常感谢你们. 这是应该显示图像的页面的代码. <?xml version=" 今天是个好日子.我目前正在创建一个允许我添加员工记录的简单项目.所有创建的记录都显示在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>

解决方法 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中找到.

编辑
根据您编辑的答案,如上所述,您只需使用circleimage替换XAML中的Image.所以代替：

<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一样.

总结

以上是内存溢出为你收集整理的xaml – Xamarin表单：如何在ListView中创建图像圈？全部内容，希望文章能够帮你解决xaml – Xamarin表单：如何在ListView中创建图像圈？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。