listview - Xamarin.Forms - 将 FFImageLoading 与 ListView.ImageCell 一起使用

Question

我有我的 UWP（还有 Android 和 IOS）虚拟应用程序，可将辛普森一家的角色和图像加载到如下定义的 ListView 中

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:MyContacts;assembly=MyContacts"
             xmlns:ff="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"
             x:Class="MyContacts.AllContacts"
             Title="Contacts"
             BindingContext="{x:Static local:SimpsonFactory.Characters}"
             Padding="5,0,5,5">

    <ContentPage.Resources>
        <ResourceDictionary>
            <local:GenderToIndexConverter x:Key="genderCvt" />
            <local:ImageResourceConverter x:Key="imageResourceCvt" />
        </ResourceDictionary>
    </ContentPage.Resources>

    <ContentPage.ToolbarItems>
        <ToolbarItem 
            x:Name="tbiEdit"
            Text="Edit" 
            Priority="0"
            Icon="Assets\\circle-24.png"
            Clicked="OnEdit"/>
    </ContentPage.ToolbarItems>

    <ContentPage.Content>
        <ListView 
            x:Name="lvwAllContacts"
            IsPullToRefreshEnabled="True"
            Refreshing="OnRefreshing"
            ItemsSource="{Binding .}"
            ItemTapped="OnItemTapped"
            ItemSelected="OnItemSelected">

            <ListView.ItemTemplate>
                <DataTemplate>
                    <ImageCell Text="{Binding Name}"
                               Detail="{Binding Email}"
                               DetailColor="Gray"
                               ImageSource="{Binding HeadshotUrl, Converter={StaticResource imageResourceCvt}}">
                        <ImageCell.ContextActions>
                            <MenuItem Text="Delete" Clicked="OnDelete" IsDestructive="True"/>
                        </ImageCell.ContextActions>
                    </ImageCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

    </ContentPage.Content>

</ContentPage>

该应用程序由一个使用 ImageCell 的简单 ListView 组成，它工作得很好，如下所示

ImageCell ImageSource 属性指向我的 UWP 项目的 Assets 文件夹中的图像，因此它是添加到项目中的图像，但它也可能来自 Url。

如何更改它以将 FFImageLoading 库与 ImageCell 一起使用？

Answer 1

那时你不能使用内置的ImageCell。您将不得不使用ViewCell并创建自己的ImageCell. 它可能看起来像这样：

<ViewCell>
    <Grid HeightRequest="60">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="60" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <ffimageloading:CachedImage Grid.Column="0" Margin="10" HeightRequest="40" WidthRequest="40" 
            DownsampleToViewSize="true" Source="{Binding HeadshotUrl, Converter={StaticResource imageResourceCvt}}" />

        <StackLayout VerticalOptions="Center" Grid.Column="1">
            <Label Margin="0,5,0,0" FontSize="16" Text="{Binding Name}" />
            <Label Margin="0,-5,0,5" Text="{Binding Email}" />
        </StackLayout>
    </Grid>
</ViewCell>

这只是一个示例，请根据您的需要进行操作。