How to: Create a C# Windows Application

Article
12/04/2006

The purpose of this topic is to acquaint you with elements of the Visual C# Express Edition development environment as you build a relatively straightforward C# program using Windows Forms. Windows Forms provide your project with the components that make up a standard Windows application user interface, including dialog boxes, menus, buttons, and many other controls. Fundamentally, these controls are just classes from the .NET Framework class library. Using the designer view in Visual C# Express Edition, you 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 create a new Windows application
How to toggle between code view and design view
How to change the Windows Form's properties
How to add a MenuStrip control
How to add a Button control
How to create and populate a ComboBox control
How to use a WebBrowser control
How to create event handlers for controls

To create a C# Windows application

On the File menu, click New Project.

The New Project dialog box appears. This dialog box lists the different default application types that Visual C# Express Edition can create.
Select Windows Application as your project type.
Change the name of your application to Web Browser.
Click OK.

Visual C# Express Edition creates a new folder for your project, named after the project title, and then displays your new Windows Form, entitled Form1 in design view. You can switch between this view and the source code view at any time by right-clicking on the design surface or code window and selecting View Code or View Designer.

The Windows Form you see in design view is a visual representation of the window that will open when your application is launched. In design view, you can drag various controls from the Toolbox 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 contained in a file that is normally nested out of view. You can see this file, called Form1.designer.cs, if you expand Form1.cs.
If you are in code view, switch to design view by right-clicking and selecting View Designer. Now change the size of the Windows Form: click on the lower-right corner of the Windows Form, and when the cursor 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. This is the window in which Web pages will be displayed, so you don't want it to be too cramped.
Make sure the Properties window is displayed. Its default location is the lower right, but you can move to another location if you like; the following illustration shows it in the upper right. If the Properties window is not visible, on the View menu, click Properties 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.
Change the title of the Windows Form: Click on the form to select it. In the Properties window, scroll down to Text, select the text "Form1," and type Web Browser. Press ENTER or the TAB key 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 on the control, and on the shortcut menu, select Properties.
Add a Menu control: Click the Toolbox button on the toolbar, or on the View menu, click Toolbox. Scroll down the list of controls and expand Menus & Toolbars until you get to MenuStrip. Drag this control to anywhere on the Windows Form.

This control creates a default menu at the top of the form.
Populate the Menu: In the box that says Type Here, type the name of the menu, in this case Navigate. When you press ENTER, new empty boxes appear to create other menus, and menu items. In the lower box, type Home. Press ENTER, and more boxes are displayed. Type Go Back. Press ENTER, and type Go Forward.

These menu items form your basic Web site navigation controls.
Add a button.

From the Toolbox, in the Common Controls category, drag a Button control to approximately the middle of the Windows Form, just below the menu bar. In the Properties window, change the Text property to Go instead of button1, and change the design name, which looks like (Name), from button1 to goButton.
Add a ComboBox.

From the Toolbox, in the Common Controls 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 ComboBox until it is lined up with the button.

Note

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 holding down SHIFT as you click on them. Then apply the align and resize icons, which appear in the Layout Toolbar at the top of the Design window.
Populate the ComboBox.

A ComboBox provides a drop-down list of options from which the user can choose. In this program, the ComboBox is going to 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 Items property, and you'll see the word (Collection) with an ellipses button (…). Click on this button to edit the contents of the ComboBox. Add as many Web site URLs as you want, pressing RETURN after each.
Add the WebBrowser control.

From the Toolbox, in the Common Controls category, scroll down until you locate the WebBrowser control. Drag the control to the Windows Form. Resize the WebBrowser control to fit nicely 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 none. Setting the Anchor settings to Top, Bottom, Left, Right will cause the WebBrowser control to resize properly 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. Look in form1.Designer.cs and you will see that an instance of this class has been added to your application code, along with instances of classes that represent the other items you added using the designer. It is these instances that you will be using when you add event handlers for, and call methods on, the controls.
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 need to start adding some C# code to provide the program's functionality.

We need to add event handlers for the button and for each of the menu options. 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—the event message that occurs when the user clicks on a button—has been created for you. Add code to the event handler method so it looks like the sample below.
```
private void goButton_Click(object sender, System.EventArgs e)
{
    webBrowser1.Navigate(new Uri(comboBox1.SelectedItem.ToString()));
}
```
This code takes the currently selected item from the ComboBox control, a string containing a Web URL, and passes it to the Web browser's Navigate method. The Navigate method loads and displays the contents of the Web page at that location.
Add event handlers for the MenuStrip options.

Return to the Design window and double-click on each of the menu sub-items in turn. Visual C# Express Edition creates event handler methods for each. Edit these methods so they look like the following code.
```
private void homeToolStripMenuItem_Click(object sender, System.EventArgs e)
{
    webBrowser1.GoHome();
}

private void goForwardToolStripMenuItem_Click(object sender, System.EventArgs e)
{
    webBrowser1.GoForward();
}

private void goBackToolStripMenuItem_Click(object sender, System.EventArgs e)
{
    webBrowser1.GoBack();
}
```
Each of these menu handlers calls a navigation method that is supported on the WebBrowser class.

Note

You can see from this code that the default names given to the menu options can become quite confusing. For this reason, it's a good idea to change the name of each menu control as you create it, using the Properties editor. The name of the handler will then reflect the name of the menu option.
See the code that Visual C# has written for you.

The Visual C# IDE has already written a lot of initialization code for you. In code view, find the constructor for the Form1 class--it has a signature of public Form1(). Right-click on the InitializeComponent method that is being called from inside the constructor, and select Go To Definition. You now see all the code that was being written behind the scenes while you were dragging and dropping controls and setting properties in the Properties window.
Add some initialization code of your own.

The last task is to add some initialization code of your own to Form1. The constructor should never be used to call any code that might throw an exception. Therefore, any such code needs to be located someplace else, and that place is the Form1_Load method. Click on the Form1.cs[Design] tab at the top of the code editor to go back to Windows Form. Select the form and in the Properties window click on the Events button (the one with the lightning bolt) and then double click on Load. This will add an event handler method and position your cursor in the method in code view.

When your program is started by an end-user, Windows will notify your application's Form by sending a Load event. When the form receives that event, it will call the Form1_Load method. Methods that are called in response to events are called event handlers. The system will call your event at the right time; your job is to put the code into the event handler that you want to execute when the event happens.

In code View, add the following two lines to the Form1_Load method as shown below. This will cause the WebBrowser control to display your computer's default home page, and also set the initial value of the ComboBox.
```
private void Form1_Load(object sender, EventArgs e)
{
    comboBox1.SelectedIndex = 0;
    webBrowser1.GoHome();
}
```
Build and run the program.

Press F5 to build and run your Web browser. Your Windows Form should be displayed on the screen, and then display your computer's default home page. You can use the ComboBox control to select a Web site, and click on Go to navigate to it. The menu options enable you to return home, or move back and forth through previously visited Web sites.

If you are new to C# programming, this would be a good time to read the C# Language Primer (Visual C# Express) section. If you wish to know more about the Visual C# Express Edition development environment, and how to create Console Applications using IntelliSense in particular, see How to: Create a C# Console Application.

How to: Create a C# Windows Application

To create a C# Windows application

See Also

Concepts

Other Resources

Additional resources