OnPaint in winform - .NET Compact Framework 3.5

Question

I am currently working on a curved progress bar in a smart device project. I override the OnPaint function.

In Override OnPaint() function, I draw the curved progress bar in dark gray and draw a part of the progress bar in yellow to reflect the changing value(such as 30%) of the progress bar. However, When the value is changing continuously, I can see that part of the progress bar's colour changes to yellow. However, the curved progress bar itself is also redrawn. Does anyone know a way of how to avoid redrawing the orginal curved progress bar while the value is changing? So that when the value is changing, it only redraw a part of the progress bar with yellow colour, not the orginal progress bar with gray. Here is the code I use in OnPaint function.

protected override void OnPaint(PaintEventArgs e)
        {
            gx = e.Graphics;
// Draw the original curved progress bar
            int intPosition1 = m_NumberOfSpoke;

            for (int intCounter1 = 0; intCounter1 < m_NumberOfSpoke; intCounter1++)
            {
                intPosition1 = intPosition1 % m_NumberOfSpoke;
                DrawLine(e.Graphics,
                         GetCoordinate(m_CenterPoint, m_InnerCircleRadius, m_Angles[intPosition1]),
                         GetCoordinate(m_CenterPoint, m_OuterCircleRadius, m_Angles[intPosition1]),
                         Color.DarkGray, m_SpokeThickness);
                intPosition1++;
            }

     // Draw a part of the progress bar to reflect the changing current value(such as 30%)
   int intPosition = CurrentValue;

                for (int intCounter1 = 0; intCounter1 < CurrentValue; intCounter1++)
                {
                    intPosition = intPosition % CurrentValue;
                    DrawLine(gx,
                             GetCoordinate(m_CenterPoint, m_InnerCircleRadius, m_Angles[intPosition]),
                             GetCoordinate(m_CenterPoint, m_OuterCircleRadius, m_Angles[intPosition]),
                             Color.Yellow, m_SpokeThickness);
                    intPosition++;
                }

        base.OnPaint(e);



        }

I have tried to use Override OnBackgroundPaint to draw the orginal curved progress bar as a background to avoid redraw it again in OnPaint, but it doesn't work. I cannot see any things when the form is loaded. Any ideas?

Thanks for any help in advance.

Regards

Answer 1

That's a load of DrawLine calls to the actual screen, and it's very likely going to cause flickering. You should double buffer by creating a back buffer, do all you drawing to it, then blit that to the screen with a single call to DrawBitmap along these lines:

protected override void OnPaint(PaintEventArgs e)
{
    using(var buffer = new Bitmap(this.Width, this.Height))
    using(var gx = Graphics.FromImage(buffer))
    {
        // for loops to draw to gx
        ....

        e.Graphics.DrawBitmap(buffer, ...);
    }

}

I'd also be highly inclined to not do exactly what's above, but cache that buffer to prevent the garbage generation of a Bitmap on every call.

Bitmap m_buffer;
Gramphic m_gx;

protected override void OnPaint(PaintEventArgs e)
{
    if(m_buffer == null)
    {
        m_buffer = new Bitmap(this.Width, this.Height))
        m_gx = Graphics.FromImage(buffer))
    }

    // clear the backbuffer with a FillRect

    // for loops to draw to m_gx
    ....

    e.Graphics.DrawBitmap(m_buffer, ...);
}

I'd probably even take this a step further, if the grey part of the control is always the same and do a "triple buffer", keeping a cached version of the image with the grey drawn, then in OnPaint, blit that to the graphics, draw the yellow, then blit to the screen.

Bitmap m_buffer;
Bitmap m_backimage;
Gramphic m_gx;

protected override void OnPaint(PaintEventArgs e)
{
    if(m_buffer == null)
    {
        m_backimage = new Bitmap(this.Width, this.Height);
        var g = Graphics.FromImage(m_backImage);
        // for loop to draw the grey stuff to g
        ....

        m_buffer = new Bitmap(this.Width, this.Height))
        m_gx = Graphics.FromImage(buffer))
    }

    m_gx.DrawImage(m_backImage);

    // for loop to draw *just the yellow* to m_gx
    ....

    e.Graphics.DrawBitmap(m_buffer, ...);
}

You're going to probably have to override OnResize and some other stuff too, plus extend Dispose to clean up these member-level GDI objects, but perf will be way better and it's not going to flicker.