Migrating from `ImageList` in WinForms to WPF

c#, imagelist, winforms, wpf

Solution

We shall use MVVM for this.

First we will make a model.

public class MyModel
{
   public BitmapSource Picture { get; set; }
   public string Description { get; set; }
}

Then our ViewModel

public class MyViewModel
{
   public ObservableCollection<MyModel> Images { get; set; }

   public ICommand ButtonClicked { get; set; }

   ... Logic to populate the images
}

And then our view

<Window x:Class="TestWPF.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:loc="clr-namespace:TestWPF"
        Title="MainWindow"
        Height="350"
        Width="525">
    <Window.Resources>
        <loc:MyViewModel x:Key="ViewModel" />
    </Window.Resources>
    <Grid DataContext="{StaticResource ViewModel}">
        <ListView ItemsSource="{Binding Images}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <Button Command="{Binding ButtonClicked, RelativeSource=Parent}"
                            CommandParameter="{Binding Description}">
                        <Image Width="50"
                               Height="50"
                               Source="{Binding Picture}"></Image>
                    </Button>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Grid>
</Window>

That will create a list that should act in the same way.

Problem

I'd like to move a project to WPF and in it I have an `ImageList` (loaded by selecting 25 images in design view) that I use to create buttons with as follows: I've simplified the project down to the following code. This is my whole project (aside from autogenerated code in .Designer.cs): ``` public partial class Form1 : Form { Button[] buttonList = new Button[25]; Size buttonSize = new Size(140, 140); public Form1() { InitializeComponent(); this.ClientSize = new Size(142 * 5, 142 * 5); for (int i = 0; i < buttonImages.Images.Count; i++) { buttonList[i] = new Button(); buttonList[i].Size = buttonSize; buttonList[i].Location = new Point( (i % 5) * (buttonSize.Width + 2) + 1, (i / 5) * (buttonSize.Height + 2) + 1); buttonList[i].Image = buttonImages.Images[i]; } SuspendLayout(); Controls.AddRange(buttonList); ResumeLayout(false); } } ``` I can't seem to wrap my head around how to do this trivial task in WPF. As best as I can tell from answers on here (like this) I should be - Filling a folder with images - Creating a ResourceDictionary referencing them - Creating another file that references the ResourceDictionary reference - Create a something else (I can't figure out what) that accesses the images through the ResourceDictionary to load them to buttons (but the button class doesn't even have a constructor...???!!!) Can someone help translate this to WPF? Honestly, I just can't figure out where to start. If it matters, here's what this looks like when it runs:

Original source

Related problems