Introduction to the Visual C# 2005 Express Edition IDE

Form ever follows function. Seeing is believing. Proverb Form ever follows function. Louis Henri Sullivan Intelligence …is the faculty of making artificial objects, especially tools to make tools. Henri-Louis Bergson

OBJECTIVES In this chapter you will learn: The basics of the Visual Studio Integrated Development Environment (IDE) that assists you in writing, running and debugging your Visual C# programs. Visual Studio's help features. Key commands contained in the IDE's menus and toolbars. The purpose of the various kinds of windows in the Visual Studio 2005 IDE. What visual programming is and how it simplifies and speeds program development. To create, compile and execute a simple Visual C# program that displays text and an image using the Visual Studio IDE and the technique of visual programming.

2.1 Introduction 2.2 Overview of the Visual Studio 2005 IDE 2.3 Menu Bar and Toolbar 2.4 Navigating the Visual Studio 2005 IDE 2.4.1 Solution Explorer 2.4.2 Toolbox 2.4.3 Properties Window 2.5 Using Help 2.6 Using Visual Programming to Create a Simple Program Displaying Text and an Image 2.7 Wrap-Up 2.8 Web Resources

Fig. 2.1 | Start Page in Visual C# 2005 Express Edition. Hidden window Start Page links Empty Solution Explorer (no projects open) New Project button Start Page tab Fig. 2.1 | Start Page in Visual C# 2005 Express Edition.

Fig. 2.2 | Displaying a Web page in Visual Studio. Requested Web page (URL in location bar drop-down menu) Selected tab requested Web page Fig. 2.2 | Displaying a Web page in Visual Studio.

Fig. 2.3 | New Project dialog. Visual C# Windows Application (selected) Default project name (provided by Visual Studio) Description of selected project template (provided by Visual Studio) Fig. 2.3 | New Project dialog.

Fig. 2.4 | Design view of the IDE. Active tab Tabs Menu Menu bar Solution Explorer window Form (Windows application) Properties window Fig. 2.4 | Design view of the IDE.

Fig. 2.5 | Example of a text box control in the Visual Studio IDE. Text box (displaying the text Form1), which can be modified. Fig. 2.5 | Example of a text box control in the Visual Studio IDE.

Fig. 2.6 | Examples of buttons in the Visual Studio IDE. OK button Cancel button Fig. 2.6 | Examples of buttons in the Visual Studio IDE.

Fig. 2.7 | Visual Studio menu bar.

Fig. 2.8 | Summary of Visual Studio 2005 IDE menus (Part 1 of 2).

Fig. 2.8 | Summary of Visual Studio 2005 IDE menus (Part 2 of 2).

Fig. 2.9 | Standard toolbar in Visual Studio. Save Other Windows Solution Configurations New project Open File Save All Copy Undo Navigate backwards Start Add Item Cut Paste Redo Navigate forwards Solution Platforms Find in files Solution Explorer Object browser Start Page Find Properties Window Toolbox Window a) b) Fig. 2.9 | Standard toolbar in Visual Studio.

Fig. 2.10 | Adding the Build toolbar to the IDE. Standard toolbar Build toolbar added to the Standard toolbar Fig. 2.10 | Adding the Build toolbar to the IDE.

Fig. 2.11 | IDE toolbar icon showing additional commands. Down arrow indicates additional commands Fig. 2.11 | IDE toolbar icon showing additional commands.

Fig. 2.12 | Tool tip demonstration. Tool tip displayed when the mouse pointer rests over the New Project icon Fig. 2.12 | Tool tip demonstration.

Fig. 2.13 | Toolbar icons for three Visual Studio windows. Solution Explorer Toolbox Properties window Fig. 2.13 | Toolbar icons for three Visual Studio windows.

Fig. 2.14 | Auto-hide feature demonstration. Tab for hidden window (auto-hide enabled) Fig. 2.14 | Auto-hide feature demonstration.

Fig. 2.15 | Displaying a hidden window when auto-hide is enabled. Toolbox title bar Horizontal orientation for pin icon Fig. 2.15 | Displaying a hidden window when auto-hide is enabled.

