Simple auto-hide panel

• Download demo - 3.83 KB
• Download source - 10.3 KB

Introduction

On smaller computer monitors, toolboxes can take up important screen space. While you can hide them, this makes it difficult to access them when you need them again. This can be solved by an auto-hide feature. Like the Windows Taskbar, the panel can be set to Auto-Hide mode, where it will only appear once the user moves the mouse cursor towards the side where it resides. When the panel (toolbox) is not needed (when the mouse pointer is away from it), it will be hidden. To make the panel appear, you will simply move the mouse to the panel until it displays. You can then use the panel (toolbox) as usual. Once you move the mouse off the panel, it will again be hidden. To disable the auto-hide feature, just uncheck the "Auto hide" check box.

Now, I will show you the easiest way to make a simple auto-hide feature for your application in a simple step by step tutorial.

Step 1 - Setting the environment

First, create a new C# Windows Application project, and then follow these steps:

1. Add a split container on the form.
2. Add a check box to the right panel.
3. Select splitContainer1.Panel2.
4. Select events.
5. Add a MouseEnter event handler by double clicking on MouseEnter.
6. Select splitContainer1.Panel1.
7. Repeat steps 4 and 5.

Step 2 - The code

Copy and paste the following code (static version):

private void splitContainer1_Panel2_MouseEnter(object sender, EventArgs e)
{
    if (checkBox1.Checked) //true if checked
    {
        splitContainer1.SplitterDistance = 50; 
    }
}
private void splitContainer1_Panel1_MouseEnter(object sender, EventArgs e)
{
    if (checkBox1.Checked)
    {
        splitContainer1.SplitterDistance = 350; //set the distance 
    }
}

Or, this code, if you want to get form dimensions from the form size properties and then set the splitter, for example, to 100px from the right edge:

private void splitContainer1_Panel2_MouseEnter(object sender, EventArgs e)
{
    if (checkBox1.Checked) //true if checked
    {
        splitContainer1.SplitterDistance = this.Width - 100; 
        //100 px from right edge
    }
}
private void splitContainer1_Panel1_MouseEnter(object sender, EventArgs e)
{
    if (checkBox1.Checked)
    {
        splitContainer1.SplitterDistance = this.Width - 10; 
        //hide panel2
    }
}

Explanation: when the mouse enters the panel, the MouseEnter event is generated; we then catch this event, check the check box state, and if it is checked, set the split container's splitter to the desired distance (in my static example, 350px (from the left edge) to hide and 50px to show).

If you don't know what events are, read this excellent tutorial here.

This is it. Simple, isn't it ;) ?

Of course, you can add any controls you like on the panels (even other panels, and then make them auto-hide).

In the end ...

This is my first article :D. Please leave a comment on how I can improve this article. Thanks for reading. For the Serbian language version of this article, go to my blog.

History

• 28.05.2008 - First version.
• 24.06.2008 - Added the dynamic version of the code.