How do I create individual event handlers for buttons added dynamically to a WinForm in Powershell

I am trying to have a dynamically created WinForm where I pass in a dictionary of names (keys) and the url where the image is hosted (values).

The code, loops through the dictionary and adds a button for each 'key' and when the button is pressed, it sets the picturebox to be the image at the url for that button.

There can be a different number of buttons each time (maybe up to 10).

I don't know if my approach (below) is the right one but I get most of what I want. The problem is that the image is only ever 'Mason' no matter which button is pressed.

Add-Type -AssemblyName System.Windows.Forms


# Define a dictionary of names and image URLs
$image_url_lookup = @{
    'Eric' = 'https://cdn.images.express.co.uk/img/dynamic/67/285x190/1758705_1.jpg'
    'Mason' = 'https://cdn.images.express.co.uk/img/dynamic/67/285x190/1758732_1.jpg'
    'Other' = 'https://cdn.images.express.co.uk/img/dynamic/67/285x190/1758699_1.jpg'
}

# Create a new form
$form = New-Object System.Windows.Forms.Form
$form.Text = "Select Images"
$form.Width = 800
$form.Height = 600
$form.BackColor = [System.Drawing.Color]::White

# Create a new table layout panel
$tableLayoutPanel = New-Object System.Windows.Forms.TableLayoutPanel
$tableLayoutPanel.Dock = [System.Windows.Forms.DockStyle]::Fill

# Create a new picture box
$pictureBox = New-Object System.Windows.Forms.PictureBox
$pictureBox.Width = $form.Width - 100
$pictureBox.Height = $form.Height - 100
$pictureBox.Left = ($form.Width - $pictureBox.Width) / 2
$pictureBox.Top = ($form.Height - $pictureBox.Height) / 2
$pictureBox.BackColor = [System.Drawing.Color]::Transparent
$pictureBox.SizeMode = [System.Windows.Forms.PictureBoxSizeMode]::Zoom

$image_index = 0

foreach ($name in $image_url_lookup.Keys) {
    $image_index++
    $button = New-Object System.Windows.Forms.Button
    $button.Name = "Button$image_index"
    $button.Text = $name
    $button.AccessibleName = $image_url_lookup[$name]
    $button.Add_Click({ $pictureBox.ImageLocation = $button.AccessibleName })
    $button.Width = 75
    $button.Height = 23
    
    # Add the button to the table layout panel
    $tableLayoutPanel.Controls.Add($button, $i, 0)
}

# Add the picture box to the table layout panel
$tableLayoutPanel.Controls.Add($pictureBox, 0, 1)
$tableLayoutPanel.SetColumnSpan($pictureBox, $image_index + 5)

# Add the table layout panel to the form
$form.Controls.Add($tableLayoutPanel)

# Show the form
$form.ShowDialog() | Out-Null
$form.Dispose()

Solution

You need to add a .GetNewClosure() call in your loop so that each scriptblock remembers what $button.AccessibleName was while it was assigned, otherwise what happens is that you're always getting the value of the last $button created:

foreach ($name in $image_url_lookup.Keys) {
    $image_index++
    $button = [System.Windows.Forms.Button]@{
        Name           = "Button$image_index"
        Text           = $name
        AccessibleName = $image_url_lookup[$name]
        Width          = 75
        Height         = 23
    }
    $button.Add_Click({ $pictureBox.ImageLocation = $button.AccessibleName }.GetNewClosure())
    $tableLayoutPanel.Controls.Add($button, $i, 0)
}

A much better approach would be to use the $this automatic variable in your events, that way there is no need for a new closure; this was hinted at by Theo in his comment:

foreach ($name in $image_url_lookup.Keys) {
    $image_index++
    $button = [System.Windows.Forms.Button]@{
        Name           = "Button$image_index"
        Text           = $name
        AccessibleName = $image_url_lookup[$name]
        Width          = 75
        Height         = 23
    }
    $button.Add_Click({ $pictureBox.ImageLocation = $this.AccessibleName })
    $tableLayoutPanel.Controls.Add($button, $i, 0)
}