Despite double buffering, the ticker still flickers

Question

Does anyone have an idea about how to get rid of flickering? I researched on SO, the web, and tried out many different things like putting TickerControl into a double buffered Panel a la Double Buffering when not drawing in OnPaint(): why doesn't it work? etc. besides many other things. It still flickers, not on every repaint, but a couple times per second.

Also, even after removing the "g.Clear(BackColor)" in OnPaint, something must still be clearing the background, as the text continues to scroll readably.

Here the relevant parts of my TickerControl class:

class TickerControl : Control
{
    private static readonly StringFormat stringFormat = new StringFormat(StringFormatFlags.NoWrap);

    private const int padding = 40;
    private const int scrollSleep = 10;
    private const int scrollAdvancePixels = 1;

    private float textWidth;
    private float currentX;

    private static readonly Timer scrollTimer = new Timer();

    public TickerControl()
    {
        this.SetStyle(ControlStyles.UserPaint |
                      ControlStyles.AllPaintingInWmPaint |
                      ControlStyles.OptimizedDoubleBuffer
                      , true);
        scrollTimer.Tick += AdvanceText;
        scrollTimer.Interval = scrollSleep;
        scrollTimer.Enabled = true;
    }

    private void AdvanceText(object sender, EventArgs e)
    {
        if (IsDisposed)
            return;

        currentX -= scrollAdvancePixels;
        if (currentX <= -textWidth)
            currentX = 0;
        Invalidate();
    }

    protected override void OnPaintBackground(PaintEventArgs pevent)
    {
    }

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

        g.Clear(BackColor);

        using (SolidBrush brush = new SolidBrush(ForeColor))
        {
            g.DrawString(Text, Font, brush, currentX, 0, stringFormat);
            g.DrawString(Text, Font, brush, currentX + textWidth, 0, stringFormat);
        }
    }

Any ideas?

Update:

As sallushan suggested manual double buffering, let me add that I had tried that before, using the code below. But on screen it looks exactly like the above, so the problem does not seem to lie inside my OnPaint method. I guess it must be somewhere in the setup of my Control.

    private Bitmap backBuffer;

    protected override void OnPaint(PaintEventArgs e)
    {
        if (backBuffer == null)
            backBuffer = new Bitmap(this.ClientSize.Width, this.ClientSize.Height);

        Graphics g = Graphics.FromImage(backBuffer);

        g.Clear(BackColor);

        using (SolidBrush brush = new SolidBrush(ForeColor))
        {
            g.DrawString(Text, Font, brush, currentX, 0, stringFormat);
            g.DrawString(Text, Font, brush, currentX + textWidth, 0, stringFormat);
        }

        g.Dispose();

        e.Graphics.DrawImageUnscaled(backBuffer, 0, 0);
    }

    protected override void OnPaintBackground(PaintEventArgs pevent)
    {
        // Don't call base!
    }

    protected override void OnSizeChanged(EventArgs e)
    {
        if (backBuffer != null)
        {
            backBuffer.Dispose();
            backBuffer = null;
        }
        base.OnSizeChanged(e);
    }

Answer 1

Set this code in your form. It will remove the flicker

 protected override CreateParams CreateParams
        {
            get
            {
                CreateParams cp = base.CreateParams;
                cp.ExStyle |= 0x02000000;

                return cp;
            }
        }

Hope it helps

Answer 2

Create a constant bitmap as a frame. And make your changes on that bitmap then render that bitmap on the control. This should remove the flickering.

class MyControl : System.Windows.Forms.Control
{
    Bitmap bmp;
    Graphics g;
    int x = 100;

    public MyControl()
    {
        this.SetStyle(System.Windows.Forms.ControlStyles.AllPaintingInWmPaint | System.Windows.Forms.ControlStyles.UserPaint | System.Windows.Forms.ControlStyles.OptimizedDoubleBuffer , true);

        bmp = new Bitmap(100, 100);
        g = Graphics.FromImage(bmp);
    }        

    protected override void OnPaint(System.Windows.Forms.PaintEventArgs e)
    {
        this.g.FillRectangle(Brushes.White, new Rectangle(0, 0, 100, 100));
        this.g.DrawString("Hello", this.Font, Brushes.Black, (float)x, 10);

        e.Graphics.DrawImage(bmp, new Point(0, 0));

        x--;
    }
}

Answer 3

Try using the Invalidate(rectangle) or Invalidate(Region) methods to limit the amount of repainting to that which actually needs to be done. You are currently redrawing the complete control during every OnPaint Event.

Answer 4

Well, apart from the triple buffering idea - which frankly I never used in my custom controls, and I had quite complex ones -, I would say that invalidating the control every 10ms has something to do with it. That is 100 times a second. Movies with 25fps are comfortable for the human eye in terms of fluidity of motion, yet you repaint your control 4 times more than that.

Try a higher value: say 40.

Also, when you repaint the control, you can repaint just a region of it, that parts that changed: the union of the two regions that form the old text location and new text location. You dont need to repaint any surrounding area that is still in place (be it background or whatnot).

DrawString() is pretty slow compared to TextRenderer's DrawText - around 6 times, you might want to use that. You will loose some features (uses GDI, instead of GDI+) but maybe it suits your scenario.

Oh, I would also micro-optimize and pull out that SolidBrush brush you re-create in every OnPaint() outside as a class member, update it only when ForeColor changes.

Answer 5

As it looks like you're drawing 2 of the string next to each other:

g.DrawString(Text, Font, brush, currentX, 0, stringFormat);
g.DrawString(Text, Font, brush, currentX + textWidth, 0, stringFormat);

It should simply be a case of just Invalidate'ing only that part of the control which has changed. The simplest method would be to cache/calculate the height of the string and do this:

 Invalidate(new Rectangle((int)currentX, 0, (int)textWidth*2, (int)textHeight));

On my machine, this is noticably smoother than invalidating the whole control.

Answer 6

Turning Hans Passant's comment into an answer so that I can accept it:

This effect is not called flicker, it is called tearing. You see part of the old bitmap and part of the new bitmap. Which becomes very noticeable on moving objects, they appear jittery. Not fixable in Winforms, google "vertical blanking interval". – Hans Passant