Images aren't displayed in WPF ListBox - wpf

Question

I'm trying to display images in a ListView. The images are being loaded through Entity Framework from a SQL Server database. Somehow the images don't get displayed in the ListView and I can't figure out why.
I've created a test Visual Studio project.
The images are stored in an ObservableCollection<ImageViewModel>:
private ObservableCollection<ImageViewModel> images;
public ObservableCollection<ImageViewModel> Images
{
get { return images; }
set { images = value; }
}
Please let me know if you need any further details. I'm grateful for any hints that I could try out.
I'll add a screenshot as soon as I have 10 reputation.
The ImageViewModel class looks like this:
using Common;
using TestImage.Model;
namespace TestImage.ViewModel
{
class ImageViewModel : ObservableObject
{
public ImageViewModel()
{
image = new ImageTable() { Name = "unknown"};
}
#region Properties
private ImageTable image;
public ImageTable Image
{
get { return image; }
set { image = value; }
}
public string Name
{
get { return image.Name; }
set
{
if (image.Name != value)
{
image.Name = value;
RaisePropertyChanged("Name");
}
}
}
public byte[] ImageBinary
{
get { return image.ImageBinary; }
set
{
if (image.ImageBinary != value)
{
image.ImageBinary = value;
RaisePropertyChanged("ImageBinary");
}
}
}
#endregion
}
}
The MainWindow.xaml looks like this:
<Window x:Class="TestImage.View.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:TestImage.ViewModel"
Title="MainWindow" Height="375.6" Width="525">
<Window.DataContext>
<local:ImageLibrary/>
</Window.DataContext>
<Window.Resources>
<Style TargetType="{x:Type ListBox}">
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<Border BorderBrush="Black" BorderThickness="4" CornerRadius="5" Margin="6">
<Image Source="{Binding Images}" Stretch="Fill" Width="100" Height="120" />
</Border>
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
</Style>
</Window.Resources>
<Grid Margin="0,0,0.4,1.4">
<ListBox Name="ListBoxImages" ItemsSource="{Binding Images}" Margin="413,40,20,31.6"/>
<Image Name="ImageSource" Source="{Binding SelectedImage}" HorizontalAlignment="Left" Height="148" Margin="14,90,0,0" VerticalAlignment="Top" Width="174"/>
<Button Name="ButtonPick" Content="Pick" HorizontalAlignment="Left" Margin="14,266,0,0" VerticalAlignment="Top" Width="75" RenderTransformOrigin="0.563,-0.731" Command="{Binding CommandPickImage}"/>
<Button Name="ButtonSave" Content="Save" HorizontalAlignment="Left" Margin="113,266,0,0" VerticalAlignment="Top" Width="75" RenderTransformOrigin="0.563,-0.731" Command="{Binding CommandSaveImage}" />
<Label Name="LabelFileName" Content="FileName" HorizontalAlignment="Left" Margin="14,40,0,0" VerticalAlignment="Top" Width="60"/>
<TextBox Name="TextBoxFileName" HorizontalAlignment="Left" Height="26" TextWrapping="Wrap" VerticalAlignment="Top" Width="314" Margin="79,40,0,0" Text="{Binding SelectedFileName}"/>
<Button Name="ButtonLoad" Content="Load" HorizontalAlignment="Left" Margin="113,293,0,0" VerticalAlignment="Top" Width="75" RenderTransformOrigin="0.563,-0.731" Command="{Binding CommandLoadImage}" />
<Image Source="{Binding SelectedImageDatabase}" HorizontalAlignment="Left" Height="148" Margin="193,90,0,0" VerticalAlignment="Top" Width="100"/>
</Grid>
</Window>

Answer 1

The binding in the ListBox ItemTemplate should be to the ImageViewModel's ImageBinary property, instead of Images:
<DataTemplate>
<Border ...>
<Image Source="{Binding ImageBinary}" .../>
</Border>
</DataTemplate>