如何在ListView中显示实际图像而不是其位置

本文关键字：图像 位置 ListView 显示 | 更新日期: 2023-09-27 17:54:59

我发现这个代码在WPF中添加图片到ListView。但是，它只显示图像位置，而不是实际图像:

            var image = new BitmapImage();
            string fileName = @"C:'Peak Sourcing'Work'ppt_test'slides_png'slide1.png";
            using (var stream = new FileStream(fileName, FileMode.Open))
            {
                image.BeginInit();
                image.CacheOption = BitmapCacheOption.OnLoad;
                image.StreamSource = stream;
                image.EndInit();
            }

            ListBoxItem item = new ListBoxItem();
            Thumbnails.Items.Add(image);

后面的XAML很简单:

<ListView Name="Thumbnails" Margin="10,10,804,10" >
            <ListView.ItemsPanel>
                <ItemsPanelTemplate>
                    <UniformGrid Columns="1"/>
                </ItemsPanelTemplate>
            </ListView.ItemsPanel>

 </ListView>

我还发现了一些其他代码，但它们都只是将图像位置显示为字符串而不是图像。你能帮我解决这个问题吗?

如何在ListView中显示实际图像而不是其位置

可以添加到XAML:

        <ListView  x:Name="lv" Background="WhiteSmoke" 
                   Height="500" 
                   ItemsSource="{Binding models}">
            <ListView.View>
                <GridView>
                    <GridViewColumn>
                        <GridViewColumn.CellTemplate>
                            <DataTemplate>
                                <Image Source="{Binding ImagePath}" 
                                       HorizontalAlignment="Left" 
                                       Stretch="Fill" 
                                       Height="100"
                                       Width="100"/>
                            </DataTemplate>
                        </GridViewColumn.CellTemplate>
                    </GridViewColumn>
                </GridView>
            </ListView.View>
        </ListView>

你需要一个模型:

public class Model : INotifyPropertyChanged
{
private Uri _ImagePath;
public Uri ImagePath
{
    get
    {
        return _ImagePath;
    }
    set
    {
        _ImagePath = value;
        PropertyChanged(this, new PropertyChangedEventArgs("ImagePath"));
    }
}
public event PropertyChangedEventHandler PropertyChanged = delegate { };

}

和后面的代码示例:

public partial class MainWindow : Window
{
public Model ImageModel { get; set; }
public MainWindow()
{
    InitializeComponent();
    ImageModel = new Model();
    ImageModel.ImagePath = new Uri(@"/ImageSource;component/Images/Image1.jpg", UriKind.RelativeOrAbsolute);
    this.DataContext = ImageModel;
}
private void Button_Click(object sender, RoutedEventArgs e)
{
    ImageModel.ImagePath = new Uri(@"/ImageSource;component/Images/Image2.jpg", UriKind.RelativeOrAbsolute);
}

}

这是解决这个问题最简单和最快的方法。如果你需要MVVM，请举手，我们可以得到一个命令，而不是点击事件。还有一件事，你有图片列表吗?如果是这样，我们将不得不使用ObservableCollection并实例化许多模型，以提供所有的按钮。

  • ImageSource是我的程序集名称

  • Images是我在项目中创建的文件夹

为了填充ListView，你需要一个像这样定义的ObservableCollection<Model>:

      public ObservableCollection<Model> models { get; set; }
在构造函数中初始化: 
      models = new ObservableCollection<Model>();

，并添加一些模型实例，并设置它们的图像路径，如上面所示。

您缺少一个实际显示BitmapImage对象的DataTemplate:

<ListView Name="Thumbnails" ... >
    ...
    <ListView.ItemTemplate>
        <DataTemplate>
            <Image Source="{Binding}" />
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

如果没有数据模板，ListViewItem只显示数据项的ToString()方法的输出。

那么(没有任何MVVM)一个简单的方法来显示文件夹中的所有PNG文件将是:

Thumbnails.ItemsSource = Directory
    .EnumerateFiles(@"C:'Peak Sourcing'Work'ppt_test'slides_png", "*.png")
    .Select(f => new BitmapImage(new Uri(f)));

您正在添加BitmapImage作为ListViewItem，这是不可见的(所以它不呈现)，并显示为ToString()。

通常在这种情况下您应该使用DataTemplates，但这也应该适用于您:

var fileName = @"C:'Peak Sourcing'Work'ppt_test'slides_png'slide1.png";
var bitmap = new BitmapImage(new Uri(fileName)) { /*.. more bitmap image options if you like .. */ };
var image = new Image() { Source = bitmap /*.. more image options ..*/ }
Thumbnails.Items.Add(image);
相关文章：