Why are images not displayed in the ListBox?

Question

WPF

Good day.
The bottom line is: There must be something like this:

And it goes like this:

White elements (there are 3 of them).
This is the gallery page code:

<Page.Resources>
        <DataTemplate x:Key="ListTemplate">
            <StackPanel Margin="5">
                <Image Width="100" Height="75" Source="{Binding Path= ImageList}" IsEnabled="False" />
                <!--<TextBlock FontSize="16" Text="{Binding Path=Title}" HorizontalAlignment="Center" />
                <TextBlock FontSize="16" Text="{Binding Path=Company}" HorizontalAlignment="Center" />-->
            </StackPanel>
        </DataTemplate>
    </Page.Resources>
    
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="165"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        
        <TreeView Background="#FF252526"/>

        <ListBox x:Name="PhotoList"
                 Grid.Column="1" Grid.Row="1"
                 ItemTemplate="{StaticResource ListTemplate}" 
                 SelectionChanged="PhotoList_SelectionChanged"
                 ScrollViewer.HorizontalScrollBarVisibility="Disabled" Background="#FF1A1A1A">
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel />
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
        </ListBox>
    </Grid>

Gallery class:

public class Gallery
    {
        private int ImageIndex { get; set; }

        private string DirectoryPath { get; set; } //Путь к каталогу
        private List<string> LinksToPictures = new List<string>(); //Названия файлов

        public List<BitmapImage> ImageList = new List<BitmapImage>();

        public Gallery()
        {
        }

        public Gallery(string directoryPath)
        {
            DirectoryPath = directoryPath;

            ImageIndex = 0;

            GetLinkToImages();
            GetImage();
        }

        private void GetLinkToImages() //Получение названия файлов из переданного каталога.
        {
            LinksToPictures = Directory.GetFiles(DirectoryPath, "*.jp*g").ToList(); ;
        }

        private void GetImage() // Загружаю картинки в лист
        {
            for (int i = 0; i < LinksToPictures.Count; i++)
            {
                BitmapImage bitmapImage = new BitmapImage(new Uri(LinksToPictures[i]));
                ImageList.Add(bitmapImage);
            }
        }
   }

Well, initialization:

Class.Gallery.Gallery gallery = new Class.Gallery.Gallery(@"C:\Users\voron\Desktop\n");

PhotoList.ItemsSource = gallery.ImageList;

Answer 1

In the list item template, you set the ImageList binding source to be a BitmapImage collection

<Image Width="100" Height="75" IsEnabled="False"
       Source="{Binding Path= ImageList}"  />

The image has no such property, and therefore nothing is displayed. Here you want to use the object itself, not any of its properties. Just don't specify the Path in the binding (or tell it explicitly using the symbol . : {Binding Path = . })

<Image Width="100" Height="75" IsEnabled="False"
       Source="{Binding}"  />

Image can pick up the picture itself if you use the correct file path, which means you can simplify the class by removing the ImageList and using LinksToPictures in the binding . In addition, you can painlessly remove private properties (you still can't bind to them). As a result, after a little refactoring, we get the following class:

public class Gallery
{
    private string directoryPath; // Путь к каталогу
    public IEnumerable<string> LinksToPictures { get; } // Названия файлов

    public Gallery(string directoryPath)
    {
        this. directoryPath = directoryPath;
        LinksToPictures = Directory.GetFiles(directoryPath, "*.jp*g");
    }
}

1. You can set the ItemsSource for the list in the markup:
If you tried to do this, but did not see the changes, check that the DataContext was set, at this stage it can be done like this:

public MainWindow()
{
    InitializeComponent();
    DataContext = new Gallery("F://");
}

Later on, you will learn how to set context from outside windows.
2. If you want to change the property value from the code of the object (Galery) you will need to implement the INotifyPropertyChanged interface (or INPC for short) .
And in order for the interface to be updated when the sequence of elements changes (deletion, addition, etc.), the collection must implement the INotifyCollectionChanged interface (in the answers and comments you can see the commonly used abbreviation - INCC).
List<_> ​​does not apply to such collections, so it is better to replace it with ObservableCollection .
These are very important interfaces, so I recommend understanding how they work.