Fig. 2.16 | Disabling auto-hide (“pinning down” a window). Toolbox “pinned down” Vertical orientation for pin icon Fig. 2.16 | Disabling auto-hide (“pinning down” a window).

Fig. 2.17 | Solution Explorer with an open project. Show all files icon Toolbar Startup project Fig. 2.17 | Solution Explorer with an open project.

Plus box Minus box Fig. 2.18 | Solution Explorer showing plus boxes and minus boxes for expanding and collapsing the tree to show or hide project files.

Minus box indicates that the file of folder is expanded (changed from plus box) Fig. 2.19 | Solution Explorer expanding the Properties file after clicking its plus box.

Plus boxes indicate that the file or folder is collapsed (changed from minus box) Fig. 2.20 | Solution Explorer collapsing all files after clicking any minus boxes.

Group names Controls Fig. 2.21 | Toolbox window displaying controls for the Common Controls group.

Categorized icon Alphabetical icon Description of the Text property Component selection drop-down list Toolbar Properties Properties values Fig. 2.22 | Properties window displaying the Text property of the Form.

Fig. 2.23 | Help menu commands.

Fig. 2.24 | Dynamic Help window. Contents Selected Item How Do I Search Index Dynamic Help window Relevant help articles on the selected item (e.g., the Form) Fig. 2.24 | Dynamic Help window.

Fig. 2.25 | Using context-sensitive help.

Fig. 2.26 | Options dialog displaying Help settings. Show all settings check box Help options selected Show Help using: box Fig. 2.26 | Options dialog displaying Help settings.

Fig. 2.27 | Simple program executing. Label control PictureBox control Fig. 2.27 | Simple program executing.

Fig. 2.28 | New Project dialog. Template types Type in the project name Fig. 2.28 | New Project dialog.

Fig. 2.29 | Save Project dialog.

Click to set project location Selected Project location Fig. 2.30 | Setting the project location in the Project Location dialog.

Fig. 2.31 | Setting the form’s Text property in the Properties window. Name and type of object Property value Selected property Property description Fig. 2.31 | Setting the form’s Text property in the Properties window.

Fig. 2.32 | Form with enabled sizing handles. Title bar Fig. 2.32 | Form with enabled sizing handles.

Fig. 2.33 | Resized form.

Fig. 2.34 | Changing the form’s BackColor property. Down-arrow button Current color Custom palette Light blue Fig. 2.34 | Changing the form’s BackColor property.

Fig. 2.35 | Form with new BackColor property applied. New background color Fig. 2.35 | Form with new BackColor property applied.

Fig. 2.36 | Adding a label to the form. Label control Fig. 2.36 | Adding a label to the form.

Fig. 2.37 | Changing the Label’s AutoSize property to False.

Fig. 2.38 | GUI after the form and Label have been customized. Label centered with updated Text property Sizing handles Fig. 2.38 | GUI after the form and Label have been customized.

Fig. 2.39 | Properties window displaying the Label’s properties. Ellipsis button Fig. 2.39 | Properties window displaying the Label’s properties.

Fig. 2.40 | Font dialog for selecting fonts, styles and sizes. Current font Font sample Fig. 2.40 | Font dialog for selecting fonts, styles and sizes.

Fig. 2.41 | Centering the Label’s text. Text alignment options Middle-center alignment option Fig. 2.41 | Centering the Label’s text.

Fig. 2.42 | Inserting and aligning a PictureBox. Updated Label PictureBox Fig. 2.42 | Inserting and aligning a PictureBox.

Fig. 2.43 | Image property of the PictureBox. Image property value (no image selected) Fig. 2.43 | Image property of the PictureBox.

Fig. 2.44 | Select Resource dialog to select an image for the PictureBox.

Image file name Fig. 2.45 | Select Resource dialog displaying a preview of selected image.

Fig. 2.46 | Scaling an image to the size of the PictureBox. SizeMode property set to StretchImage SizeMode property Fig. 2.46 | Scaling an image to the size of the PictureBox.

Fig. 2.47 | PictureBox displaying an image. Newly Inserted image Fig. 2.47 | PictureBox displaying an image.

Fig. 2.48 | Building a solution. Build menu Fig. 2.48 | Building a solution.

Form Running program Close box Fig. 2.49 | IDE in run mode, with the running program in the foreground window.