I don’t even know how to start this problem

Question

Here the client layout asked me to create:

Here is what I have in real software:

The problem is that I need to remove the image from the control below. I do not know how to approach this problem. Any directions at all?

Here is the code for the user control I made:

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Drawing;
using System.Data;
using System.Linq;
using System.Text;
using System.Windows.Forms;

namespace WebServiceScanner
{
    public partial class selectablePicture : UserControl
    {
        public selectablePicture(Image image)
        {
            InitializeComponent();
            ptbImage.BackgroundImage = image;
            ptbImage.BackgroundImageLayout = ImageLayout.Zoom;
        }

        public Image GetImage()
        {
            return ptbImage.BackgroundImage;
        }

        public bool IsSelected()
        {
            return chkSelected.Checked;
        }

        public void DisableCheckbox()
        {
            this.chkSelected.Enabled = false;
        }

        private void ptbImage_Click(object sender, EventArgs e)
        {
            SelectControl();
            ptbImage.Focus();
            ToggleCheckBox();            
        }

        private void selectablePicture_Click(object sender, EventArgs e)
        {
            SelectControl();
            this.Focus();
            ToggleCheckBox();            
        }

        private void ToggleCheckBox()
        {
            if (!chkSelected.Enabled == false)
            {
                if (chkSelected.Checked)
                {
                    chkSelected.Checked = false;
                }
                else
                {
                    chkSelected.Checked = true;
                }
            }            
        }

        private void chkSelected_Click(object sender, EventArgs e)
        {
            SelectControl();
            chkSelected.Focus();
        }

        private void SelectControl()
        {
            if (!chkSelected.Enabled == false)
            {
                this.BackColor = Color.FromArgb(89, 168, 248);
            }            
        }

        private void chkSelected_Leave(object sender, EventArgs e)
        {
            DeSelectControl();
        }

        private void ptbImage_Leave(object sender, EventArgs e)
        {
            DeSelectControl();
        }

        private void selectablePicture_Leave(object sender, EventArgs e)
        {
            DeSelectControl();
        }

        private void DeSelectControl()
        {
            //If none of the controls inside the usercontrol have focus, set this control to white.
            if (!chkSelected.Enabled == false)
            {
                if (!this.Focused && !this.ptbImage.Focused && !this.chkSelected.Focused)
                {
                    this.BackColor = Color.White;
                }
            }            
        }
    }
}

And here is how I use it:

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;

namespace WebServiceScanner
{
    public partial class MainForm : Form
    {
        int pictureXPosition = 0;
        List<selectablePicture> Images;

        public MainForm()
        {
            InitializeComponent();
            ptbNewestPicture.BackgroundImageLayout = ImageLayout.Zoom;
            Images = new List<selectablePicture>();
        }

        private void button1_Click(object sender, EventArgs e)
        {
            LoadImageFromScanner();
        }

        private void scanToolStripMenuItem_Click(object sender, EventArgs e)
        {
            LoadImageFromScanner();
        }

        private void scanBatchToolStripMenuItem_Click(object sender, EventArgs e)
        {
            LoadBatchImagesFromScanner();
        }

        private void btnScanBatch_Click(object sender, EventArgs e)
        {
            LoadBatchImagesFromScanner();
        }

        private void connectionSettingsToolStripMenuItem_Click(object sender, EventArgs e)
        {
            ShowConfigurationForm();
        }


        private void LoadImageFromScanner()
        {            
            selectablePicture picture = new selectablePicture(Image.FromFile(@"C:\Users\Public\Pictures\Sample Pictures\Penguins.jpg"));
            ptbNewestPicture.BackgroundImage = picture.GetImage();

            picture.Location = new Point(pictureXPosition + panel1.AutoScrollPosition.X, 0);
            panel1.Controls.Add(picture);            
            pictureXPosition += 130;
        }

        private void LoadBatchImagesFromScanner()
        {
            throw new NotImplementedException();
        }

        private void ShowConfigurationForm()
        {
            ConnectionSettingsForm connectionConfig = new ConnectionSettingsForm();
            connectionConfig.ShowDialog();
        }

        private void btnDeleteSelected_Click(object sender, EventArgs e)
        {
            DeleteSelectedPictures();
        }

        private void DeleteSelectedPictures()
        {
            foreach (Control c in panel1.Controls)
            {
                if (((selectablePicture)c).IsSelected())
                {
                    DisablePicture(c);
                    Images.Remove((selectablePicture)c);
                }
            }
        }

        private void DisablePicture(Control c)
        {
            c.BackColor = Color.Gray;
            ((selectablePicture)c).DisableCheckbox();
        }
    }
}

I was thinking about maintaining a list of my user control and redrawing the whole list every time something changes, but this is not good, because what happens if there are a lot of photos?

Any directions?

What steps do I need to follow if I want to drag and reorder images? Thank you

Answer 1

, , ( , ).

, . , . .

(1 vs 'N' ).

, , , .. .. .. , , .

N        = Total number of images
T_WIDTH  = Thumbnail width
MARGIN_W = Margin you want either side of the thumbnail
CELL_W   = T_WIDTH + (MARGIN_W * 2)   (Total width of a cell that contains a thumbnail)

// Pseudo code here!!!
Scrollbar.Width = CELL_W * N
Scrollbar.PageWidth = Control.ClientWidth / CELL_W

,

Scrollbar.Pos / CELL_W

x, , , CELL_W.

Answer 2

FlowControlPanel Panel. , .