c# - xamarin.forms 将 listview-imagecell 图像源绑定(bind)到 byte[]

Question

我目前正在开始使用 Xamarin.Forms。我的页面上有一个 ListView，我绑定(bind)到我的 ViewModel。 ItemTemplate 的类型为“ImageCell”

绑定(bind)单元格的Text和Detail属性没有问题。但是，我无法绑定(bind)“ImageSourceProperty”。这是使用 byte[] 生成的图像源(我的图像是 SQLite 数据库中的 blob)

我想知道是否有人知道如何解决这个问题(或另一种将 byte[]-image 绑定(bind)到 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)，它工作正常。但是，如果我使用上面显示的代码，内容页面甚至根本不会呈现(空黑屏)。

起初我认为问题可能与从属性中动态获取 byte[] 的事实有关，但当我获取所有必需的 byte[] 时会出现相同的效果。

此外，当我将单个图像添加到我的内容页面时，使用相同的方法它确实有效。只是不在 ListView 中。

我正在尝试在 WinPhone8 上执行此操作(尽管我认为平台不重要)

提前致谢。

Answer 1

您是否尝试过将其直接绑定(bind)到您的列表？而不是加载该模型对象。

    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)。您也可以尝试像这样构建数据模板吗？它不应该有什么不同，但我已经失去了想法:

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
};