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

Question

I have found this code to add picture to a ListView in WPF. However it only displays the image location rather than the actual image:

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

The XAML behind is simply:

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



 </ListView>

I also found few other codes, but all of them just show the image location as string rather than image. Can you please help me solve this?

Answer 1

This can be added to the 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>

Yow need a model for this :

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 { };

}

And an example for the code behind:

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

}

This is the easiest and fastest way to tackle this issue. If you need MVVM just raise a hand and we can get a Command instead of that Click event. One more thing, do you have a list of images? If so, we will have to use an ObservableCollection and instantiate many models in order to feed all the Buttons.

• ImageSource is my assembly name.

• Images is a folder created in my project.

In order to populate the ListView you need an ObservableCollection<Model> defined like this :

      public ObservableCollection<Model> models { get; set; }

Initialize it in the constructor :

      models = new ObservableCollection<Model>();

and add some Model instances to it with their image path set as shown above.

Answer 2

You are missing a DataTemplate that actually displays the BitmapImage objects:

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

Without the DataTemplate a ListViewItem just shows the output of the ToString() method of the data items.

---

Then (without any MVVM) an easy way to show all PNG files in a folder would be this:

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

Answer 3

You are adding BitmapImage as ListViewItem , which is not visual (so it doesn't renders) and displayed as ToString() .

Normally you should use DataTemplates in such cases, but this should works for you too:

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