在列表框中显示图像

本文关键字：显示图 图像 显示 列表 | 更新日期: 2023-09-27 17:57:09

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

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

我的代码是：

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 下发现了一些项目，但我什么也没显示。我会很高兴得到任何帮助！谢谢！！

在列表框中显示图像

Some notes

  • 数据上下文 对于 ListBox 它不是必需的，则设置 ItemSource。而不是设置ItemTemplate

  • 在数据模板中，删除{Binding ImagePath}，而不是写{Binding}，因为在这种情况下，数据模板的元素继承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();
    }
}
相关文章：