Ever wanted to create a professional looking menu in your Windows Forms applications complete with big buttons, nice mouse over effects, and images? Well, look no further. In this post, I’ll show you how to implement a graphical ToolStrip menu to navigate through a Single Document Interface (SDI). You’ll notice that the finished interface is rather similar to Spybot – Search and Destroy. Keep in mind that the following example is rather simple and leaves a lot of room for expansion.
- Microsoft Visual Studio 2008 (or 2005, but I wrote this using 2008)
- .NET Framework 3.5 (or 2.0, but I wrote this using 3.5)
- Beginner’s Knowledge Windows Forms
Step 1 – Create the Form Shell to Host the Menu
- Create a new Windows Forms Application Project.
- Select Form1 and adjust it’s size in the Properties Window to 964,600 (the exact size isn’t important, but you want to leave room for other controls once the menu is operational).
Step 2 – Add the Menus
- From the Toolbox:
- Drag in a MenuStrip and snap it to the top of Form1 by either dragging it until the blue line snaps to the top of the form, or drop it in Form1 and set the MenuStrip object’s Dock property to Top.
- Drag in a TableLayoutPanel to the center of the form.
- From the submenu that pops up when you drop in the TableLayoutPanel, click “Remove Last Row.”
- Set this new Container’s Dock property to Fill.
- From the Toolbox, drag in a ToolStrip and drop it into the left column of the new TableLayoutPanel.
- Click the “…” button in the Property Window for this new control’s Columns property.
- Set Column1 width to absolute 115px and Column2 width to relative 100%.
- Drag a ToolStrip into the left column (Column1).
- Set its Dock property to Fill.
- Set its LayoutStyle property to VerticalStackWithOverflow. This will cause contents to stack top to bottom.
- Set its GripStyle property to Hidden. This is only a matter of preference.
- Set its Padding property to 5,5,5,5. This will give space on all sides for its contents.
- Set its ImageScalingSize property to 35, 35. This will force images on Buttons to scale to 35px by 35px.
Step 3 – Add Content to the Menus
- Using the “Add New Item” drop down in the ToolStrip:
- Add a Label (menu section title).
- Add two Buttons (menu section content).
- Add a Label (menu section title).
- Add three Buttons (menu section content).
- While holding control, select each Button on the ToolStrip:
- Set their DisplayStyle property to ImageAndText. This will cause a caption to be added to the Button in addition to an image.
- Set their TextImageRelation property to ImageAboveText. This will cause the caption to be below the Button’s image.
- Set their CheckOnClick property to True. This will cause the button to display as pressed or checked when clicked a single time. We will make the check state mutually exclusive for all buttons on the ToolStrip so that only one button can be checked at any given time to enforce SDI behavior.
- Deselect the Buttons. While holding control, select each Label on the ToolStrip:
- Set their TextAlign property to MiddleLeft. This will cause the labels to be centered vertically and line up along the left side of the ToolStrip.
- Expand their Font property and set Bold to true. This will cause the menu section titles to stand out from the Button captions.
Step 4 – Add Images to the ToolStrip Buttons
- Select one of the Buttons in the ToolStrip. Click the “…” button in the selected Button’s Image property.
- Select Project resource file and click Import…
- Navigate to your image, select it, and press OK. I prefer to use .png files for these scenarios.
- Your image should scale to 35,35 (if you set the ToolStrip’s ImageScalingSize to 35,35 and your source image size is greater than or equal to 35,35.
- Repeat the above four steps for each Button that you want to add a unique image.
Adding click events and custom rendering.