Using DisplayMemberPath to select an Image when binding a ListBox to an ObservableCollection

Question

I'm binding a ListBox to an ObservableCollection of items which have an Image property, which returns an Image. However, instead of getting a list of images, I get this:

Any suggestions?

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

I was able to solve the problem using a DataTemplate. Here's the Xaml code for the ListBox:

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

Answer 2

You shouldn't really have a collection of Images which is a control and does not belong there, instead it should be a collection of ImageSource, which then in a DataTemplate (ListBox.ItemTemplate) can be bound to the Source of an Image.