Multiple images from folder

Question

as I\'m fairly new to C# and WPF I just can\'t figure out how to do this. I have a form that should show 151 images (all pokemon generation 1 sprites) in a form. The way I\'

Answer 1

You create carBitmap exactly once, outside the loop, and use it every time. Create a new one for each image instead.

        Image img_ding = new Image();
        BitmapImage carBitmap = new BitmapImage(new Uri("pack://application:,,,/Images/All_Sprites/001.png", UriKind.Absolute));
        img_ding.Source = carBitmap;

I assume that path ending in 001.jpg should be changing each time; no doubt you can figure that out. Is it the value of i in the for loop, stringified and left-padded with zeroes? That'd look like this:

        Image img_ding = new Image();
        var uri = String.Format("pack://application:,,,/Images/All_Sprites/{0:000}.png", i);
        //  N.B. UriKind.Absolute is redundant, sigh
        BitmapImage carBitmap = new BitmapImage(new Uri(uri, UriKind.Absolute ));
        img_ding.Source = carBitmap;

Also, @Clemens is going to provide an answer that shows you how to rewrite the whole thing using an ItemsControl, which will be much nicer than this. I already wrote somebody a bunch of XAML this morning so it's his turn.

Answer 2

You need to define your bitmap inside the loop, not outside. Then each iteration will create a new bitmap with the new path.

so something like:

for (int i = 0; i < imgCount; i++)
{
   // padding left will give you 001 and 010 and 151
   string img = i.ToString().PadLeft(3, '0');
   BitmapImage carBitmap = new BitmapImage(new Uri("pack://application:,,,/Images/All_Sprites/" + img+".png", UriKind.Absolute));
   // the rest of your code
}

Answer 3

Instead of programmatically adding Image controls to a Canvas, write this XAML:

<ItemsControl x:Name="images">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid Columns="10"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Image Width="150" Height="150" Source="{Binding}"/>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

Probably add some Margin to the Image control in the DataTemplate.

In code behind, add one line to the constructor of your MainWindow:

using System.Linq;
...

public MainWindow()
{
    InitializeComponent();

    images.ItemsSource = Enumerable
        .Range(1, 151)
        .Select(i => string.Format("pack://application:,,,/Images/{0:000}.png", i));
}

---

Now you might want to create a proper view model, where you would have a collection-type property for your images, like

public class ViewModel
{
    public ObservableCollection<string> Images { get; }
        = new ObservableCollection<string>(Enumerable
            .Range(1, 151)
            .Select(i => string.Format("pack://application:,,,/Images/{0:000}.png", i)));
}

You would then assign the Window's DataContext to an instance of the view model, and bind to the collection property like this:

public MainWindow()
{
    InitializeComponent();
    DataContext = new ViewModel();
}

XAML

<ItemsControl ItemsSource="{Binding Images}">
    ...
</ItemsControl>