Click here to Skip to main content
Click here to Skip to main content

Simple auto-hide panel

, 24 Jun 2008
Rate this:
Please Sign up or sign in to vote.
Easiest way to make a simple auto-hide panel.

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.

AH4.JPG

Picture 1: Auto-hide in action (note the cursor position and the 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:

AH1.1.JPG

Picture 2: Environment setup
  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 Wink | ;) ?

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 Big Grin | :-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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

zk_0709
Software Developer Elfak
Serbia Serbia
Software engineering student from Serbia .

Comments and Discussions

 
GeneralMy vote of 4 PinmemberJonathan Nappee1-Feb-11 0:50 
GeneralMy vote of 1 PinmemberSir Jo9-Nov-10 5:41 
GeneralMouseEnter is Selective Pinmemberalan9320-Jan-10 5:31 
GeneralRe: MouseEnter is Selective Pinmemberzk_070919-Jan-11 16:47 
Generalgood article Pinmembersth_Weird11-Oct-09 23:41 
GeneralNice Article Pinmembersnorkie6-Jun-08 10:44 
AnswerRe: Nice Article Pinmemberzk_07096-Jun-08 10:51 
GeneralIsSplitterFixed should be True Pinmemberz00z02-Jun-08 21:30 
AnswerRe: IsSplitterFixed should be True Pinmemberzk_07092-Jun-08 22:58 
Generalnice Pinmemberkevdelkevdel29-May-08 7:37 
AnswerRe: nice Pinmemberzk_070929-May-08 7:43 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.140709.1 | Last Updated 24 Jun 2008
Article Copyright 2008 by zk_0709
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid