时间戳

首页 > 解决方案 > 如何在 Xamarin 表单的 ListView 中绑定本地嵌入图像？

c# - 如何在 Xamarin 表单的 ListView 中绑定本地嵌入图像？

问题描述

我有一个ListViewXAML 和一个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>

我已经ImageResourceExtension在Extensions文件夹和xmlns:local="clr-namespace:TypingApplication.Extensions"XAML 中添加了，正如我提到的我可以显示单个图像，只有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;
}

请注意，我在我的项目中使用共享图像。我已将所有图像的属性设置为Embedded resourcein SolutionExplorer。

标签： c#xamlxamarinxamarin.formsxamarin.forms.listview

解决方案

  • 将列表更改为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>

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

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

推荐阅读