Xamarin.Forms绑定ListView-ImageCell中的ImageSource到byte[]

Question

Xamarin.Forms绑定ListView-ImageCell中的ImageSource到byte[]

c#windowsxamarincross-platformxamarin.forms

3

我目前正在学习Xamarin.Forms。我在页面上有一个ListView，将其绑定到我的ViewModel。ItemTemplate的类型为'ImageCell'。

绑定单元格的Text和Detail属性没有问题。然而，我无法绑定'ImageSourceProperty'。这个ImageSource是使用byte[]生成的（我的图像是SQLite数据库中的blob）。

我想知道是否有人知道如何解决这个问题（或者另一种将byte[]图像绑定到listview-item的方法）。

以下是一些源代码：

var model = Graanziekten.Select(g => new OnkruidViewModel
            {
                Id = g.Id, Naam = g.Naam, Omschrijving = g.Omschrijving, Afbeelding = g.BitmapThumbnail
            }).ToList();

            var cell = new DataTemplate(typeof(ImageCell));
            cell.SetBinding(TextCell.TextProperty, "Naam");
            cell.SetBinding(TextCell.DetailProperty, "Omschrijving");
            cell.SetBinding(ImageCell.ImageSourceProperty, "Afbeelding");

            var listview = new ListView
            {
                ItemsSource = model,
                ItemTemplate = cell
            };

“BitmapThumbnail”属性被定义为：

public ImageSource BitmapThumbnail
        {
            get
            {
                //AfbeeldingSmall is a byte[]
                return ImageSource.FromStream(() => new MemoryStream(Afbeeldingen.First().AfbeeldingSmall));
            }
        }

如果我使用一个虚拟图片（从URI）它就可以正常工作。但是如果我使用上面显示的代码，则内容页面甚至根本没有呈现出来（空白的黑屏）。一开始我认为问题可能与动态获取属性的字节数组有关，但是当我获取所有必要的字节数组时，同样的效果也会发生。此外，当我在我的内容页中添加单个图片时，使用相同的方法确实可以工作，只是在列表视图中无法工作。我正在尝试在WinPhone8上完成这项工作（虽然我不认为平台有影响）。提前致谢。

- Peter Brachwitz

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- bkardol · Answer 1

你尝试过直接将它绑定到你的列表上吗？而不是加载那个模型对象。

    var cell = new DataTemplate(typeof(ImageCell));
    cell.SetBinding(ImageCell.ImageSourceProperty, "Afbeelding");
    cell.SetBinding(TextCell.TextProperty, "Naam");
    cell.SetBinding(TextCell.DetailProperty, "Omschrijving");

    var listview = new ListView
    {
        ItemsSource = Graanziekten,
        ItemTemplate = cell
    };

你也可以将Image属性留空：

    public ImageSource BitmapThumbnail
    {
        get
        {
             return Afbeeldingen.First().AfbeeldingSmall;
        }
    }

并使用一个转换器一起：

    public class ByteArrayToImageConverter: IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            byte[] imageAsBytes = (byte[])value;
            return ImageSource.FromStream(() => new MemoryStream(imageAsBytes);
        }

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

如果您要使用转换器，您需要将SetBinding更改为：

    cell.SetBinding(ImageCell.ImageSourceProperty, "Afbeelding", BindingMode.OneWay, new ByteArrayToImageConverter());

编辑： 你的 SetBinding(TextCell) 应该是 SetBinding(ImageCell)。你可以尝试按照以下方式构建 datatemplate，虽然这不会有任何影响，但我已经没有更好的主意了：

var listview = new ListView
{
    ItemsSource = Graanziekten,
    ItemTemplate = new DataTemplate(() =>
    {
        ImageCell imageCell = new ImageCell();
        imageCell.SetBinding(ImageCell.ImageSourceProperty, new Binding("Afbeelding", BindingMode.OneWay, new ByteArrayToImageConverter()));
        imageCell.SetBinding(ImageCell.TextProperty, "Naam");
        imageCell.SetBinding(ImageCell.DetailProperty, "Omschrijving");
        return imageCell;
    };
};

而不是

var listview = new ListView
{
    ItemsSource = Graanziekten,
    ItemTemplate = cell
};