Thêm hình ảnh vào mục ListBox

Question

Tôi hiện đang làm việc trên ứng dụng C# WPF nơi tôi đang cố gắng thêm hình ảnh, theo sau là một số văn bản trong mỗi mục danh sách.

Tôi đã liên kết làm việc cho văn bản nhưng hình ảnh không được hiển thị.

Dưới đây là XAML của tôi:

<Window x:Class="ServerAdministrator.FtpDirectoryListing" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:local="clr-namespace:ServerAdministrator" 
     Title="FTP Directory Listing" Height="391" Width="599"> 
    <Grid> 
     <StatusBar Height="30" Margin="0,322,0,0" Name="statusBar1" VerticalAlignment="Top" /> 
     <ToolBar Height="26" Name="toolBar1" VerticalAlignment="Top" /> 
     <TextBox Height="23" HorizontalAlignment="Left" Margin="12,32,0,0" Name="textBox1" VerticalAlignment="Top" Width="517" /> 
     <ListBox x:Name="lstDirecotryListing" Height="233" HorizontalAlignment="Left" Margin="12,61,0,0" VerticalAlignment="Top" Width="553"> 
      <ListBox.ItemTemplate> 
       <DataTemplate DataType="{x:Type local:DirectoryListing}"> 
        <StackPanel> 
         <TextBlock Margin="3" Text="{Binding path}" /> 
         <ContentControl Margin="3" Content="{Binding image}" /> 
        </StackPanel> 
       </DataTemplate> 
      </ListBox.ItemTemplate> 
     </ListBox> 
    </Grid> 
</Window> 

Dưới đây là lớp DirectoryListing tôi

class DirectoryListing 
    { 
     public string path {get; set;} 
     public Image image{get; set;} 
     public DirectoryListing(Image imgage, String path) 
     { 
      this.image = image; 
      this.path = path; 
     } 
    } 

Dưới đây là cách tôi đang bổ sung thêm các mục vào ListBox

Image image = new Image(); 
      BitmapImage bi = new BitmapImage(new Uri(@"C:\Users\Chris\Documents\Visual Studio 2010\Projects\ServerAdministrator\ServerAdministrator\bin\Debug\images\directory.png")); 
      image.Source = bi; 
      lstDirecotryListing.Items.Add(new DirectoryListing(image, "hello")); 

Văn bản là nhận thêm tốt nhưng không phải là hình ảnh.

Tôi không chắc chắn nếu nó có liên quan nhưng tôi nhận được những điều sau đây trong Output Console trong VS2010

System.Windows.Data Error: 4 : Cannot find source for binding with reference 'RelativeSource FindAncestor, AncestorType='System.Windows.Controls.ItemsControl', AncestorLevel='1''. BindingExpression:Path=HorizontalContentAlignment; DataItem=null; target element is 'ComboBoxItem' (Name=''); target property is 'HorizontalContentAlignment' (type 'HorizontalAlignment') System.Windows.Data Error: 4 : Cannot find source for binding with reference 'RelativeSource FindAncestor, AncestorType='System.Windows.Controls.ItemsControl', AncestorLevel='1''. BindingExpression:Path=VerticalContentAlignment; DataItem=null; target element is 'ComboBoxItem' (Name=''); target property is 'VerticalContentAlignment' (type 'VerticalAlignment')

Nhờ sự giúp đỡ bạn có thể cung cấp

CẬP NHẬT

tôi đã có nó làm việc nhờ Clemens trả lời, vẫn còn sử dụng hai biến tương tự như con đường không phải là con đường dẫn đến hình ảnh, nhưng dù sao, nó được hiển thị hình ảnh và văn bản bây giờ.

Vấn đề là nó hiển thị văn bản và hình ảnh ở bên dưới, tôi cần hiển thị hình ảnh và văn bản cạnh nhau, làm cách nào tôi có thể làm điều này?

Answer 1

Giảm model tầm nhìn của bạn như thế này:

public class DirectoryListing 
{ 
    public string Name { get; set; } 
    public string Path { get; set; } 
} 

và thay đổi DataTemplate của bạn như thế này:

<ListBox.ItemTemplate> 
    <DataTemplate> 
     <StackPanel Orientation="Horizontal"> 
      <TextBlock Margin="3" Text="{Binding Name}"/> 
      <Image Margin="3" Source="{Binding Path}"/> 
     </StackPanel> 
    </DataTemplate> 
</ListBox.ItemTemplate> 

Built-in loại chuyển đổi sẽ tự động tạo một ImageSource từ chuỗi đường dẫn tập tin.