Fade between Tab Pages in a Tab Control

Question

I have a Tab Control with multiple Tab Pages. I want to be able to fade the tabs back and forth. I don\'t see an opacity option on the Tab Controls. Is there a way to cause a fa

Answer 1

There is no magic Fade switch in the standard windows control.

You could dump the content of the tab to a bitmap (using DrawToBitmap or CopyFromScreen?), show that bitmap in front of the TabControl, switch tabs, and then fade the bitmap.

Answer 2

I don't see a specification of Winform/Webform, so I'll assume WebForm...

You can use an AJAX AnimationExtender.

Failing that, a bad way (which would work) would be to accept a QueryString that causes the page to auto-navigate to the tab you want, and use page Transitions.

For Winforms, you could use WPF :)

Answer 3

I don't believe that the WPF TabControl can be brought to fade from one TabItem to the next, since it is not equipped to display multiple TabItems simultaneously.

You could try to emulate this by stitching together two ListViews (one for the tab strip and one for the panel) and add the effect into the ControlTemplate of the latter. Use the ControlTemplates of the TabControl and the ListView as starting point.

Answer 4

I decided to post what I did to get my solution working. GvS had the closest answer and sent me on my quest in the right direction so I gave him (might be a her, but come on) the correct answer check mark since I can't give it to myself. I never did figure out how to "crossfade" from one tab to another (bring opacity down on one and bring opacity up on the other) but I found a wait to paint a grey box over a bitmap with more and more grey giving it the effect of fading into my background which is also grey. Then I start the second tab as a bitmap of grey that I slowly add less grey combined with the tab image each iteration giving it a fade up effect.

This solution leads to a nice fade effect (even if I do say so myself) but it is very linear. I am going to play a little with a Random Number Generator for the alphablend variable and see if that might make it a little less linear, but then again the users might appreciate the predictability. Btw, I fire the switch tab event with a button_click.

using System.Drawing.Imaging;
using System.Drawing.Drawing2D;

public int alphablend;
public Bitmap myBitmap;

    private void button1_Click(object sender, EventArgs e)
    {
        alphablend = 0;
        pictureBox1.Visible = true;
        myBitmap = new Bitmap(tabControl1.Width, tabControl1.Height);
        while (alphablend <= 246)
        {
            tabControl1.DrawToBitmap(myBitmap, new Rectangle(0, 0, tabControl1.Width, tabControl1.Height));
            alphablend = alphablend + 10;
            pictureBox1.Refresh();//this calls the paint action
        }
        tabControl1.SelectTab("tabPage2");
        while (alphablend >= 0)
        {
            tabControl1.DrawToBitmap(myBitmap, new Rectangle(0, 0, tabControl1.Width, tabControl1.Height));
            alphablend = alphablend - 10;               
            pictureBox1.Refresh();//this calls the paint action
        }
        pictureBox1.Visible = false;
    }

    private void pictureBox1_Paint(object sender, PaintEventArgs e)
    {
        Graphics bitmapGraphics = Graphics.FromImage(myBitmap);

        SolidBrush greyBrush = new SolidBrush(Color.FromArgb(alphablend, 240, 240, 240));

        bitmapGraphics.CompositingMode = CompositingMode.SourceOver;

        bitmapGraphics.FillRectangle(greyBrush, new Rectangle(0, 0, tabControl1.Width, tabControl1.Height));

        e.Graphics.CompositingQuality = CompositingQuality.GammaCorrected;

        e.Graphics.DrawImage(myBitmap, 0, 0);

    }

Answer 5

Depending on how your tabs/page work, you may be able to handle it at the page level by adding meta tags to the page:

<meta http-equiv="Page-Enter" content="blendTrans(Duration=0)">
<meta http-equiv="Page-Exit" content="blendTrans(Duration=0)">

Just change the duration to make the fade longer or shorter. This is commonly referred to as FAJAX.