Click here to Skip to main content
15,867,308 members
Articles / Programming Languages / C#

Don't Flicker! Double Buffer!

Rate me:
Please Sign up or sign in to vote.
4.83/5 (57 votes)
31 Jan 2006CPOL4 min read 422.9K   13.4K   210   50
Demonstrates several ways to overcome the annoying flickering problem
In this article, you will see how double buffering is a good and simple to use technique that helps overcome the flickering problem.

Introduction

Flickering is a common problem known to everyone who has programmed in the Windows Forms environment. We all know that even the Windows Task Manager flickers when we select a process from the process list.

If you have ever looked around the subject, you might have probably noticed that the most common solution to this is Double Buffering.

Explanation

Double Buffer is a technique where we draw all our graphic needs to an image stored in the memory (buffer) and after we are done with all our drawing needs, we draw a complete image from the memory onto the screen. This concentrates the drawing to the screen (an operation that badly effects the performance of the application) to a single operation rather than many small ones.

An easy example to understand this would be to use a ProgressBar that has several layers:

  1. background layer
  2. border layer
  3. progress layer
  4. percent layer

For each of these layers, we need to call some drawing operation, and after each drawing operation, the control redraws itself to the screen. Now, if the refresh rate is low, we won't have any problem but if we speed up the refresh rate, flickering (blinking) occurs.

We solve this by drawing all the layers to an image that is located in the memory and after drawing all the layers into this image we draw the image onto the screen. This improves the performance dramatically.

Techniques

Note: All of the techniques that are mentioned below are used in the example source code provided with this article except the first one which is from .NET Framework 1.1, and the source code is for .NET Framework 2.0.

Things You Should Know Before We Start

  • SetStyle(ControlStyles.AllPaintingInWmPaint, true);

    When a control is painted, there are two functions that are called, the OnPaint and the OnPaintBackground. When this flag set, it ignores the OnPaintBackground function and the OnPaint function takes care of drawing both the background and the foreground.

  • SetStyle(ControlStyles.UserPaint, true);

    When this flag is set to true, the control paints itself and is not painted by the system operation.

  • Tip (by Tim McCurdy): SetStyle(ControlStyles.ResizeRedraw, true);

    Setting this flag causes the control to repaint itself when resized.

  • ProgressBar drawing

    For all these examples, I call a function called DrawProgressBar. The parameter passed to it is a Graphics instance that is used for drawing:

    C#
    private void DrawProgressBar(Graphics ControlGraphics)
    {
        // draw background
        ControlGraphics.FillRectangle(Brushes.Black, ClientRectangle);
        // draw border
        ControlGraphics.DrawRectangle(Pens.White, ClientRectangle);
        // draw progress 
        ControlGraphics.FillRectangle(Brushes.SkyBlue, 0, 0, 
                this.Width * ProgressBarPercentValue, this.Height);
        // draw percent
        ControlGraphics.DrawString(ProgressBarPercentValue.ToString(), 
                           this.Font, Brushes.Red, 
                           new Point(this.Width / 2, this.Height / 2));
    }

