如何在Xamarin表单中绑定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"，正如我所提到的，我可以显示单个图像，只是ListView有问题。

这是我的C#代码，包含List和Constructor

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.添加到我们刚刚创建的转换器资源中。

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

如果您不使用视图模型(MVVM(，您可以直接在XAML中指定图像文件的名称为：

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

Answer 2

如果你想在listview中添加Embedded图像，根据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更改为TypeingApplication。

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://learn.microsoft.com/en-us/dotnet/api/system.collections.objectmodel.observablecollection-1?view=netframework-4.8