ListView Xamarin.forms 使用 ImageResource 从 ItemSource 动态加载图像答案

【问题标题】：ListView Xamarin.forms dynamically load image from ItemSource with ImageResourceListView Xamarin.forms 使用 ImageResource 从 ItemSource 动态加载图像
【发布时间】：2018-06-07 04:52:34
【问题描述】：

我在 MVVM 中的 xamarin.Forms 应用程序存在问题。我有一个 ListView，我想在 ItemTemplate 中显示一个图像。为此，我创建了一个 ImageRessource 类：

[ContentProperty("Source")]
public class ImageResourceExtension : IMarkupExtension
{
    public string Source { get; set; }

    public object ProvideValue(IServiceProvider serviceProvider)
    {
        if (Source == null)
        {
            return null;
        }

        var imageSource = ImageSource.FromResource($"CoPro.Assets.{Source}");

        return imageSource;
    }
}

这是我的 ListView 的 xaml：

 <ListView  ItemsSource="{Binding Series}">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="20"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <StackLayout Orientation="Horizontal">
                                    <Image Source="{images:ImageResource image.jpg}"/>
                                </StackLayout>
                                <Label Grid.Column="1" Text="{Binding Name}" Style="{StaticResource UsualLabelTemplate}" />
                            </Grid>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>

此外，我已经通过这个命名空间设置了“图像” :xmlns:images="clr-namespace:CoPro.Assets"

像这样，我的 ListView 为每个“系列”项目显示相同的图片。对于每个项目，都有一个带有图像路径的字符串属性。请问如何显示每个项目的图像？

提前感谢您的帮助。

【问题讨论】：

为什么不直接使用 FileImageSource？

标签： image listview xamarin.forms

【解决方案1】：

我刚刚找到了解决方案。我不得不使用 Image 标签中的 Source 属性：

<ListView Grid.Row="1" x:Name="MainListView"  ItemsSource="{Binding Series}">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <ViewCell>
                                <ViewCell.View>
                                    <Grid>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="60"/>
                                            <ColumnDefinition Width="*"/>
                                        </Grid.ColumnDefinitions>                                           
                                        <Image Source="{Binding ImageUrl, Converter={StaticResource StringToImageSourceConverter}}" 
                                               Aspect="AspectFill"
                                              />
                                        <Label Grid.Column="1" Text="{Binding Name}" Style="{StaticResource UsualLabelTemplate}" />
                                    </Grid>
                                </ViewCell.View>
                            </ViewCell>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>

解决方案是使用转换器，并且 Source 属性包含一个字符串。这个字符串被发送到我的转换器中的参数中，如下所示：

 public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value != null)
        {
            return ImageSource.FromResource($"CoPro.Assets.{value}"); 
        }
        else
        {
            return null;
        }  
    }

在此代码中“$”CoPro.Assets 是我的图像文件的路径。

感谢您的帮助

【讨论】：