向ListBox项添加图片

Question

我目前正在开发一款C# WPF应用程序，尝试在每个列表项中添加一张图像和一些文本。

我的文本绑定已经实现了，但是图片没有显示。

以下是我的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>

以下是我的DirectoryListing类。

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

以下是我如何向列表框中添加项目：

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"));

文本添加成功，但图片未添加。

我不确定是否相关，但在VS2010的控制台输出中，我收到以下错误消息：

System.Windows.Data Error: 4 : 找不到绑定的源 参考'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 : 找不到绑定的源 参考'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')

感谢您提供的任何帮助。

更新

由于Clemens的答案，我已经使其工作，仍然使用相同的两个变量，因为路径不是指向图像的路径，但无论如何，它现在显示图像和文本。

问题是它显示文本，图片在下面，我需要显示图片和文本并排，怎么做？

- Boardy

---

异常情况出现在组合框项的HorizontalContentAlignment上，与此问题不太相关。你的代码看起来很好，我会再看看，希望你能得到答案！ - BradleyDotNET

你能发布定义 ComboBoxItem 的 XAML 吗？ - 123 456 789 0

我又看了一遍，关于组合框的那条消息是针对先前的对话框而非有问题的那个。 - Boardy

你的视图模型中不应该有一个 Content 属性绑定到 Image 控件的 ContentControl。相反，在 DataTemplate 中应该有一个 Image 控件，它的 Source 属性绑定到视图模型中的 (文件名) 字符串或 BitmapImage 属性。 - Clemens

我也尝试过了，假设我做得正确，结果一样。 - Boardy

Answer 1

将你的视图模型简化为以下内容：

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

并将您的DataTemplate更改为以下内容：

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

内置类型转换将自动从文件路径字符串创建ImageSource。

- Clemens

---

谢谢，这个方法可行了。但是还有第二个问题，我已经更新了我的问题。 - Boardy

在 StackPanel 上设置 Orientation="Horizontal"。 - Clemens

谢谢，就是这么简单。感谢您的帮助，非常感激。 - Boardy