在列表框中显示图像

Question

我知道网上有很多这样的问题，但相信我，我在这上面花了很多时间，但我仍然没有成功，我真的很高兴得到任何帮助！

我在运行时加载各种图像，我想在列表框中显示它们（小图像，然后用户应该单击其中一个并以实际大小显示）。

我的代码是：

public partial class MainWindow : Window
{
    int imageNumber = 0;
    public List<String> ImagePath = new List<String>();

    public MainWindow()
    {
        InitializeComponent();
        lb_Images.ItemsSource = ImagePath;
    }

    private void bu_addImage_Click(object sender, RoutedEventArgs e)
    {
        addImageToListBox();
    }

    private void addImageToListBox()
    {
        imageNumber++;
        if (imageNumber == 4) imageNumber = 0;
        string directoryPath = AppDomain.CurrentDomain.BaseDirectory;

        // load input image
        string ImageFilename = directoryPath + "img";
        ImageFilename += imageNumber.ToString();
        ImageFilename += ".jpg";

        ImagePath.Add(ImageFilename);
    }
}

xaml 是：

<Window x:Class="forQuestionWPF.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="216" Width="519">

    <Window.Resources>
        <DataTemplate x:Key="ImageGalleryDataTemplate">
            <Grid>
                <Border BorderBrush="#FFFF9800" BorderThickness="1"  Width="120" Height="120" Padding="5" Margin="5" CornerRadius="6">
                    <!--Bind Image Path in Image Control-->
                    <Image Source="{Binding ImagePath}" Stretch="Fill"  HorizontalAlignment="Center">
                        <!--View Large Image on Image Control Tooltip-->
                        <Image.ToolTip>
                            <Grid>
                                <Image Source="{Binding ImagePath}" Stretch="Fill" HorizontalAlignment="Center" Height="200" Width="200"></Image>
                            </Grid>
                        </Image.ToolTip>
                    </Image>
                </Border>
            </Grid>
        </DataTemplate>

        <ItemsPanelTemplate x:Key="ImageGalleryItemsPanelTemplate">
            <!--Display Images on UniformGrid Panel-->
            <UniformGrid Rows="1" Columns="25" HorizontalAlignment="Center" VerticalAlignment="Stretch"/>
        </ItemsPanelTemplate>
    </Window.Resources>

    <Grid>
        <Canvas Height="177" HorizontalAlignment="Left" Name="canvas1" VerticalAlignment="Top" Width="497">

            <ListBox Canvas.Left="6" Canvas.Top="5" Height="166" Name="lb_Images" Width="441"
                     BorderBrush="{x:Null}" DataContext="{Binding Source={StaticResource ImageGalleryDataTemplate}}"
                     ItemsSource="{Binding Source={StaticResource ImageGalleryItemsPanelTemplate}}">
            </ListBox>

            <Button Canvas.Left="453" Canvas.Top="26" Content="Add" Height="64" Name="bu_addImage" Width="38" Click="bu_addImage_Click" />
        </Canvas>
    </Grid>
</Window>

我知道当我将图像路径添加到列表时列表框已更新，因为如果我调试我在lb_Images.items 下找到了一些项目，但我什么也没显示。 我会很高兴有任何帮助！谢谢！！

Answer 1

Some notes

• ListBox 的 DataContext 没有必要，然后设置 ItemSource。而不是设置ItemTemplate

• 在DataTemplate 中删除{Binding ImagePath}，而不是写{Binding}，因为在这种情况下DataTemplate 的元素继承DataContext。

• 向ListBox.Items添加新项目时，必须调用ListBox.Items.Refresh()或使用ObservableCollection<T>，因为：

ObservableCollection 表示一个动态数据集合，当项目被添加、删除或整个列表被刷新时provides notifications。

试试这个例子：

XAML

<Window.Resources>
    <DataTemplate x:Key="ImageGalleryDataTemplate">
        <Grid>
            <Border BorderBrush="#FFFF9800" BorderThickness="1"  Width="120" Height="120" Padding="5" Margin="5" CornerRadius="6">
                <Image Source="{Binding}" Stretch="Fill"  HorizontalAlignment="Center">
                    <Image.ToolTip>
                        <Grid>
                            <Image Source="{Binding}" Stretch="Fill" HorizontalAlignment="Center" Height="200" Width="200" />
                        </Grid>
                    </Image.ToolTip>
                </Image>
            </Border>
        </Grid>
    </DataTemplate>

    <ItemsPanelTemplate x:Key="ImageGalleryItemsPanelTemplate">
        <UniformGrid Rows="1" Columns="25" HorizontalAlignment="Center" VerticalAlignment="Stretch"/>
    </ItemsPanelTemplate>
</Window.Resources>

<Grid>
    <Canvas Height="177" HorizontalAlignment="Left" Name="canvas1" VerticalAlignment="Top" Width="497">

        <ListBox Canvas.Left="6" Canvas.Top="5" Height="166" Name="lb_Images" Width="441"  
                 ItemTemplate="{StaticResource ImageGalleryDataTemplate}"
                 ItemsSource="{Binding Path=ImagePath}">
        </ListBox>

        <Button Canvas.Left="453" Canvas.Top="26" Content="Add" Height="64" Name="bu_addImage" Width="38" Click="bu_addImage_Click" />
    </Canvas>
</Grid>

Code-behind

public partial class MainWindow : Window
{
    int imageNumber = 0;
    public List<String> ImagePath = new List<String>();

    public MainWindow()
    {
        InitializeComponent();
        lb_Images.ItemsSource = ImagePath;
    }

    private void bu_addImage_Click(object sender, RoutedEventArgs e)
    {
        addImageToListBox();
    }

    private void addImageToListBox()
    {
        imageNumber++;
        if (imageNumber == 4) imageNumber = 0;
        string directoryPath = AppDomain.CurrentDomain.BaseDirectory;

        // load input image
        string ImageFilename = directoryPath + "img";
        ImageFilename += imageNumber.ToString();
        ImageFilename += ".jpg";

        ImagePath.Add(ImageFilename); 

        lb_Images.Items.Refresh();
    }
}