Из за чего ен отображаются изображения в ListBox?

Question

[xXNullXx]

Доброго времени суток.

Суть в чем: Должно быть что то в таком духе:


А выходит в таком духе:

Белые элементы(их там 3).

Это код страницы галереи:

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

Класс галереи:

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

Ну и инициализация:

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

PhotoList.ItemsSource = gallery.ImageList;

Answer 1

[Foggy Finder]

В шаблоне элемента списка вы устанавливаете источником привязки ImageList - коллекцию BitmapImage

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

У изображения нет такого свойства, и следовательно ничего не отображается. Здесь вы хотите использовать сам объект, а не какое-либо из его свойств. Просто не указывайте Path в привязке (или сообщите в явном виде используя символ .: {Binding Path = . })

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

Совет

Image может сам подцепить картинку если использовать корректный путь к файлу, а значит можно упростить класс убрав ImageList и использовав в привязке LinksToPictures. Кроме этого можно безболезненно убрать приватные свойства (вы все равно не сможете к ним привязаться). В итоге после небольшого рефакторинга получится следующий класс:

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. Устанавливать ItemsSource для списка можно в разметке:

ItemsSource="{Binding LinksToPictures}"

Если вы так пробовали делать, но не видели изменений, проверьте что DataContext был установлен, на данном этапе это можно сделать так:

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

В дальнейшем вы научитесь устанавливать контекст извне окон.

2. Если вы хотите изменять значение свойства из кода объекта (Galery) вам нужно будет реализовать интерфейс INotifyPropertyChanged (или, сокращенно INPC).

А для того, чтобы интерфейс обновлялся при изменении последовательности элементов (удаление, добавление и т.д.), коллекция должна реализовывать интерфейс INotifyCollectionChanged (в ответах и комментариях вы можете увидеть часто используемое сокращение - INCC).
List<_> к таким коллекциям не относится, поэтому лучше заменить на ObservableCollection.

Это очень важные интерфейсы, поэтому рекомендую разобраться как они работают.

Comments

[xXNullXx]

Спасибо за советы, очень полезны.

[Foggy Finder]

xXNullXx, пожалуйста, если будут еще вопросы буду рад помочь разобраться