You can simply create an instance of the button object, for example, and you have a button. Most of the special visual objects you use to create Windows programs are housed in the System.Windows.Forms namespace.

Thinking Like a GUI Programmer

Programs that feature a graphical user interface are different from console programs. The following sections explain these differences.

Objects Are Everywhere

The explosion in object−oriented programming happened at the same time that graphical user interfaces entered the mainstream. This is no coincidence. Graphical interfaces lend themselves beautifully to the object−oriented paradigm. The window itself is an object, as are all the various buttons and widgets on the screen.

The User Is in Control

In a console−based application, the programmer is king. You determine everything, and the program flows according to your whims. In short, the user can only respond to the program. In the graphical universe, the user is the king. Your program is set up as a playground for the user, and the programmer’s job is to anticipate the user’s actions. This makes GUI programs friendly (usually) for the user but more challenging for the programmer to write.

Programs Respond to Events

The entire design of a GUI program is different from one based on a console. Console−based programs generally have well−established beginnings, middle segments, and ending places, with one main loop. A GUI program is a much more fluid affair. You generally do not write a main loop at all! Instead, the nature of a Windows program implies a main loop that constantly repeats until the program is ended. This main loop patiently waits for the user to do something. The user’s action (such as pressing a button or moving the mouse) triggers an event. Most of the code in a GUI program comprises responses to events.

Problems Are Solved Differently

In the console world, you have to build everything, and your program follows a logical flow. You can design a flowchart and expect the code to follow a similar structure. In a GUI program, the problem−solving process is more visual. You often begin by sketching out a screen. Then you figure out which controls and objects will bring that screen to life. Most of your code has to do with choosing objects, manipulating the properties of those objects, and then responding to events that occur when the user interacts with these objects.

Events Are Added to the Object Model

GUI programming requires that you expand your thinking about objects. You are already accustomed to objects’ having properties and methods, but user interface objects (as well as other kinds of objects) also require a special characteristic called an event. If a property is an adjective (it describes a characteristic of an object) and a method is a verb (it describes what an object can do), an event is an interjection, such as “Ouch!” or “Help!” Events are messages sent to other objects in the system. Normally, you use an event to indicate that something has happened—the user has clicked a button or moved a scroll bar, for example. Other events can be automatically triggered by

135

the operating system or the passage of time.

Creating a Graphical User Interface (GUI)

To learn the basic concepts of designing GUI forms, you’ll re−create the classic Hello World program from Chapter 1, “Basic Input and Output: A Mini Adventure.” This time, you will write it as a Windows GUI program. Although creating a graphical interface is more challenging than designing a console application, the Visual Studio IDE provides features that greatly simplify the process.

Creating a Windows Project

To begin, you create a C# program as usual. When you are asked for the type of project, choose Windows Form from the templates list box (see Figure 6.8).

Figure 6.8: You can choose to make a Windows project when you start a new C# project.

The editor will continue to load as usual, but the screen will be a little different from what you are used to.

Trap Be sure to choose a good name when you are creating the project because it is very difficult to change later. Leaving the name “WindowsFormApplication1” then changing it to “GlitterCritterLiveInVegas” requires several painful steps that can cause the program to not compile.

Using the Form Builder

The IDE has a new feature when you are building a Windows−style project. Figure 6.9 shows a graphical editor with a form in place. The visual form designer contains a number of panels and features to simplify the creation of GUI interfaces:

136

Figure 6.9: When you build a Windows project, the IDE changes to add graphical features.

∙Toolbox. Features components you can place on your form. You can highlight any object and draw it onto the form, as in an image−editing program.

∙Form. Another page in the main area where the code, object browser, and help screens have appeared before. You can resize the form by dragging on the small squares around its edges.

∙Properties window. Displays all the properties of the currently selected object. In this case, it shows all the properties of the form object that makes up the program. You can dynamically change a visual object’s properties by manipulating the Properties window.

∙Properties tab. Used to select the Properties window from the many windows available in this pane.

∙Sort Properties Alphabetically. Alphabetizes all the properties in the Properties window by property name. This can be useful when you know the exact name of the property you want to change.

∙Sort Properties by Category. Displays the properties by category. For example, all the properties dealing with the object’s appearance are grouped together, as well as the properties dealing with the object’s behavior. I have found the categories to be unintuitive (what’s the difference between appearance, design, and layout properties, for example?) However, when you become familiar with the way properties are organized, this is an easy method to find what you need.

Trap Sometimes, one of the windows (especially the Properties window) “disappears” while you are working. The highly flexible design of the .NET IDE can make the exact locations of various elements hard to predict. If you need access to a window and cannot see it on the screen, you can always select it from the View menu. In particular, when the Properties window is missing, you can find it by clicking the tabs in the right column of the editor.

Changing the Form’s Properties

If the form is highlighted (the sizing squares around its perimeter are visible), you can change its properties in the Properties window. Examine the form’s title bar. When you begin, the title bar reads Form 1. This becomes the title bar of your finished program. The title bar usually contains the

137

name of the program and sometimes other information. In any case, the form’s title bar is related to the form’s text property. Most visual objects have a text property, which allows you to change text on the object. Find the text property in the Properties window, and type Hello World!! in the box.

Trick The Properties window is a very important part of visual programming, so here are a few tips for using it. I like to make it larger than the default size. You can resize it by dragging its borders. You can also scroll up and down in the window if there are more properties than you can see at one time on the screen. You can display the properties alphabetically by choosing the button that has “AZ” on it at the top of the Properties window, or you can sort by category, by choosing the icon immediately to the left of the “AZ” icon.

For now, simply change the form’s text property. If you like, you can play around with other properties, too. Try to change the background color of the form. Experiment!

Trap Because of a flaw in the IDE design, the program will not run properly if you change the name of your startup form. In the next section you will learn how to fix this problem, but for now, just leave the form’s name as Form1.

Adding a Label to the Form

Although you have changed the form’s text to Hello World!!, the greeting is too subtle for most users to notice. Larger text centered in the middle of the screen would be better. This is easy to do. Look at the Toolbox, which should be on the left side of the screen. If it is not visible, select it from the View menu. The Toolbox contains visual objects you can place on your forms. These special objects are sometimes called controls or components. You select the component by clicking it in the Toolbox and then draw the component onto your form. It works much like a painting program, except that rather than paint colors on a palette, you paint controls onto a form.

Hint Like the other windows in the .NET IDE, the Toolbox has several faces. If you don’t see the controls you are looking for, make sure that you have selected the Windows Forms tab in the Toolbox. Also, the number of controls available can exceed the space allocated for the Toolbox. You use the up and down arrows on the Toolbox window to scroll through the controls available to you.

After a control is placed on the form, you move it by dragging it around. You resize it by manipulating the sizing rectangles on the sides and corners of the control.

Changing the Label’s Properties

Like any other controls, the label supports intriguing properties. The label’s text property determines what text will be placed in the label. Figure 6.10 shows the changes I made to the label—see whether you can match my changes. I modified the font name, font size, TextAlign, and BackColor properties to get the effect I was looking for. Of course, you can modify the program however you like.

138