We Keep Coding

C# - Generic event handler to move pictureboxes created at runtime with mouse

I'm a somewhat beginner to C# using Visual Studio 2019 and currently creating a game and am struggling to find a way to create a generic mousedown/mousemove event handler to move pictureboxes created at runtime through a class constructor with the mouse
I've figured out how to move them how I want but right now it only works when I click the form and not the picturebox itself, which is far from ideal. Is there a way to create a generic event handler that is able to determine which pictureBox is clicked and moves only that one? And how would I go about doing that? If it helps I've added the pictureBoxes to Form1's Controls in order to display them. The code is the class constructor of how the pictureBox is created at runtime using the line:
"new Piece(new Position(100, 100), 200, 300, form);"
public Piece(Position pos, int xSize, int ySize, Form form)
{
this.pos = pos;
this.xSize = xSize;
this.ySize = ySize;
pic = new PictureBox();
pic.BackColor = Color.LightBlue;
pic.Size = new System.Drawing.Size(xSize, ySize);
UpdateImgPos();
pic.Visible = true;
form.Controls.Add(pic);
Pieces.Add(this);
childPlatforms = new List<Platform>();
}

If i understand it right, then you can use the event of the picturebox. The Parameter sender is the Control, which fire the event.
PictureBox pictureBox = new PictureBox();
// add image, set start location, etc...
pictureBox.Size = new System.Drawing.Size(100, 50);
pictureBox.MouseDown += PictureBox_MouseDown;
this.Controls.Add(pictureBox);
// ...
private void PictureBox_MouseDown(object sender, MouseEventArgs e)
{
// cast object sender to PictureBox pictureBox
if (!(sender is PictureBox pictureBox)) return;
pictureBox.Location = CursorPosition;
}

Dynamically display an array of PictureBoxes - Performance issue

I'd like to display coverarts for each album of an MP3 library, a bit like Itunes does (at a later stage, i'd like to click one any of these coverarts to display the list of songs).
I have a form with a panel panel1 and here is the loop i'm using :
int i = 0;
int perCol = 4;
int disBetWeen = 15;
int width = 250;
int height = 250;
foreach(var alb in mp2)
{
myPicBox.Add(new PictureBox());
myPicBox[i].SizeMode = System.Windows.Forms.PictureBoxSizeMode.StretchImage;
myPicBox[i].Location = new System.Drawing.Point(disBetWeen + (disBetWeen * (i % perCol) +(width * (i % perCol))),
disBetWeen + (disBetWeen * (i / perCol))+ (height * (i / perCol)));
myPicBox[i].Name = "pictureBox" + i;
myPicBox[i].Size = new System.Drawing.Size(width, height);
myPicBox[i].ImageLocation = #"C:/Users/Utilisateur/Music/label.jpg";
panel1.Controls.Add(myPicBox[i]);
i++;
}
I'm using the same picture per picturebox for convenience, but i'll use the coverart embedded in each mp3 file eventually.
It's working fine with an abstract of the library (around 50), but i have several thousands of albums. I tried and as expected, it takes a long time to load and i cannot really scroll afterward.
Is there any way to load only what's displayed ? and then how to assess what is displayed with the scrollbars.
Thanks

Winforms really isn't suited to this sort of thing... Using standard controls, you'd probably need to either provision all the image boxes up front and load images in as they become visible, or manage some overflow placeholder for the appropriate length so the scrollbars work.
Assuming Winforms is your only option, I'd suggest you look into creating a custom control with a scroll bar and manually driving the OnPaint event.
That would allow you to keep a cache of images in memory to draw the current view [and a few either side], while giving you total control over when they're loaded/unloaded [well, as "total" as you can get in a managed language - you may still need tune garbage collection]
To get into some details....
Create a new control
namespace SO61574511 {
// Let's inherit from Panel so we can take advantage of scrolling for free
public class ImageScroller : Panel {
// Some numbers to allow us to calculate layout
private const int BitmapWidth = 100;
private const int BitmapSpacing = 10;
// imageCache will keep the images in memory. Ideally we should unload images we're not using, but that's a problem for the reader
private Bitmap[] imageCache;
public ImageScroller() {
//How many images to put in the cache? If you don't know up-front, use a list instead of an array
imageCache = new Bitmap[100];
//Take advantage of Winforms scrolling
this.AutoScroll = true;
this.AutoScrollMinSize = new Size((BitmapWidth + BitmapSpacing) * imageCache.Length, this.Height);
}
protected override void OnPaint(PaintEventArgs e) {
// Let Winforms paint its bits (like the scroll bar)
base.OnPaint(e);
// Translate whatever _we_ paint by the position of the scrollbar
e.Graphics.TranslateTransform(this.AutoScrollPosition.X,
this.AutoScrollPosition.Y);
// Use this to decide which images are out of sight and can be unloaded
var current_scroll_position = this.HorizontalScroll.Value;
// Loop through the images you want to show (probably not all of them, just those close to the view area)
for (int i = 0; i < imageCache.Length; i++) {
e.Graphics.DrawImage(GetImage(i), new PointF(i * (BitmapSpacing + BitmapWidth), 0));
}
}
//You won't need a random, just for my demo colours below
private Random rnd = new Random();
private Bitmap GetImage(int id) {
// This method is responsible for getting an image.
// If it's already in the cache, use it, otherwise load it
if (imageCache[id] == null) {
//Do something here to load an image into the cache
imageCache[id] = new Bitmap(100, 100);
// For demo purposes, I'll flood fill a random colour
using (var gfx = Graphics.FromImage(imageCache[id])) {
gfx.Clear(Color.FromArgb(255, rnd.Next(0, 255), rnd.Next(0, 255), rnd.Next(0, 255)));
}
}
return imageCache[id];
}
}
}
And Load it into your form, docking to fill the screen....
public Form1() {
InitializeComponent();
this.Controls.Add(new ImageScroller {
Dock = DockStyle.Fill
});
}
You can see it in action here: https://www.youtube.com/watch?v=ftr3v6pLnqA (excuse the mouse trails, I captured area outside the window)

Small problems when dynamically resizing a picturebox (tooltip delay, 'blinking')

Help please elegantly solve a couple of problems in my small project. I'm developing a small program in c # (WinForms), which uses pictureboxes instead of buttons. I added a small feature like an 'animation' to them: when you mouse over them they decrease in size, when the mouse goes away they return to their original state. Actually, I have two problems here:
If the mouse is brought to the very edge, the picturebox will be decreased, but if the mouse is out of the current size of the picturebox, it's size will be returned back. And so on. Such a kind of 'blinking' turns out.
And more importantly, I have tooltips attached to these pictureboxes. And if you move the mouse over the picturebox, it will decrease in size and the tooltip will not be called. It will take to move the cursor a little without going beyond the picturebox so the tooltip will appear. And this behavior is counterintuitive.
Here's the code:
private void IconReduce(PictureBox picturebox)
{
originalLocation = picturebox.Location;
originalSize = picturebox.Size;
picturebox.Location = new Point(picturebox.Location.X + 2, picturebox.Location.Y + 2);
picturebox.Size = new Size(picturebox.Size.Width - 4, picturebox.Size.Height - 4);
}
private void IconNormal(PictureBox picturebox)
{
picturebox.Location = new Point(originalLocation.X, originalLocation.Y);
picturebox.Size = new Size(originalSize.Width, originalSize.Height);
}
private void pb_MouseEnter(object sender, EventArgs e)
{
IconReduce(sender as PictureBox);
}
private void pb_MouseLeave(object sender, EventArgs e)
{
IconNormal(sender as PictureBox);
}

When PictureBox location property is changed the old image is still shown

I have a pictureBox in another pictureBox. I try to create an imitation of flying plane on a map. I made a simple loop to do this task. The code:
for (var i = 0; i < 23; i++)
{
Fuel -= 1;
Changed(i);
}
private void Changed(int a)
{
Thread.Sleep(350);
pbPlane1.Location = new Point(525-(25*a), 235);
pbPlane1.Refresh();
}
So in this case the plane image is moving as I want but the old images are shown aswell, and I don't want it. I have tried a couple of things but with no results. What is wrong with my code?

Instead of refreshing the plane image, you need to refresh the map image.
The code should be as follows:
private void Changed(int a)
{
Thread.Sleep(350);
pbPlane1.Location = new Point(525-(25*a), 235);
pbMap1.Refresh(); // refresh the background picturebox
}

User Drawn Controls: the MSN chat window

I'm wondering about the famous MSN chat clients conversation windows! I'm sure there must be a lot of different aspects but I'd like to focus on those little sliding panes. For instance where the pictures of the people in the conversation are displayed. When you click the collapse button the pictures disappear and the panel gracefully slides in, and when you click it again to expand, it slides out and the pictures are smoothly faded in.
How would one go about customly drawing a control in WinForms that had similar behaviour?

This should give you an idea how animate your width.
int _collapsedWidth;
int _fullWidth;
float _speed;
float _acurateWidth;
System.Diagnostics.Stopwatch _stopwatch = new Stopwatch ();
int _animationDirection;
AnimatedControl (){
Application.Idle += ApplicationIdle;
}
void Expand (){
_animationDirection = 1;
_stopwatch.Start();
}
void ApplicationIdle (object sender, EventArgs e){
if (_animation.Direction == 0)
return;
float delta = _stopwatch.Elapsed.TotalMilliseconds * _speed;
_acurateWidth += delta;
if (_acurateWidth < _collapsedWidth)
{
_animationDirection = 0;
_acurateWidth = _collapsedWidth;
_stopwatch.Stop();
}
else if (_acurateWidth > _fullWidth)
{
_animationDirection = 0;
_acurateWidth = _fullWidth;
_stopwatch.Stop();
}
_stopwatch.Reset();
this.Width = (int)System.Math.Round(_acurateWidth , MidpointRounding.AwayFromZero);
this.Invalidate (); // May not need this
}
and for the pictures, somthing similar but using translucent images, you might want to make a new control with a transparent background color for them as well depending how you want to paint things.
You can then put this control into one of the LayoutPanel controls to move your other controls around in the form to match the width.