Starting Off

  • .NET Framework 1.1 built-in double buffer

    C#
    public partial class DoubleBufferedControl : Control
    {
        public DoubleBufferedControl()
        {
            InitializeComponent();
    
            this.SetStyle(
                ControlStyles.UserPaint |
                ControlStyles.AllPaintingInWmPaint |
                ControlStyles.DoubleBuffer, true);
        }
    
        protected override void OnPaint(PaintEventArgs pe)
        {
            // we draw the progressbar normally 
            // with the flags sets to our settings
            DrawProgressBar(pe.Graphics);
        }
    }

    This technique comes with .NET Framework 1.1 and provides some double buffer support. From what I have tested, this technique is not very good and I prefer using the manual technique for .NET Framework 1.1 (which will be shown later).

  • .NET Framework 2.0 built-in double buffer

    C#
    public class DoubleBufferedControl : Control
    {
        public DoubleBufferedControl()
        {
            InitializeComponent();
    
            this.SetStyle(
                ControlStyles.UserPaint |
                ControlStyles.AllPaintingInWmPaint |
                ControlStyles.OptimizedDoubleBuffer, true);
        }
    
        protected override void OnPaint(PaintEventArgs pe)
        {
            // we draw the progressbar normally with 
            // the flags sets to our settings
            DrawProgressBar(pe.Graphics);
        }
    }

    Well, in .NET Framework 2.0, there is a big improvement in the ease and use of double buffering technique. The performance that we get by using this technique is very good and I recommend this for everyone who doesn't want to get into too much of coding.

    I should mention that when we set Control.DoubleBuffered to true, it will set the ControlStyles.AllPaintingInWmPaint and ControlStyles.OptimizedDoubleBuffer to true.

  • The manual solution for .NET Framework 1.1

    What we do here is create the double buffer ourselves and implement it by overriding the OnPaint event of a control or anything else that you might want to use it on:

    C#
    public partial class DoubleBufferedControl : Control
    {
        const Bitmap NO_BACK_BUFFER = null;
        const Graphics NO_BUFFER_GRAPHICS = null;
    
        Bitmap BackBuffer;
        Graphics BufferGraphics;
    
        public DoubleBufferedControl()
        {
            InitializeComponent();
            
            Application.ApplicationExit += 
                new EventHandler(MemoryCleanup);
    
            SetStyle(ControlStyles.AllPaintingInWmPaint, true);
    
            BackBuffer = new Bitmap(this.Width, this.Height);
            BufferGraphics = Graphics.FromImage(BackBuffer);
        }
    
        private void MemoryCleanup(object sender, EventArgs e)
        {
            // clean up the memory
            if (BackBuffer != NO_BACK_BUFFER)
                BackBuffer.Dispose();
    
            if (BufferGraphics != NO_BUFFER_GRAPHICS)
                BufferGraphics.Dispose();
        }
        protected override void OnPaint(PaintEventArgs pe)
        {
            // we draw the progressbar into the image in 
            // the memory
            DrawProgressBar(BufferGraphics);
    
            // now we draw the image into the screen
            pe.Graphics.DrawImageUnscaled(BackBuffer);
        }
    
        private void DoubleBufferedControl_Resize(object sender, 
                                                     EventArgs e)
        {
            if (BackBuffer != NO_BACK_BUFFER)
                BackBuffer.Dispose();
    
            BackBuffer = new Bitmap(this.Width, this.Height);
            BufferGraphics = Graphics.FromImage(BackBuffer);
    
            this.Refresh();
        }
    }
  • The manual solution for .NET Framework 2.0

    In .NET Framework 2.0, we can still use the manual way. Microsoft has provided us with some useful tools to make it even easier. The new tools are BufferedGraphicsContext and BufferedGraphics. BufferedGraphicsContext provides us an alternative buffer instead of the Bitmap that we used in .NET Framework 1.1 and BufferedGraphics handles all the graphics operations like drawing the buffered image to the screen using the Render() function, etc.:

    C#
    public class DoubleBufferedControl : Control
    {
        const BufferedGraphics NO_MANAGED_BACK_BUFFER = null;
    
        BufferedGraphicsContext GraphicManager;
        BufferedGraphics ManagedBackBuffer;
    
        public DoubleBufferedControl()
        {
            InitializeComponent();
            
            Application.ApplicationExit += 
                   new EventHandler(MemoryCleanup);
    
            SetStyle(ControlStyles.AllPaintingInWmPaint, true);
    
            GraphicManager = BufferedGraphicsManager.Current;
            GraphicManager.MaximumBuffer = 
                   new Size(this.Width + 1, this.Height + 1);
            ManagedBackBuffer = 
                GraphicManager.Allocate(this.CreateGraphics(), 
                                               ClientRectangle);
        }
    
        private void MemoryCleanup(object sender, EventArgs e)
        {
            // clean up the memory
            if (ManagedBackBuffer != NO_MANAGED_BACK_BUFFER)
                ManagedBackBuffer.Dispose();
        }
        protected override void OnPaint(PaintEventArgs pe)
        {
            // we draw the progressbar into the image in the memory
            DrawProgressBar(ManagedBackBuffer.Graphics);
    
            // now we draw the image into the screen
            ManagedBackBuffer.Render(pe.Graphics);
        }
    
        private void DoubleBufferedControl_Resize(object sender, 
                                                      EventArgs e)
        {
            if (ManagedBackBuffer != NO_MANAGED_BACK_BUFFER)
                BackBufferManagedBackBufferDispose();
    
            GraphicManager.MaximumBuffer = 
                  new Size(this.Width + 1, this.Height + 1);
    
            ManagedBackBuffer = 
                GraphicManager.Allocate(this.CreateGraphics(), 
                                                ClientRectangle);
    
            this.Refresh();
        }
    }

