Adding image to ListBox item

Question

I am currently working on a C# WPF appplication where I am trying to add an image, followed by some text in each list item.

I've got the binding working for the text but the image isn't displayed.

Below is my XAML:

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

Below is my DirectoryListing class

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

Below is how I am adding items to the 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"));

The text is getting added fine but not the image.

I'm not sure if it is related but I get the following in the Console Output in 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')

Thanks for any help you can provide

UPDATE

I've got it working thanks to Clemens answer, still using the same two variables as the path isn't the path to the image, but anyway, it is displaying the image and text now.

The problem is it displays the text and the picture is underneath, I need to show the picture and the text side by side, how can I do this?

Answer 1

Reduce your view model to this:

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

and change your DataTemplate to this:

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

Built-in type conversion will automatically create an ImageSource from the file path string.