WPF: ListView with Images from a folder

Question

I'm sort of new to WPF, but I have to do this and it's taking a lot of my time. I've searched for a solution but there are many alternative solutions and I honestly don't understand most of this. I have this XAML code:

<ListView Name="Thumbnails">
    <ListView.ItemTemplate>
        <DataTemplate>
            <Image Source="{Binding}" Height="30" Width="30" Margin="5"/>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

As well as this codebehind:

private void Window_Loaded(object sender, RoutedEventArgs e)
{
    DirectoryInfo folder = new DirectoryInfo(Path.GetDirectoryName(Process.GetCurrentProcess().MainModule.FileName) + @"\SlikeSportista\");
    FileInfo[] images = folder.GetFiles("*.jpg");
    foreach (FileInfo img in images)
    {
        Thumbnails.Items.Add(img);
    }
}

I've also tried this line of code in the foreach loop:

Thumbnails.Items.Add(System.Drawing.Image.FromFile(img.FullName));

In both cases the items are added, but the images are not displayed correctly, or rather, at all. You can select them, and there are the same amount of elements as there are in the folder, but there is no display.

Another question (less important one) would be how to display the images in squares instead of rows. Basically I want to have about 4 or so images per row, but now I have only 1 element per row, stretched all the way (although I can't see what is being displayed).

Solution

In your first attempt, you're adding FileInfo objects to the ListView's items collections. These aren't automatically converted to ImageSource items, as required by the binding in your DataTemplate. Add the FileInfo's FullName instead:

foreach (FileInfo img in images)
{
    Thumbnails.Items.Add(img.FullName);
}

In your second attempt the problem is that you add instances of System.Drawing.Image, which is not part of WPF, but WinForms, and will also not be converted automatically. You may use BitmapImage instead:

foreach (FileInfo img in images)
{
    Thumbnails.Items.Add(new BitmapImage(new Uri(img.FullName)));
}

The difference between both solutions is that in the second one you manually create image objects, whereas the first one relies on automatic conversion from string to ImageSource, which is built into WPF as a TypeConverter.

---

A solution for your second question would be to replace the ListView's ItemsPanel, perhaps by a UniformGrid:

<ListView Name="Thumbnails">
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid Columns="4"/>
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
    ...
</ListView>