NOGDUS

Articles, Tutorials, and other things. => General Programming => Topic started by: Richard Marks on March 19, 2010, 11:32:37 AM



Title: C# Tutorial 02 - Using Menus
Post by: Richard Marks on March 19, 2010, 11:32:37 AM
Tutorial 02 - Using Menus

Welcome to the second tutorial in my Windows.Forms tutorial series.
Today I am going to show you how to manually create a menu.

I have decided where I'm going with this series, and I will be walking you through developing a 2D tile map editor application in code, instead of using the shiny point-n-click Form Designer that Visual C# comes with.
We are after all, programmers! 8)

Lets get started!

Open up the solution (.sln) from the previous tutorial, then choose Export Template from the File menu to create a Project Template of the last bit that we did, so that you can keep the previous solution, and create another one based on it to work through the tutorial.

Got that? If not, just ask me, and I'll help you.
OK, so now that that is done, close the current solution using Close Solution in the File  menu, and then create a new Project, then choose the template you just created as the project type.

I named this new project as "UsingMenus" and you should do the same so there is no confusion.

Once you're ready, open up the PrimaryWindow.cs file and edit the line that says
Code:
Text = "Your First Window";

so that it reads as

Code:
Text = "Using Menus";

And add a line to the end of the constructor:
Code:
SetupUI();

Notice that MSVC# complains by underlining the method call in red with an error of
Quote
"The name 'SetupUI' does not exist in the current context"

That is supposed to happen, and I'm going to show you how to fix that next.

Now, right-click on the underlined method call, and choose Generate Method Stub

... :o
Wow! It just wrote the code we need for us!
Well, partly, but it will compile now, which is important.

Remove this line that it wrote for us:
Code:
throw new NotImplementedException();

And lets add another line in its place:
Code:
SetupUIMainMenu();

Hey it is underlined again! Repeat the procedure above to generate another stub for our new method.

Now, remove that generated code inside it, and lets get to talking about the subject of this tutorial... Using Menus!

A menu is made of multiple MenuItem objects and is parented by a MainMenu object.
The Form that is our PrimaryWindow has a property called Menu that lets us set the
MainMenu object for the Form. MainMenus can contain MenuItems, and MenuItems can contain MenuItems as well to created nested menus.

That might have been confusing...
But hopefully it makes sense once you start doing it.

First we will create the MainMenu for the PrimaryWindow.

Our menu will have six top-level menu items:
  • File
  • Edit
  • View
  • Tools
  • Options
  • Help

To create this, we need to create an array of MenuItem objects and then set the Menu property of the PrimaryWindow to a new MainMenu object that contains the array we created.

First we create the array:
Code:
MenuItem[] mainMenu =
{
    new MenuItem("&File"),
    new MenuItem("&Edit"),
    new MenuItem("&View"),
    new MenuItem("&Tools"),
    new MenuItem("&Options"),
    new MenuItem("&Help")
};

And now the line of code that we need to add our top-level menu items to the form:
Code:
Menu = new MainMenu(mainMenu);
Be sure to take note of the case-sensitivity.

If you press F5 to run your program, you should see your 800x600 black window with your menu at the top now.

Now, lets add some menu items to those top-level menu items.

First, we will populate the File menu.

Our File menu will have the following items:
  • New
  • Open
  • ----
  • Save
  • Save As
  • ----
  • Exit

After the mainMenu array declaration and before we set the form's Menu property add this code:
Code:
MenuItem[] fileMenu =
{
new MenuItem("&New"),
new MenuItem("&Open"),
new MenuItem("-"),
new MenuItem("&Save"),
new MenuItem("Save &As"),
new MenuItem("-"),
new MenuItem("E&xit"),
};

Now, we must add this array to the File MenuItem that is within the mainMenu array.
There may be a better way to do this than I do below, but it works for me, so its going to be the way that I show you how to do this.

Before you set the form's Menu property, add this code:
Code:
mainMenu[0].MenuItems.AddRange(fileMenu);

So we are adding the range of MenuItem objects from fileMenu to the first element in the mainMenu array's MenuItems property field. Sounds complicated, but it isn't.

Press F5 and you should now see the File menu when you click on File. 8)

OK, you know HOW to add menus, so we are almost finished with this tutorial.
Next I will show you how to make the menus respond to being clicked.
Since a menu that does nothing is pretty useless...

Oh, and the rest of the menus will get created in further tutorials as we expand on this application.

OK, so we will make it so that our program will close when you click Exit from the File menu.

To do this, we have to set the EventHandler of the menu item.

In the fileMenu array declaration, where you are declaring the Exit menu item, you need to insert a little more code.

Change
Code:
new MenuItem("E&xit"),
to be read as
Code:
new MenuItem("E&xit", new EventHandler(FileExitMenu_Click)),

And notice the red underline..but we cannot generate a method stub automatically this time. :(
But that is OK, cause we can write it manually.
Add this new method to your program:
Code:
private void FileExitMenu_Click(object sender, EventArgs e)
{

}

The parameters to the method cannot be changed, so don't try.
The EventHandler expects specific information to be passed to your method,
so we need those. I'm not going to explain what they are at this time.

Lastly, we will place 1 line of code in this new method to wrap up this tutorial.

Code:
Close();

That's it.
Now, press F5 to run the program, and use the File -> Exit menu to close the program.
Congratulations! You've just gained +1 XP to your Windows.Forms programming skill!
Thanks for reading.
Stay tuned for more tutorials. 8)