Xamarin Forms如何在ListView中绑定本地嵌入图片？

Question

我在 XAML 中有一个 ListView 和一个保存本地嵌入图像路径的 List<string>。我无法在列表中显示图像。顺便说一下，我可以通过

显示为单个图像

<Image Source="{local:ImageResource TypingApplication.Images.Icons.Search.png}" />

但是我无法显示ListView中的图像。这是我的 XAML 代码

<ListView x:Name="ListView"
            ItemsSource="{Binding ListItems}"
            IsEnabled="True"
            IsVisible="True"
            RowHeight="40"
            Opacity="0.9">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>                            
                <Image Source="{local:ImageResource TypingApplication.Images.Icons.{Binding .}}"/>
            </ViewCell>                        
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

我在 Extensions 文件夹中添加了 ImageResourceExtension，在 XAML 中添加了 xmlns:local="clr-namespace:TypingApplication.Extensions"，正如我提到的，我可以显示单个图像，只有 [=12] 有问题=].

这是我的 C# 代码，其中包含列表和构造函数

public List<string> ListItems
{
    get
    {
        return new List<string>()
        {
            "Home.png",
            "Favorite.png",
            "Search.png"
        };
    }
}

public HomePage()
{
    InitializeComponent();
    this.BindingContext = this;
}

请注意，我在我的项目中使用共享图像。我在 SolutionExplorer.

中将所有图像的属性设置为 Embedded resource

Answer 1

将列表更改为 ObservableCollection
IValueConverter 实施以将您的绑定转换为所需值
图像属性应设置为 EmbeddedResource

public class EmbeddedToImageSourceConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value is string fileName && parameter is String assemblyName)
        {
            try
            {
                var imageSource = ImageSource.FromResource(assemblyName + "." + fileName, typeof(EmbeddedToImageSourceConverter).GetTypeInfo().Assembly);
                return imageSource;
            }
            catch (Exception)
            {
                return value;
            }
        }
        else
            return value;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return value;
    }
}

XAML

<ContentPage.Resources>
    <local:EmbeddedToImageSourceConverter x:Key="converter"/>
</ContentPage.Resources>

在列表视图中添加我们刚刚创建的绑定 w.r.to 转换器资源。

<Image Source="{Binding ., Converter={StaticResource converter}, ConverterParameter='TypingApplication.Images.Icons'}"/>

Answer 2

如果你想在listview中添加嵌入图片，根据json的回复，你的绑定有问题，你可以使用IValueConverter将图片路径转换为正确的。

我按照你的代码做了一个例子，你可以看看：

<ListView HasUnevenRows="True" ItemsSource="{Binding ListItems}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout>
                            <Image
                                HeightRequest="100"
                                Source="{Binding ., Converter={StaticResource imageconverter}}"
                                WidthRequest="100" />
                        </StackLayout>

                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

 <ContentPage.Resources>
    <local:imageconverter x:Key="imageconverter" />
</ContentPage.Resources>

图像转换器：

 public class imageconverter : IValueConverter
{
    public string Source { get; set; }
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
         Source = (string)value;

        if (Source == null)
            return null;

        // Do your translation lookup here, using whatever method you require

        var imageSource = ImageSource.FromResource("demo3."+Source, typeof(ImageResourceExtension).GetTypeInfo().Assembly);
        return imageSource;
    }


    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

您可以根据您的代码将demo3更改为TypingApplication。

public partial class Page14 : ContentPage
{
    public ObservableCollection<string> ListItems { get; set; }
    public Page14()
    {
        InitializeComponent();

        ListItems = new ObservableCollection<string>()
        {
            "image1.jpg","image2.png","image3.png"
        };

        this.BindingContext = this;
    }
}

作为Prateek的回复，我建议你可以将List<>改为Observablecollection<>，因为它实现了INotifyPropertyChanged接口，通知数据改变。

https://docs.microsoft.com/en-us/dotnet/api/system.collections.objectmodel.observablecollection-1?view=netframework-4.8

Xamarin Forms如何在ListView中绑定本地嵌入图片？

How to Bind Local Embedded Image in ListView in Xamarin Forms?

c#

xaml

xamarin

xamarin.forms

xamarin.forms.listview