WPF C# Show images in stack panel

Question

I am actually solving the issue with stack panel and images I would like to show in it.

What my approach was: Because of just about 50 pictures to be shown , I just get ti image , make a thumbnail from it , and place that one by one to the stackpanel on left side of my program. (As bitmap) User is able to click on image and do the action with a image. Required amount was about 50 images.

New state: New state is that the required amount of images is about 500 so 10 times more. The problem is even my thumbnail is too small when I am adding it like :

foreach image in list do :

• create thumbnail
• add on click or and on touch event to that thumbnail
• add that thumbnail to the stack panel

I saw somewhere was used a picture box , not sure if that will help me.

I am thinking about creating lists of pictures links (50 in every ) and put for instance first in a scroll bar and when scrollbar reaches the bottom, load next and when the top reaches load previous list.

The problem is I am reaching with ~ 175 images the maximum of process memory. I am waiting for garbage collector to do its job after every cycle.

Maybe my approach is not good or should be different so this is why I am asking which approach use in order to solve this problem you suggest.

The source of the photos is simply folder of thumbnails of size 150x150 .

The images are added one by one in certain period of time ( one foto every one second or so )

Thank you

Answer 1

An example of implementation.

1. Create a collection of images sources.
   The collection can contain a string or an Url with a path to the image. In this case, the image will be created only when it is shown in the Window.
   You can also set an instance of ImageSource (or rather classes derived from it). In this case, the image will be immediately loaded into memory.
   Also set the property for specifying the selected image.

using System;
using System.Collections.ObjectModel;
using System.Windows.Media.Imaging;

namespace ImagesViewer
{
    public class ImagesViewerViewModel
    {
        public ObservableCollection<object> ImagesSource { get; }
            = new ObservableCollection<object>()
            {
                "https://miro.medium.com/max/2400/0*UEtwA2ask7vQYW06.png",
                new Uri("https://149351115.v2.pressablecdn.com/wp-content/uploads/2021/06/stackoverflow-prosus-blue-orange.png"),
                new BitmapImage(new Uri("https://amazinghiring.com/wp-content/uploads/2019/03/jpddcgb89ow.jpg"))
            };

        public object SelectedImage { get; set; }
    }
}

2. Bind the ListBox source to the created collection.
   In the Element Template, specify the Image with the binding to the element and the thumbnail sizes you need.
   Assign the selected item to the property for the selected image.
   The ListBox has a VirtualizingStackPanel built in by default, so you don't need to take any additional steps to limit using memory.
   In the viewing region, set the Image with a binding to the property for the selected image.

<Window x:Class="ImagesViewer.ImagesViewerWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:ImagesViewer"
        mc:Ignorable="d"
        Title="ImagesViewerWindow" Height="450" Width="800">
        <FrameworkElement.DataContext>
            <local:ImagesViewerViewModel/>
        </FrameworkElement.DataContext>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <ListBox ItemsSource="{Binding ImagesSource}"
                 SelectedItem="{Binding SelectedImage}">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Image Source="{Binding}" Margin="5"
                           Width="100" Height="100"/>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
        <Image Grid.Column="1"
               Source="{Binding SelectedImage}"/>
    </Grid>
</Window>

Ok but scoriling of list of 170 150x150 causing the slowinest of the program as I already mentioned . I did the test already. Can you confirm or refute that please ?

Тестирование.

1. More than 1200 images in JPG and PNG formats are pre-recorded in the folder "C:\150x150".

2. The ViewModel gets a list of files in this folder and creates a string array with their paths. The time for this operation is also recorded.

    public class ImagesViewModel
    {
        public IEnumerable<string> ImagesPaths { get; }
        public long ExecutionTimeGetPaths {get;}
        public ImagesViewModel()
        {
            Stopwatch stopwatch = new Stopwatch();
            stopwatch.Start();
            ImagesPaths = Directory.GetFiles("C:/150x150")
                .Where(path => path.EndsWith(".jpg") || path.EndsWith(".png"))
                .ToArray();
            stopwatch.Stop();
            ExecutionTimeGetPaths = stopwatch.ElapsedMilliseconds;
        }
    }

3. In View in the upper right corner displays the time taken to get the paths of all files.
   On the left side is a ListBox showing images in size 150x150 for all files.

<Window x:Class="Eee.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Eee"
        mc:Ignorable="d"
        Title="MainWindow" Height="1000" Width="300">
    <Window.DataContext>
        <local:ImagesViewModel/>
    </Window.DataContext>
    <Grid>
        <TextBlock Text="{Binding ExecutionTimeGetPaths}"
                   HorizontalAlignment="Right" VerticalAlignment="Top"
                   FontSize="30" Margin="10"/>
        <ListBox ItemsSource="{Binding ImagesPaths}" HorizontalAlignment="Left">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Image Source="{Binding}"
                           Width="150" Height="150"/>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>
</Window>

4. Results: the time of obtaining the paths is 12-14 ms, the images are displayed instantly.
   There are NO LAGS AT ALL when scrolling.

5. The same was verified for image files of arbitrary format from 128x128 to 4200x2800.
   The result is the same.