Migrating from `ImageList` in WinForms to WPF

Question

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: enter image description here

Or if doing this in WPF is going to be far more complicated. Can someone just tell me give up and stay on WinForms? — AppFzx, Feb 21 '13 at 16:43

score 4 · Accepted Answer · answered Feb 21 '13 at 16:55

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.

Maybe I'm not making the MyModel and MyViewModel classes in the right place. I trie dthem in MainWindow.xaml.cs and I tried them in their own separate classes but I keep getting several errors in MainWindow.xaml, the first of which is "The type 'loc:MyViewModel' was not found. Verify..." Am I doing something obvious wrong? — AppFzx, Feb 21 '13 at 18:53
In the element you need to change the xmlns:loc value to be the same as your project name space so the value would be something like clr-namespace:AppFzx — ywm, Feb 22 '13 at 12:23

Migrating from `ImageList` in WinForms to WPF

1 Answers1