Question

I have a gif animation. As I’m working in CompactFramework I followed this MSDN example.

The basic idea is to add the frames to an image and redraw a rectangle with the next frame, creating the animation. It works just fine except that the animation is displaying in a square, not in the full size of my image(which is 240,320).

This is my code:

in a class AnimateCtl.cs:

public class AnimateCtl : System.Windows.Forms.Control
{
    Timer fTimer;
    int frameWidth = 240;
    int frameHeight = 320;
    int loopCount = 0;
    int loopCounter = 0;
    int frameCount;
    int currentFrame = 0;
    Graphics graphics;

    private Bitmap bitmap;
    public Bitmap Bitmap
    {
        get
        {
            return bitmap;
        }
        set
        {
            bitmap = value;
        }
    }

    private void Draw(int iframe)
    {
        //Calculate the left location of the drawing frame
        int XLocation = iframe * frameWidth;

        Rectangle rect = new Rectangle(XLocation, 0, frameWidth, frameHeight);

        //Draw image
        graphics.DrawImage(bitmap, 0, 0, rect, GraphicsUnit.Pixel);
    }

    public AnimateCtl()
    {
        //Cache the Graphics object
        graphics = this.CreateGraphics();
        //Instantiate the Timer
        fTimer = new System.Windows.Forms.Timer();
        //Hook up to the Timer's Tick event
        fTimer.Tick += new System.EventHandler(this.timer1_Tick);
    }

    /// <summary>
    /// Start animation
    /// </summary>
    /// <param name="frWidth"></param>
    /// <param name="DelayInterval"></param>
    /// <param name="LoopCount"></param>
    public void StartAnimation(int frWidth, int DelayInterval, int LoopCount)
    {

        frameWidth = frWidth;
        //How many times to loop
        loopCount = LoopCount;
        //Reset loop counter
        loopCounter = 0;
        //Calculate the frameCount
        frameCount = bitmap.Width / frameWidth;
        frameHeight = bitmap.Height;
        //Resize the control
        //this.Size(frameWidth, frameHeight);
        //Assign delay interval to the timer
        fTimer.Interval = DelayInterval;
        //Start the timer
        fTimer.Enabled = true;
    }

    private void timer1_Tick(object sender, System.EventArgs e)
    {
        if (loopCount == -1) //loop continuously
        {
            this.DrawFrame();
        }
        else
        {
            if (loopCount == loopCounter) //stop the animation
                fTimer.Enabled = false;
            else
                this.DrawFrame();
        }
    }

    private void DrawFrame()
    {
        if (currentFrame < frameCount - 1)
        {
            //move to the next frame
            currentFrame++;
        }
        else
        {
            //increment the loopCounter
            loopCounter++;
            currentFrame = 0;
        }
        Draw(currentFrame);
    }

and in my Form1:

public partial class Form1 : Form
{
    AnimateCtl animCtl;

    public Form1()
    {
        InitializeComponent();

        //Instantiate control
        animCtl = new AnimateCtl();
        //Assign the Bitmap from the image file
        animCtl.Bitmap = new Bitmap(@"\Program Files\Animacion\Animacion-Frames.jpg");
        //Set the location
        animCtl.Location = new Point(0, 0);
        //Add to control to the Form
        this.Controls.Add(animCtl);

        animCtl.StartAnimation(240, 100, 3);
    }        
}

Why it isn’t drawing the rectangle in the correct dimension?
Thanks for any help!

Answer 1

remove the Draw methode and update the DrawFrame like this

    private void DrawFrame() {
        if (currentFrame < frameCount - 1) {
            currentFrame++;
        } else {
            loopCounter++;
            currentFrame = 0;
        }
        this.Invalidate();
    }

    protected override void OnPaint(PaintEventArgs e) {
        base.OnPaint(e);

        int XLocation = currentFrame * frameWidth;
        Rectangle rect = new Rectangle(XLocation, 0, frameWidth, frameHeight);
        e.Graphics.DrawImage(bitmap, 0, 0, rect, GraphicsUnit.Pixel);
    }

don’t ever use this.CreateGraphics(). overwriting the OnPaint methode is the right way. OnPaint will always fired after you call this.Invalidate();.

With this.CreateGraphics() you only got the current graphics size, but after the form has shown the control size probably changed.