How to smoothly transition a panel in WinForms?

Question

I am trying to bring out a menu from the left edge of a form. As I do it I want a panel at the top of the form to shrink. The panel has buttons on it with anchors set to 'Right'.

The panel resizes by moving it to the left and reducing the width by the same amount - so the buttons should stay in the same place on screen. The buttons do stay in the correct place but look awful doing it. Even though I set the panel's new dimensions with .Bounds = new Rectangle(...) it looks as if I set the Left property and then the Width with a time delay! I have messed with SuspendLayout with no impact. I feel sure there is a simple way around this. A trivial example I created:

private void StartTest_Click( object sender, EventArgs e )
{
    _AmountLeft = PanelToResize.Width / 2; // half of it
    _Step = _AmountLeft / 10;
    Ticker.Enabled = true;
}

private void Ticker_Tick( object sender, EventArgs e )
{
    int this_bit = Math.Min( _AmountLeft, _Step );
    // reduce
    PanelToResize.Bounds = new Rectangle( PanelToResize.Left + this_bit, PanelToResize.Top, PanelToResize.Width - this_bit, PanelToResize.Height );
    if (this_bit == _AmountLeft)
        Ticker.Enabled = false;
    _AmountLeft -= this_bit;
}

I have placed this code and the designer code here: https://gist.github.com/anonymous/acf0ec4d5c81dbc5a670

Answer 1

Try the below code in your form to reduce flickering.

protected override CreateParams CreateParams
{
    get
    {
        const int WS_EX_COMPOSITED = 0x02000000;
        var cp = base.CreateParams;
        cp.ExStyle |= WS_EX_COMPOSITED;
        return cp;
    }
}

Its double-buffer the entire window surface, including the child controls

See here for the values, including WS_EX_COMPOSITED