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?

The exception is for HorizontalContentAlignment on a combo box item, not likely related to this problem. Your code looks fine, I'll look some more and I hope you get an answer! — BradleyDotNET
I've looked again. that message about the combo box, is for a previous dialogue, not the one with the issue — Boardy
You should not have a ContentControl with a Content property bound to an Image control in your view model. Instead there should be an Image control in the DataTemplate, which has its Source property bound to either a (file name) string or a BitmapImage property in the view model. — Clemens
I've tried that as well, does the same thing, assuming I'm doing it correctly — Boardy

Clemens Clemens · Accepted Answer · 2014-04-08T20:27:40

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.

Adding image to ListBox item

1 Answers