Question

I’m writing a user control for animation.
Its uses an internal ImageList to store the animation images and paint one after the other in a loop.
This is the whole code:

public partial class Animator : UserControl
{
    public event EventHandler OnLoopElapsed = delegate { };
    private ImageList imageList = new ImageList();
    private Timer timer;
    private bool looping = true;
    private int index;
    private Image newImage;
    private Image oldImage;

    public Animator()
    {
        InitializeComponent();

        base.DoubleBuffered = true;

        timer = new Timer();
        timer.Tick += timer_Tick;
        timer.Interval = 50;
    }

    public bool Animate
    {
        get { return timer.Enabled; }
        set
        {
            index = 0;
            timer.Enabled = value;
        }
    }

    public int CurrentIndex
    {
        get { return index; }
        set { index = value; }
    }

    public ImageList ImageList
    {
        set
        {
            imageList = value;
            Invalidate();
            index = 0;
        }

        get { return imageList; }
    }

    public bool Looping
    {
        get { return looping; }
        set { looping = value; }
    }

    public int Interval
    {
        get { return timer.Interval; }
        set { timer.Interval = value; }
    }

    private void timer_Tick(object sender, EventArgs e)
    {
        if (imageList.Images.Count == 0)
            return;

        Invalidate(true);
        index++;

        if (index >= imageList.Images.Count)
        {
            if (looping)
                index = 0;
            else
                timer.Stop();

            OnLoopElapsed(this, EventArgs.Empty);
        }
    }

    protected override void OnPaintBackground(PaintEventArgs e)
    {
        if (oldImage != null)
            e.Graphics.DrawImage(oldImage, ClientRectangle);
        else
            e.Graphics.Clear(BackColor);
    }

    protected override void OnPaint(PaintEventArgs e)
    {
        Graphics g = e.Graphics;

        if (imageList.Images.Count > 0)
        {
            newImage = imageList.Images[index];
            g.DrawImage(newImage, ClientRectangle);
            oldImage = newImage;
        }
        else
        {
            e.Graphics.Clear(BackColor);
        }
    }
}

The animation seems very nice and smooth,
but the problem is that its surrounding rectangle is painted black.
What am I missing here?

I’ve seen very smooth transparent animation done here in WPF,
I’ve placed some label behind it and they are seen thru the rotating wheel as I hoped.
But I don’t know WPF well enough to build such a control in WPF.

Any idea or WPF sample code will be appreciated.

Answer 1

This was solved by removing this line from the constructor:

base.DoubleBuffered = true;

Now the control is fully transparent, even while changing its images.