Xamarin形式：如何在ListView中制作图像圈？

Jaycee Evangelista 发表于 Dev

杰西·埃文格里斯塔（Jaycee Evangelista）

今天是个好日子。我当前正在创建一个简单的项目，该项目使我可以添加Employee的记录。所有创建的记录都显示在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>

芝士男爵

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

安装包Xam.Plugins.Forms.ImageCircle

然后，您需要按平台将其初始化，与Xamarin.Forms.Init相同，例如：

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

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

有关使用的文档可在该插件的GitHub存储库中找到。

编辑如上所述，从已编辑的答案中，您只需将ImageXAML替换为即可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文件夹，您可能希望将其绑定到其他对象。就像模型中的URL一样，ItemsSource中也有。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。