将ListBox绑定到ObservableCollection时使用DisplayMemberPath选择图像

Question

我将ListBox绑定到ObservableCollection项具有Image属性的项目，该项属性返回Image。但是，我没有得到图像列表，而是得到了这个：

有什么建议吗？

的Xaml：

<Window x:Class="ObservableCollectionDirectoryListBox.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">

    <DockPanel>

        <ListBox DockPanel.Dock="Top"
                 Name="listBox"
                 ItemsSource="{Binding Source={StaticResource infos}}"
                 DisplayMemberPath="Image"/>

    </DockPanel>

</Window>

C＃：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Collections.ObjectModel;
using System.IO;
using System.Threading;

namespace ObservableCollectionDirectoryListBox
{
    public class ImageFileInfo : FileSystemInfo
    {
        public Image Image
        {
            get
            {
                var image = new Image() { Width = 100 };

                var bitmapImage = new BitmapImage();
                bitmapImage.BeginInit();
                bitmapImage.UriSource = new Uri(this.FullName);
                bitmapImage.DecodePixelWidth = 100;
                bitmapImage.EndInit();

                image.Source = bitmapImage;

                return image;
            }
        }

        public ImageFileInfo(string path)
            : base()
        {
            FullPath = path;
        }

        public override void Delete()
        {
            throw new NotImplementedException();
        }

        public override bool Exists
        {
            get { throw new NotImplementedException(); }
        }

        public override string Name
        {
            get { throw new NotImplementedException(); }
        }
    }

    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            var infos = new ObservableCollection<ImageFileInfo>();

            Resources.Add("infos", infos);

            InitializeComponent();

            new DirectoryInfo(@"C:\Users\dharmatech\Pictures\From dharmatech\Camera roll")
            .GetFiles("*.jpg")
            .ToList()
            .ForEach(file => infos.Add(new ImageFileInfo(file.FullName)));

            var fileSystemWatcher =
                new FileSystemWatcher(@"C:\Users\dharmatech\Pictures\From dharmatech\Camera roll") 
                { EnableRaisingEvents = true };

            var context = SynchronizationContext.Current;

            fileSystemWatcher.Created += (s, e) =>
                context.Post(val =>
                {
                    if ((File.GetAttributes(e.FullPath) & FileAttributes.Normal) ==
                        FileAttributes.Normal)
                        infos.Add(new ImageFileInfo(e.Name));
                }, true);
        }
    }
}

Answer 1

你不应该有一个Images的集合，它是一个控件而不属于那里，而应该是ImageSource的集合，然后在DataTemplate中（ ListBox.ItemTemplate）可以绑定到Source的{​​{1}}。

Answer 2

我能够使用DataTemplate来解决问题。这是ListBox：

的Xaml代码

<ListBox DockPanel.Dock="Top"
         Name="listBox"
         ItemsSource="{Binding Source={StaticResource infos}}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Image Source="{Binding Path=FullName}" Height="35"/>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>