Conclusion

Double buffering is a good and simple to use technique that I think anyone who has ever dealt with some graphics programming should know. I am also glad to see that Microsoft has put up lot of time to improve the GUI performance of the .NET Framework and provided us with some better tools to deal with them instead of wasting our time on writing some improvised code.

History

  • 29th January, 2006: Initial version

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Team Leader
Israel Israel
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
QuestionFile Missing Pin
Member 142688849-Jun-21 14:13
Member 142688849-Jun-21 14:13 
Question: ) Pin
mrkorn@latkrabang18-Aug-19 4:43
mrkorn@latkrabang18-Aug-19 4:43 
QuestionCan't get it to compile on VS2015 Pin
Andrew Truckle4-Jun-16 7:29
professionalAndrew Truckle4-Jun-16 7:29 
Questionc++ is faster Pin
shiftwik1-Aug-15 22:12
shiftwik1-Aug-15 22:12 
AnswerRe: c++ is faster Pin
Jason.LYJ17-Mar-16 18:22
professionalJason.LYJ17-Mar-16 18:22 
GeneralMy vote of 5 Pin
Member 36667148-Aug-10 20:50
Member 36667148-Aug-10 20:50 
GeneralA one-line solution using reflection Pin
MichaelLegatt22-Apr-10 9:31
MichaelLegatt22-Apr-10 9:31 
Thanks very much! There's a way to take an existing control and set the style using reflection (where ctl is your control name):
ctl.GetType().GetMethod("SetStyle", BindingFlags.Instance | BindingFlags.NonPublic).Invoke(ctl, new object[] { ControlStyles.UserPaint | ControlStyles.AllPaintingInWmPaint |ControlStyles.DoubleBuffer, true});

GeneralRe: A one-line solution using reflection Pin
T_H.net28-Apr-10 10:25
T_H.net28-Apr-10 10:25 
GeneralManual solutions and flickering Pin
Holger Hoffmann28-Feb-10 3:52
Holger Hoffmann28-Feb-10 3:52 
GeneralYES Pin
bar49_9#18-Jan-10 6:39
bar49_9#18-Jan-10 6:39 
GeneralGetting parameter Not valid error Pin
prashant_14419-Nov-09 2:03
prashant_14419-Nov-09 2:03 
GeneralProblem in GDI+ drawing Pin
vinay_K3-Dec-08 21:42
vinay_K3-Dec-08 21:42 
GeneralRe: Problem in GDI+ drawing Pin
mvidailhet9-Aug-09 22:54
mvidailhet9-Aug-09 22:54 
QuestionHow do you double buffer the rendering of all form controls? Not just a single control? Pin
johnnynine27-Jul-08 18:00
johnnynine27-Jul-08 18:00 
QuestionRe: How do you double buffer the rendering of all form controls? Not just a single control? Pin
selin10052-Sep-08 21:45
selin10052-Sep-08 21:45 
AnswerRe: How do you double buffer the rendering of all form controls? Not just a single control? Pin
selin10053-Sep-08 22:26
selin10053-Sep-08 22:26 
AnswerRe: How do you double buffer the rendering of all form controls? Not just a single control? Pin
Gil.Schmidt26-Oct-08 6:23
Gil.Schmidt26-Oct-08 6:23 
Questionuse double buffer for picturebox ??? Pin
ducmanh8615-Nov-07 7:23
ducmanh8615-Nov-07 7:23 
AnswerRe: use double buffer for picturebox ??? Pin
Gil.Schmidt17-Nov-07 23:10
Gil.Schmidt17-Nov-07 23:10 
GeneralThank U Pin
dr-Wicked20-Feb-07 2:10
dr-Wicked20-Feb-07 2:10 
GeneralGarbage Collection & Dispose Pin
Tomer Noy3-Feb-07 21:31
Tomer Noy3-Feb-07 21:31 
QuestionHow can make buffer use Metafile! Pin
quby26-Nov-06 4:39
quby26-Nov-06 4:39 
AnswerRe: How can make buffer use Metafile! Pin
Gil.Schmidt26-Nov-06 6:02
Gil.Schmidt26-Nov-06 6:02 
GeneralFlicker still seems to exist Pin
levyuk12331-Oct-06 5:10
levyuk12331-Oct-06 5:10 
GeneralRe: Flicker still seems to exist Pin
Gil.Schmidt31-Oct-06 5:31
Gil.Schmidt31-Oct-06 5:31 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.