How to create a Slide Menu
By John D. Conway
This article shows how to save space by creating a Slide Menu.
How to create a Slide Menu
Ready - Set - Scroll.
Let's go over the Inventory
You'll need: 1 Form named: Form1 2 Frames named: Frame1 and Frame2 1 PictureBox named: Picture1 1 VScroll named: VScroll1 15 TextBox(s) named: Text1, Text2, Text3, Text4 and so on.
Open Visual Basic and choose: Standard EXE. We should have a form in front of us named Form1. Stretch the form to the right. Place a Frame on the form1 and resize the frame so it resembles the image below.
Place a PictureBox onto Frame1 so that it's inside of the Frame. If in doubt - Try to move the PictureBox out of the Frame. If it will not allow you to move outside the Frame then I say we're in business. If it does move out of the Frame - just right click on the PictureBox and Cut - left click the Frame and then paste the PictureBox onto the Frame. You should have something that looks like the image below.
Let's say we Scroll to the next step.
Go to your toolbox and just start clicking away until you have 15 textbox(s). Now would be a good time to stretch Frame1 and Picture1. Place the TextBox(s) to resemble the image below. When you have them placed - Hold down the shift key and left click each textbox. When you have all the TextBox(s) selected - right click and Cut - Now left click the PictureBox and Paste the TextBox(s) This will place the TextBox(s) in the PictureBox.
Steps 4 and 5
Now it's time to add the second Frame and a VScroll. Go to the ToolBox and Double Click on the Frame Control and Vscroll. You should now see one of each in the center of your form. Stretch the Frame (Frame2) to cover (Frame1, PictureBox1 and TextBox(s)) and move VScroll1 to the right of your form. Refer to the image below. Now - Right click on Frame2 and choose Send to Back.
This is the last step. Now it's just a matter of re-sizing, setting the properties to each control and placing - just a single line of - code before we're up and scrolling.
The first thing that we need to do is change the height of Frame1 and Frame2 so you only see one row of TextBox(s).(See image below) Frame1 should be slightly smaller that Frame2.
Change the BorderStyle Property for Frame1 and Picture1 to: 0 - None.
Adjust the height of Vscroll1 to the app. height of Frame2. Set the LargeChange and SmallChange Property for VSroll1 to: LargeChange:1 and SmallChange:100
Well! here we are. Copy or Paste the code below into the VScroll1_Change() event. Click Run and you should see something that resembles the image below.
What you see below is really just the TIP of the iceberg. Try to think of different ways of utilizing the steps you had just performed. A couple ideas that comes to mind- Making a - Verticle Column - ( versus - a Horizontal Row as in the previous example ) of controls that could be used like a menu. We could store a collection of Pictures etc... Add a Shape control to enhance the overall look. The imagination can create endless possibilities. Well! maybe not endless. The coffee that I had today is working overtime on my brain. Anyway - until next time.
With a little imagination and time we can design a user interface with a little pep. Here's an example below. A download is included at the end.
Private Sub VScroll1_Change() Picture1.Top = -VScroll1.Value End Sub