C#. Displaying and moving icons on a windows form.

Question

Hi, I need to display a set of Icons on a windows form and move them around at run-time. I have used the PictureBox control to display the icons but I would have to either not change the picturebox.SizeMode to Stretched, which results in very small icons, Or they would look blurred and horrible at run-time even though they are high quality icons.

I've googled intensively for the solution to no avail although many people had the same problem. Do you have a solution?

If not, how would YOU go about displaying icons on a windows form so that they can be moved around easily during run-time?

Thanks for sharing your time and knowledge.

EDIT Here are some screen-shots: Upper one is the PictureBox in design-time and lower run-time

Answer 1

Override OnPaint() and draw the icons with e.Graphics.DrawImageUnscaled() where you want them.

Answer 2

I do this with a set of 32x32 .png icons. I use a FlowLayoutPanel as the container and add PictureBox controls to it. In this snippet, uxIconPanel is a FlowLayoutPanel.

foreach (Image img in GetImageListForClassification(entityClass))
{
    PictureBox box = new PictureBox();
    box.Image = img;
    box.Size = box.PreferredSize;
    box.Anchor = AnchorStyles.Top | AnchorStyles.Left;
    uxIconPanel.Controls.Add(box);
}

Answer 3

Start with an array to hold your image classes which will need

- image
- left
- top
- height
- width

Override the OnPaint() and draw each image in the array at its location.

Handle the MouseDown event.

- track the mouse down location
- determine whether the location hits one of the images 
  and track which one was hit
- track the original location of the hit image

Handle the MouseMove event.

- if not mouse button pressed then return
- if not tracking a hit from mouse down then return
- determine the change in position of the mouse from 
  what it was in the mouse down event
- apply the change in position to the original image position
  to set the new position of the tracked image
- Invalidate() to cause a repaint in the new position

This pseudo-code will give basic object dragging.

Answer 4

I would use bitmaps instead of icons, as others have said. Here is how I would do it:

First off, create a class which holds the bitmap and a delegate which will point to a method which will get the position of the bitmap as a function of time.

delegate Point PositionFunction(int time);

class MovingBitmap
{
    private Bitmap bitmap;
    private PositionFunction positionFunction;

    public MovingBitmap(Bitmap bitmap, PositionFunction positionFunction)
    {
        if (bitmap == null)
        {
            throw new ArgumentNullException("bitmap");
        }
        else if (positionFunction == null)
        {
            throw new ArgumentNullException("bitmap");
        }

        this.bitmap = bitmap;
        this.positionFunction = positionFunction;
    }

    public Bitmap Bitmap
    {
        get { return this.bitmap; }
    }

    public PositionFunction PositionFunction
    {
        get { return this.positionFunction; }
    }
}

For the position function, you will need to decide how you want the bitmaps to move. (Note: time expressed in milliseconds.) It could be as simple as:

private Point SimpleTimeFunction(int time)
{
    return new Point(time / 5, time / 5);
}

private Point ParabolaFunction(int time)
{
    return new Point(time / 5, (time / 5) * (time / 5));
}

Or it could be a piecewise function composed of multiple equations, such as this:

if (time < 5000)
{
    return new Point(time / 5, 2 * (time / 5));
}
else
{
    return new Point(time / 5, time / 5) * time);
}

It all comes down to how you want it to move. Hopefully, you like mathematics. :)

Then, in the control which will be holding the bitmaps, add a List<MovingBitmap> field.

private List<MovingBitmap> bitmaps = new List<MovingBitmap>();

Then you need a bitmap the size of the parent control to use as a buffer, so the user experience will be flicker-less. You will draw all the moving bitmaps on the buffer, and then in turn draw that bitmap on the control in OnPaint.

private int startTime;  // set this to System.Environment.TickCount when you start

// Add this line to the constructor
this.UpdateBufferSize();

private void UpdateBufferSize()
{
    if (this.buffer != null)
    {
        this.buffer.Dispose();
    }

    this.buffer = new Bitmap(this.ClientSize.Width, this.ClientSize.Height);
}

private void RefreshBuffer()
{
    int timeElapsed = Environment.TickCount - this.startTime;

    using (Graphics g = Graphics.FromImage(this.buffer))
    {
        g.Clear(this.BackColor);

        foreach (MovingBitmap movingBitmap in this.bitmaps)
        {
            Rectangle destRectangle = new Rectangle(
                movingBitmap.PositionFunction(timeElapsed), 
                movingBitmap.Bitmap.Size);

            g.DrawImage(movingBitmap.Bitmap, destRectangle);
        }
    }
}

protected override void OnPaint(PaintEventArgs e)
{
    base.OnPaint(e);
    e.Graphics.DrawImage(this.buffer, Point.Empty);
}

To achieve the animation effect, you will need a timer. When the timer elapses, refresh the buffer and then the control.

private System.Timers.Timer timer;
private ParameterlessVoid refreshMethod;
private delegate void ParameterlessVoid();

// Add these four lines to the constructor
this.timer = new System.Timers.Timer(1000 / 20);  // 20 times per second
this.timer.AutoReset = true;
this.timer.Elapsed += this.HandleTimerElapsed;
this.refreshMethod = new ParameterlessVoid(this.Refresh);

private void HandleTimerElapsed(object sender, EventArgs e)
{
    this.RefreshBuffer();
    this.Invoke(this.refreshMethod);
}

private void Start()
{
    this.startTime = System.Environment.TickCount;
    this.timer.Start();
}

I think that's basically all you need to do. It's not fully tested and debugged, but it should point you in the right direction.