Click here to Skip to main content
12,505,104 members (60,799 online)
Click here to Skip to main content
Add your own
alternative version

Stats

100.7K views
5.1K downloads
57 bookmarked
Posted

Simple auto-hide panel

, 24 Jun 2008 CPOL
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 ;) ?

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.

License

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

Share

About the Author

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

You may also be interested in...

Pro
Pro

Comments and Discussions

 
GeneralMy vote of 4 Pin
Jonathan Nappee1-Feb-11 0:50
memberJonathan Nappee1-Feb-11 0:50 
GeneralMy vote of 1 Pin
Sir Jo9-Nov-10 5:41
memberSir Jo9-Nov-10 5:41 
GeneralMouseEnter is Selective Pin
alan9320-Jan-10 5:31
memberalan9320-Jan-10 5:31 
GeneralRe: MouseEnter is Selective Pin
zk_070919-Jan-11 16:47
memberzk_070919-Jan-11 16:47 
Generalgood article Pin
sth_Weird11-Oct-09 23:41
membersth_Weird11-Oct-09 23:41 
GeneralNice Article Pin
snorkie6-Jun-08 10:44
membersnorkie6-Jun-08 10:44 
AnswerRe: Nice Article Pin
zk_07096-Jun-08 10:51
memberzk_07096-Jun-08 10:51 
GeneralIsSplitterFixed should be True Pin
z00z02-Jun-08 21:30
memberz00z02-Jun-08 21:30 
AnswerRe: IsSplitterFixed should be True Pin
zk_07092-Jun-08 22:58
memberzk_07092-Jun-08 22:58 
Generalnice Pin
kevdelkevdel29-May-08 7:37
memberkevdelkevdel29-May-08 7:37 
AnswerRe: nice Pin
zk_070929-May-08 7:43
memberzk_070929-May-08 7:43 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    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 | Terms of Use | Mobile
Web01 | 2.8.160919.1 | Last Updated 24 Jun 2008
Article Copyright 2008 by zk_0709
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid