c
 



  
The purpose of this topic is to acquaint you with elements of the Visual C# Express Edition integrated
development environment (IDE) as you use Windows Forms to build a relatively straightforward C#
program. Windows Forms provide your project with components, such as dialog boxes, menus, buttons, and
many other controls, that make up a standard Windows application user interface (UI). Fundamentally,
these controls are just classes from the .NET Framework class library. The  view in Visual C#
Express Edition enables you to drag the controls onto your application's main form and adjust their size and
position. As you do this, the IDE automatically adds the source code to create an instance of the appropriate
class and initialize it.

This example shows you how to create your own Web browser application, which you can customize with
shortcuts to your favorite Web sites.

In this section, you'll learn how to complete the following tasks:

Ê Create a new Windows Forms application.

Ê Toggle between   view and  view.

Ê Change the Windows Form's properties.

Ê Add a MenuStrip control.

Ê Add a Button control.

Ê Create and populate a ComboBox control.

Ê Use a WebBrowser control.

Ê Create event handlers for controls.

For a video version of this topic, see Video How to: Create a C# Windows Forms Application.

To create a C# Windows application

1.Ê On the  menu, click 
 .

The 
  dialog box appears. This dialog box lists the different default application types that
Visual C# Express Edition can create.
2.Ê Select

   as your project type.
3.Ê Change the name of your application to

.
4.Ê Click º .
Visual C# Express Edition creates a new folder for your project that is named after the project title,
and then displays your new Windows Form, titled Form1 in  view. You can switch between
this view and   view at any time by right-clicking the design surface or code window and then
clicking 
  or 
.
 The Windows Form you see in  view is a visual representation of the window that will open
when your application is opened. In  view, you can drag various controls from the   
onto the form. These controls are not really "live"; they are just images that are convenient to move
around on the form into a precise location.
After you have dropped a control onto the form, Visual C# works behind the scenes to create the code
that will cause the real control to be positioned correctly when the program is run. This source code is
in a file that is generally nested out of view. You can see this file in    ! , which is
named Form1.designer.cs, if you expand Form1.cs.
5.Ê If you are in   view, switch to  view by right-clicking the code window and then clicking

. Now change the size of the Windows Form.
a.Ê Click the lower-right corner of the Windows Form.
b.Ê When the pointer becomes a double-headed arrow, drag the corner of the form until it is at least
as wide and as deep as a quarter of your screen.
Because this is the window in which Web pages will be displayed, you don't want it to be too
cramped.
6.Ê Make sure the   window is displayed. Its default location is the lower-right section of the
IDE, but you can move to another location if you like. The following illustration shows it in the upper-
right corner. If you do not see the  window, on the 
menu, click   window.
This window lists the properties of the currently selected Windows Form or control, and it's here that
you can change the existing values.
7.Ê Change the title of the Windows Form.
a.Ê Click on the form to select it.
b.Ê In the   window, scroll down to , select the text " "," and type


.
c.Ê Ñress ENTER or TAB to move focus from the "Text" text box.
You now see that the text at the top of your Windows Form (in the area called the title bar) has
changed.
 To quickly change the name of a control, right-click the control and click  . You can type the
new name for the control in the  property.
8.Ê Click the    button on the toolbar, or on the 
menu, click   . Scroll down the list of
controls and expand # $  until you see MenuStrip. Drag this control to anywhere on
the Windows Form.

This control creates a default menu at the top of the form.

9.Ê In the box that says %c, type the name of the menu, in this case &. When you press
ENTER, new empty boxes appear to create other menus, and menu items. In the lower box, type
c . Ñress ENTER and more boxes are displayed. Type ' (. Ñress ENTER, and type ' 
 
 .
 These menu items form your basic Web site navigation controls.
10.Ê Add a button.
From the   , in the      category, drag a Button control to approximately the
middle of the Windows Form, just under the menu bar. In the   window, change the 
property to ' instead of   ", and change the design name, which resembles )*, from
  " to    .
11.Ê Add a    .
From the   , in the      category, drag a ComboBox control and position it to
the left of the new button. Drag the edges and corners to resize and reposition the     until it
is lined up with the button.

 

When you are moving controls around a Windows Form, you will see blue lines appear. These lines are
guides that help you line up the controls vertically and horizontally. You can also line up controls by
selecting more than one at a time. You can do this by clicking and dragging a selection box around the
controls or by holding down SHIFT as you click them. After you have multiple controls selected, you can
modify the alignment and size by using the align and resize icons. These icons appear on the +% 
  at the top of the  window.

12.Ê Ñopulate the ComboBox.

A ComboBox provides a drop-down list of options from which the user can select. In this program, the
ComboBox will contain a list of your favorite Web sites for quick access.
To create the list of sites, select the ComboBox and view its properties. Select the r property,
and you'll see the word )  * with an   ),,,*. Click this button to change the
contents of the ComboBox. Add as many Web site URLs as you want, pressing RETURN after each.

 

Be sure to include -.. before each Web site address.

13.Ê Add the WebBrowser control.

From the   , in the      category, scroll down until you locate the WebBrowser
control. Drag the control to the Windows Form. Resize the WebBrowser control to fit inside the
Windows Form without obscuring the ComboBox and Button controls. If the WebBrowser control
doesn't resize easily, first set it to the desired size, open its properties, locate the Dock setting, and
make sure that it is set to  . Setting the Anchor settings to  /  /+0/1- will cause
the WebBrowser control to resize correctly when you resize the application window.
The WebBrowser control is the control that does all the hard work of rendering the Web pages. You
access it in your application through an instance of the WebBrowser class. View form1.Designer.cs and
 you will see that an instance of this class has been added to your application code, together with
instances of classes that represent the other items that you added by using the designer. It is these
instances that you will be using when you add event handlers for, and call methods on, the controls.
14.Ê Add an event handler for the Button control.
You have now finished the design stage of your application and are at the point when you can start
adding some code to provide the program's functionality.
The program must have event handlers for the button and for each menu option. An event handler is a
method that is executed when the user interacts with the control. Visual C# Express Edition creates
empty event handlers for you automatically.
Double-click the button, and you'll see the Code Editor for your project appear. You'll also see that the
event handler for the click event, which is the event message that occurs when the user clicks a
button, has been created for you. Add code to the event handler method so that it resembles the
following code.

C#

Copy Code Ê
u

 
 
  


 !
"

# $%
 &
'
This code takes the currently selected item from the     control, a string that contains a Web
URL, and passes it to the Web browser's Navigate method. The & method loads and displays
the contents of the Web page at that location.
15.Ê Add event handlers for the MenuStrip options.
Return to the  window and double-click each sub-item in the menu in turn. Visual C#
Express Edition creates event handler methods for each. Edit these methods so that they resemble the
following code.

C#

Copy Code Ê
u

(%
u)$ 
  



 *+&
'

u

 ,  %
u)$ 
 
 


 *,  &
'

u

 
%
u)$ 
 
 


 *
&
'
Each of these menu handlers calls a navigation method that is supported on the WebBrowser class.

 
 You can see from this code that the default names given to the menu options can become very
confusing. For this reason, it's a good idea to change the name of each menu control as you create it by
using the   editor. The name of the handler will then reflect the name of the menu option.

16.Ê See the code that Visual C# has written for you.
The Visual C# IDE has already written initialization code for you. In   view, find the constructor
for the ,  class. It has a signature of u
,  . Right-click the $


-u
method that is being called from inside the constructor, and then click '  0 . You now see
all the code that was being written behind the scenes as you were dragging and dropping controls and
setting properties in the   window.
17.Ê Add some initialization code of your own.
The last task is to add some initialization code of your own to ,  . The constructor should never be
used to call any code that might throw an exception. Therefore, any such code must be located
someplace else, and that location is the ,  . method. Click the  ",23 tab at the
top of the code editor to go back to Windows Form. Select the form and in the   window
click the !& button (the one with the lightning bolt) and then double-click +  . This will add an
event handler method and position your cursor in the method in   view.
When a user starts your program, Windows will notify your application's form by sending a Load
event. When the form receives that event, it will call the ,  . method. Methods that are called
in response to events are called event handlers. The system will call your event at the appropriate
time; your job is to put the code into the event handler that you want to execute when the event
occurs.
In   view, add two lines to the ,  . method as shown in the following code. This will
cause the WebBrowser control to display your computer's default home page and also set the initial
value of the ComboBox.

C#

Copy Code Ê
u

,  .  


# $#/0&

 *+&
'
18.Ê Build and run the program.
Ñress F5 to build and run the Web browser. The Windows Form is displayed on the screen, and it then
displays your computer's default home page. You can use the ComboBox control to select a Web site,
and click ' to navigate to it. The menu options enable you to return home, or move back and forth
through previously visited Web sites.
Ê