User Drawn Controls: the MSN chat window

Question

I'm wondering about the famous MSN chat clients conversation windows! I'm sure there must be a lot of different aspects but I'd like to focus on those little sliding panes. For instance where the pictures of the people in the conversation are displayed. When you click the collapse button the pictures disappear and the panel gracefully slides in, and when you click it again to expand, it slides out and the pictures are smoothly faded in.

How would one go about customly drawing a control in WinForms that had similar behaviour?

Answer 1

This should give you an idea how animate your width.

int _collapsedWidth;
int _fullWidth;
float _speed;
float _acurateWidth;

System.Diagnostics.Stopwatch _stopwatch = new Stopwatch ();

int _animationDirection;

AnimatedControl (){

    Application.Idle += ApplicationIdle;
}

void Expand (){
    _animationDirection = 1;
    _stopwatch.Start();
}

void ApplicationIdle (object sender, EventArgs e){
    if (_animation.Direction == 0)
        return;

    float delta = _stopwatch.Elapsed.TotalMilliseconds * _speed;

    _acurateWidth += delta;

    if (_acurateWidth < _collapsedWidth)
    {
        _animationDirection = 0;
        _acurateWidth = _collapsedWidth;
        _stopwatch.Stop();              
    }
    else if (_acurateWidth > _fullWidth)
    {
        _animationDirection = 0;
        _acurateWidth = _fullWidth;
        _stopwatch.Stop();      
    }

    _stopwatch.Reset();

    this.Width = (int)System.Math.Round(_acurateWidth , MidpointRounding.AwayFromZero);
    this.Invalidate (); // May not need this

}

and for the pictures, somthing similar but using translucent images, you might want to make a new control with a transparent background color for them as well depending how you want to paint things.

You can then put this control into one of the LayoutPanel controls to move your other controls around in the form to match the width.