Bild in WPF aus der Datenbank anzeigen

Question

Ich habe die folgende Datenbank: http://merc.tv/img/fig/Northwind_diagram.jpg und ich möchte alle Mitarbeiter und ihre Bilder in einer Listbox anzeigen. Jedes Mal, wenn ich meinen Code ausführen, erhalte ich eine System.InvalidOperationException an diesem Teil des Codes:

private void Window_Loaded(object sender, RoutedEventArgs e) 
    { 
     var list = db.Employees; 
     list.Load(); 
     liemp.ItemsSource = list.Local.OrderBy(l => l.LastName); 
    } 

Das ist mein WPF-Code ist:

<Window x:Class="NorthwindWPF.employeeList" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
     xmlns:local="clr-namespace:NorthwindWPF" 
     mc:Ignorable="d" 
     Loaded="Window_Loaded" 
     Title="employeeList" Height="350" Width="300"> 
    <Grid> 
     <ListBox x:Name="liemp" 
      DisplayMemberPath="FirstName" 
      SelectedValuePath="EmployeeID"> 
      <Image Source="{Binding PhotoPath}" /> 
     </ListBox> 

    </Grid> 
</Window> 

Und das ist mein Klassencode:

namespace NorthwindWPF 
{ 
    /// <summary> 
    /// Interaction logic for employeeList.xaml 
    /// </summary> 
    public partial class employeeList : Window 
    { 

     NorthwindEntities db = new NorthwindEntities(); 

     public employeeList() 
     { 
      InitializeComponent(); 
     } 

     private void Window_Loaded(object sender, RoutedEventArgs e) 
     { 
      var list = db.Employees; 
      list.Load(); 
      liemp.ItemsSource = list.Local.OrderBy(l => l.LastName); 
     } 

    } 
} 

Answer 1

Sie haben direkt ein einzelnes Element Image zur ListBox hinzugefügt.

<ListBox ...> 
    <Image Source="{Binding PhotoPath}" /> <!-- here --> 
</ListBox> 

Anschließend wird die ListBox der ItemsSource Einstellung wird dann mit einem InvalidOperationException scheitern.

Statt der DisplayMemberPath Eigenschaft List-Box zu setzen, sollten Sie seine ItemTemplate wie folgt definieren:

<ListBox x:Name="liemp" SelectedValuePath="EmployeeID"> 
    <ListBox.ItemTemplate> 
     <DataTemplate> 
      <StackPanel Orientation="Horizontal"> 
       <Image Source="{Binding PhotoPath}"/> 
       <TextBlock Text="{Binding FirstName}"/> 
      </StackPanel> 
     </DataTemplate> 
    </ListBox.ItemTemplate> 
</ListBox>