4

Is there anyways that I can fade a panel?

I want to fade the whole panel in the menu whenever I click a button.

[1]: https://i.stack.imgur.com/OnpQo.png

any help?

TaW
  • 53,122
  • 8
  • 69
  • 111
Jiromes Baril
  • 53
  • 1
  • 7
  • 2
    asp.net? winforms? wpf? Your information is too minimal. – Peter Bons Dec 04 '16 at 07:25
  • I'm using windows form. click the link so that you can check the screenshot – Jiromes Baril Dec 04 '16 at 07:30
  • 1
    Ok, not much options than. In WPF this is much easier. Or try some 3rd party solution. You might check http://stackoverflow.com/questions/9551464/smoothly-fading-controls or http://stackoverflow.com/questions/2917918/sliding-fading-controls-on-a-c-sharp-form. By the way, that screenshot could be made in wpf, asp.net and winforms so it didn't make it clear it was winforms :-) – Peter Bons Dec 04 '16 at 08:24
  • Seee [here](http://stackoverflow.com/questions/28563782/how-to-fade-in-and-fade-out-fading-transition-image-on-panelbackgroud-image/28565675?s=1|2.4846#28565675) for a discussion of fading images. If your panel contains controls you would have to create a screenshot (DrawToBitmap) of it first.. - Probably not worth the hassle. – TaW Dec 04 '16 at 10:09
  • Do you want to fade out the panel to transparent so that the parent shows or do you want to fade out only the content? – TaW Dec 05 '16 at 10:56
  • Have you resolved your problems? – TaW Jan 08 '17 at 13:43

1 Answers1

4

Here is an example that takes a screenshot of the Panel's content and then fades it to either the Panel's or its Parent's BackColor..:

enter image description here

class FadePanel : Panel
{
    DrawPanel Layer = new DrawPanel();
    Bitmap image = null;
    float alpha = 0;
    float delta = 1;
    Timer timer = new Timer() { Interval = 25 };

    public bool FadeToParent { get; set; }
    public Color FadeColor { get; set; }
    public bool StaticContent { get; set; }
    public bool Hidden { get; private set; }

    public FadePanel()
    {  
        DoubleBuffered = true;
        Layer.Size = Size.Empty;
        Layer.Parent = this;
        Layer.BackColor = Color.Transparent;
        Layer.Paint += Layer_Paint;
        BackColor = Color.DodgerBlue;
        FadeToParent = false;
        Color FadeColor  = BackColor;
        Hidden = false;
        StaticContent = true;
        Layer.BackgroundImageLayout = ImageLayout.None;
        timer.Tick += timer_Tick;
    }


    void Layer_Paint(object sender, PaintEventArgs e)
    {
        if (alpha >= 0 && alpha <= 255)
        {
            using (SolidBrush brush = 
               new SolidBrush(Color.FromArgb((int)alpha, FadeColor)))
                e.Graphics.FillRectangle(brush, Layer.ClientRectangle);
        }
    }

    public void CaptureLayer()
    {
        if (image == null) image = new Bitmap(ClientSize.Width, ClientSize.Height);
        DrawToBitmap(image, ClientRectangle);
        Layer.BackgroundImage = image;
    }

    public void FadeOut(int ms)
    {
        alpha = 0;
        delta = 256f / ms * timer.Interval;
        Fade(delta);
    }

    public void FadeIn(int ms)
    {
        alpha = 255;
        delta = -256f / ms * timer.Interval;
        Fade(delta);
    }

    void Fade(float delta)
    {
        if (image == null || !StaticContent) CaptureLayer();
        BringToFront();
        FadeColor = FadeToParent ? Parent.BackColor : FadeColor;
        Layer.BringToFront();
        Layer.Size = ClientSize;
        timer.Start();
    }

    void timer_Tick(object sender, EventArgs e)
    {
        alpha += delta;
        if (alpha >= 255 || alpha <= 0)
        {
            alpha = delta > 0 ? 255 : 0;
            timer.Stop();
            if (delta < 0) BringToFront(); else SendToBack();
            Hidden = delta > 0;
            Layer.Size = delta > 0 ? ClientSize : Size.Empty;
        }
        Layer.Invalidate();
    }

}

A DoubleBuffered helper Panel subclass:

class DrawPanel : Panel
{
    public DrawPanel()
    {
        DoubleBuffered = true;
    }
}

Update: Instead of a Panel, which is a Container control and not really meant to draw onto we should use a Picturebox or a Label (with Autosize=false); both have the DoubleBuffered property turned on out of the box and support drawing better than Panels do.

TaW
  • 53,122
  • 8
  • 69
  • 111