Xamarin.Forms - 将 FFImageLoading 与 ListView.ImageCell 结合使用
Xamarin.Forms - Using FFImageLoading with ListView.ImageCell
我有我的 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 一起使用?
那么您不能使用内置的 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>
这只是一个示例,请根据您的需要使用它。
我有我的 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 一起使用?
那么您不能使用内置的 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>
这只是一个示例,请根据您的需要使用它。