Jumping In with Both Feet: A Visual C# 2005 Programming Tour

Transcription

1 HOUR 1 Jumping In with Both Feet: A Visual C# 2005 Programming Tour What You ll Learn in This Hour:. Building a simple (yet functional) Visual C# application. Letting a user browse a hard drive. Displaying a picture from a file on disk. Getting familiar with some programming lingo. Learning about the Visual Studio.NET IDE Learning a new programming language can be intimidating. If you ve never programmed before, the act of typing seemingly cryptic text to produce sleek and powerful applications probably seems like a black art, and you might wonder how you ll ever learn everything you need to know. The answer is, of course, one step at a time. The first step to learning a language is the same as that of any other activity: building confidence. Programming is part art and part science. Although it might seem like magic, it s more akin to illusion; after you know how things work, a lot of the mysticism goes away, freeing you to focus on the mechanics necessary to produce the desired result. In this hour, you ll complete a quick tour that takes you step-by-step through creating a complete, albeit small, Visual C# 2005 program. Most introductory programming books start out with the reader creating a simple Hello World program. I ve yet to see a Hello World program that s the least bit helpful (they usually do nothing more than print hello world to the screen oh, fun). So, instead, you ll create a picture viewer application that lets you view Windows bitmaps and icons on your computer. You ll learn how to let a user browse for a file and how to display a selected picture file on the screen. Both of these skills will come in handy in the real-world applications that you ll create.

2 8 HOUR 1: Jumping In with Both Feet: A Visual C# 2005 Programming Tour Producing large, commercial solutions is accomplished by way of a series of small steps. After you ve finished creating the project in this hour, you ll have a feel for the overall development process and will have taken the first step toward becoming an accomplished programmer. In fact, you will be building upon this Picture Viewer program in subsequent chapters. time you complete this book, you will have built a robust application, complete with sizable screens, an intuitive interface, and professional error handling. end of this hour, you ll realize just how much fun it is to program using Visual C# Starting Visual C# 2005 Before you begin creating programs in Visual C# 2005, you should be familiar with the following terms:. Distributable component The final, compiled version of a project. Components can be distributed to other people and other computers, and they don t require the Visual C# 2005 development environment (the tools you use to create a.net program) to run (although they do require the.net runtime, which I ll discuss in Hour 23, Deploying A Visual C#.NET Application ). Distributable components are often called programs. In Hour 23, you ll learn how to distribute the Picture Viewer program that you re about to build to other computers.. Project A collection of files that can be compiled to create a distributable component (program). There are many types of projects, and complex applications might consist of multiple projects, such as a Windows application project, and support dynamic link library (DLL) projects.. Solution A collection of projects and files that make up an application or component. Visual C# 2005 is part of a larger entity known as the.net Framework. The.NET Framework encompasses all the.net technology, including Visual Studio.NET (the suite of development tools) and the Common Language Runtime (CLR), which is the set of files that make up the core of all.net applications. You ll learn about these items in more detail as you progress through this book. For now, realize that Visual C# 2005 is one of many languages that exist within the.net family. Many other languages, such as Visual Basic, are also.net languages, make use of the common language runtime, and are developed within Visual Studio.NET. Visual Studio.NET is a complete development environment, and it s called the IDE (short for integrated development environment). The IDE is the design framework in which you build applications; every tool you ll need to create your Visual C# 2005

3 Creating a New Project 9 projects is accessed from within the Visual C# IDE. Again, Visual Studio.NET supports development using many different languages Visual C# 2005 being one of the most popular. The environment itself is not Visual C# 2005, but the language you ll be using within Visual Studio.NET is Visual C# To work with Visual C# 2005 projects, you first start the Visual Studio.NET IDE. Start Visual Studio.NET now by choosing Microsoft Visual C# 2005 Express Edition on your Start/Programs menu. If you are running the full retail version of.net, your shortcut may have a different name. In this case, locate the shortcut on your Start menu and click it once to start the Visual Studio.NET IDE. Creating a New Project When you first start Visual Studio.NET, you re shown the Start Page tab within the IDE. You can open projects created previously or create new projects from this Start page (see Figure 1.1). For this quick tour, you re going to create a new Windows application, so open the File menu and click New Project to display the New Project dialog box shown in Figure 1.2. If your Start page doesn t look like the one in Figure 1.1, chances are that you ve changed the default settings. In Hour 2, Navigating Visual C# 2005, I ll show you how to change them back. FIGURE 1.1 You can open existing projects or create new projects from the Visual Studio Start page.

4 10 HOUR 1: Jumping In with Both Feet: A Visual C# 2005 Programming Tour FIGURE 1.2 The New Project dialog box enables you to create many types of.net projects. The New Project dialog box is used to specify the type of Visual C# project to create. (You can create many types of projects with Visual C#, as well as with the other supported languages of the.net Framework.) Create a new Windows application by following these steps: 1. Make sure that the Windows Application icon is selected (if it s not, click it once to select it). 2. At the bottom of the New Project dialog box is a Name text box. This is where, oddly enough, you specify the name of the project you re creating. Enter Picture Viewer in the Name text box. 3. Click OK to create the project. Did you Know? Always set the Name text box to something meaningful before creating a project, or you ll have more work to do later if you want to move or rename the project. When Visual C# creates a new Windows application project, it adds one form (the empty gray window) for you to begin building the interface the graphical windows that you interact with, for your application (see Figure 1.3). Within Visual Studio.NET, form is the term given to the design-time view of windows that can be displayed to a user.

5 Understanding the Visual Studio.NET Environment 11 FIGURE 1.3 New Windows applications start with a blank form; the fun is just beginning! Your Visual Studio.NET environment might look different from that shown in the figures of this hour due to the edition of Visual Studio.NET you re using, whether you ve already played with Visual Studio.NET, and other factors such as the resolution of your monitor. All the elements discussed in this hour exist in all editions of Visual Studio.NET, however. (If a window shown in a figure isn t displayed in your IDE, use the View menu to display it.) To create a program that can be run on another computer, you start by creating a project and then compiling the project into a component such as an executable (a program a user can run) or a DLL (a component that can be used by other programs and components). The compilation process is discussed in detail in Hour 23. The important thing to note at this time is that when you hear someone refer to creating or writing a program, just as you re creating the Picture Viewer program now, they re referring to the completion of all steps up to and including compiling the project to a distributable file. Understanding the Visual Studio.NET Environment The first time you run Visual Studio.NET, you ll notice that the IDE contains a number of windows, such as the Solutions Explorer window on the right, which is used to

6 12 HOUR 1: Jumping In with Both Feet: A Visual C# 2005 Programming Tour view and the files that make up a project. In addition to these windows, the IDE contains a number of tabs, such as the vertical Toolbox tab on the left edge of the IDE (refer to Figure 1.3). Try this now: Click the Toolbox tab to display the Toolbox window (clicking a tab displays an associated window). You can hover the mouse over a tab for a few seconds to display the window as well. To hide the window, simply move the mouse off the window if you hovered over the tab to display it, or click on another window. To close the window completely, click the Close (X) button in the window s title bar. If you opened the toolbox by clicking its tab rather than hovering over the tab, the toolbox will not automatically close. Instead, it will stay open until you click on another window. You can adjust the size and position of any of these windows, and you can even hide and show them as needed. You ll learn how to customize your design environment in Hour 2. Did you Know? Unless specifically instructed to do so, don t double-click anything in the Visual Studio.NET design environment. Double-clicking most objects produces an entirely different result than single-clicking does. If you mistakenly double-click an object on a form (discussed shortly), a code window is displayed. At the top of the code window is a set of tabs: one for the form design and one for the code. Click the tab for the form design to hide the code window and return to the form. The Properties window at the right side of the design environment is perhaps the most important window in the IDE, and it s the one you ll use most often. If your computer display resolution is set to , you can probably see only a few properties at this time. This makes it difficult to view and set properties as you create projects. All the screen shots in this book are taken at due to size constraints, but you should run at a higher resolution if you can. I highly recommend that you develop applications with Visual C# 2005 at a screen resolution of or higher because it offers plenty of work space. Keep in mind, however, that end users might be running at a lower resolution than you are using for development. If you need to change your display settings, right-click your desktop and select Properties. Changing the Characteristics of Objects Almost everything you work with in Visual C# is an object. Forms, for instance, are objects, as are all the items you can put on a form to build an interface such as list boxes and buttons. There are many types of objects, and objects are classified by type.

7 Changing the Characteristics of Objects 13 For example, a form is a Form object, whereas items you can place on a form are called Control objects, or controls. (Hour 3, Understanding Objects and Collections, discusses objects in detail.) Some objects don t have a physical appearance but exist only in code, and you ll learn about these kinds of objects in later hours. Every object has a distinct set of attributes known as properties (regardless of whether the object has a physical appearance). You have certain properties about you, such as your height and hair color. Visual C# objects have properties as well, such as Height and BackColor. Properties define the characteristics of an object. When you create a new object, the first thing you need to do is set its properties so that the object appears and behaves the way you want. To display the properties of an object, click the object in its designer (the main work area in the IDE). First, make sure your Properties Window is displayed by opening the View menu and choosing Properties Window. Next, click anywhere in the default form now (its title bar says Form1) and check to see whether its properties are displayed in the Properties window. You ll know because the drop-down list box at the top of the properties window will contain the form s name: Form1 System.Windows.Forms.Form. Form1 is the name of the object, while System.Windows.Forms.Form is the type of object. Naming Objects The property you should always set first for any new object is the Name property. Scroll toward the top of the properties list until you see the (Name) property (see Figure 1.4). If the Name property isn t one of the first properties listed, your Properties Window is set to show properties categorically instead of alphabetically. You can show the list alphabetically by clicking the Alphabetical button that appears just above the properties grid. I recommend that you keep the Properties window set to show properties in alphabetical order; doing so makes it easier to find properties that I refer to in the text. Note, the Name property always stays toward the top of the list and is referred to as (Name). If you re wondering why it has parentheses around it, that s because the parentheses force the property to the top of the list, since symbols come before letters in an alphabetical sort. When saving a project, you choose a name and a location for the project and its files. When you first create an object, Visual C# gives the object a unique, generic name based on the object s type. Although these names are functional, they simply aren t descriptive enough for practical use. For instance, Visual C# named your form Form1, but it s common to have dozens of forms in a project, and it would be

8 14 HOUR 1: Jumping In with Both Feet: A Visual C# 2005 Programming Tour extremely difficult to manage such a project if all forms were distinguishable only by a number (Form2, Form3, and so forth). FIGURE 1.4 The Name property is the first property you should change when you add a new object to your project. Name property What you re actually working with is a form class, or template, that will be used to create and show forms at runtime. For the purpose of this quick tour, I simply refer to it as a form. See Hour 5, Building Forms The Basics, for more information. To better manage your forms, give each one a descriptive name. Visual C# gives you the chance to name new forms as they re created in a project. Visual C# created this default form for you, so you didn t get a chance to name it. It s important to not only change the name of the form but also to change the filename of the form. Change the programmable name and the filename and the same time by following these steps: 1. Click the Name property and change the text from Form1 to frmviewer. Notice that this does not change the filename of the form as it s displayed in the Solution Explorer window. 2. Right-click Form1.cs in the Solution Explorer window (the window above the Properties window).

9 Changing the Characteristics of Objects Choose Rename from the context menu that appears. 4. Change the text from Form1.vb to frmviewer.cs. I use the frm prefix here to denote that the file is a form class. Prefixes are optional, but I find they really help you keep things organized. The Name property of the form is actually changed for you automatically when you rename the file. I had you explicitly change the Name property because it s something you re going to be doing a lot for all sorts of objects. Did you Know? Setting the Text Property of the Form Notice that the text that appears in the form s title bar says Form1. This is because Visual C# sets the form s title bar to the name of the form when it s first created but doesn t change it when you change the name of the form. The text in the title bar is determined by the value of the Text property of the form. Change the text now by following these steps: 1. Click the form once more so that its properties appear in the Properties window. 2. Use the scrollbar in the Properties window to locate the Text property. 3. Change the text to Picture Viewer. Press the Enter key or click on a different property. You ll see the text in the title bar of the form change. Saving a Project The changes you ve made so far exist only in memory; if you were to turn off your computer at this time (don t do this), you would lose all of your work up to this point. Get into the habit of frequently saving your work (committing the changes to disk). Click the Save All button on the toolbar (the picture of a stack of diskettes) now to save your work. Visual C# then displays the Save Project dialog box shown in Figure 1.5. Notice that the Name property is already filled in because you named the project when you created it. The Location text box is where you specify the location in which to save the project. Visual C# creates a subfolder in this location using the value in the Name text box (in this case, Picture Viewer). You can use the default location, or change it to suit your purposes. Don t worry about the Solution Name text box or the check box for Create directory for solution at this time, just be sure to leave the checkbox checked as it appears in Figure 1.5. Click Save to save the project.

10 16 HOUR 1: Jumping In with Both Feet: A Visual C# 2005 Programming Tour FIGURE 1.5 When saving a project, choose a name and a location for the project and its files. Giving the Form an Icon Everyone who has used Windows is familiar with icons the little pictures that represent programs. Icons most commonly appear in the Start menu next to the name of their respective programs. In Visual C# 2005, you not only have control over the icon of your program file, you can also give every form in your program a unique icon if you want to. The following instructions assume that you have access to the source files for the examples in this book. They are available at You can also get these files, as well as discuss this book, at my website at When you unzip the samples, a folder will be created for each hour, and within each hour s folder will be subfolders for the sample projects. You ll find the icon in the folder Hour 1\Picture Viewer. You don t have to use the icon I ve provided for this example; you can use any icon of your choice. If you don t have an icon available (or you want to be a rebel), you can skip this section without affecting the outcome of the example. To give the form an icon, follow these steps: 1. In the Properties window, click the Icon property to select it. 2. When you click the Icon property, a small button with three dots appears to the right of the property. Click this button. 3. Use the Open dialog box that appears to locate the PictureViewer.ico file or another icon file of your choice. When you ve found the icon, double-click it, or click it once to select it and then click Open. After you ve selected the icon, it appears in the Icon property along with the word Icon. A small version of the icon appears in the upper-left corner of the form as well. Whenever this form is minimized, this is the icon displayed on the Windows taskbar.

11 Changing the Characteristics of Objects 17 Changing the Size of the Form Next, you re going to change the Width and Height properties of the form. The Width and Height values are shown collectively under the Size property; Width appears to the left of the comma, Height to the right. You can change the Width or Height property by changing the corresponding number in the Size property. Both values are represented in pixels (that is, a form that has a Size property of 200,350 is 200 pixels wide by 350 pixels tall). To display and adjust the Width and Height properties separately, click the small plus sign (+) next to the Size property (see Figure 1.6). FIGURE 1.6 Some properties can be expanded to show more specific properties. A pixel is a unit of measurement for computer displays; it s the smallest visible dot on the screen. The resolution of a display is always given in pixels, such as or When you increase or decrease a property by one pixel, you re making the smallest possible visible change to the property. Change the Width property to 400 and the Height to 325 by typing in the corresponding box next to a property name. To commit a property change, press Tab or Enter, or click a different property or window. Your screen should now look like the one in Figure 1.7.

12 18 HOUR 1: Jumping In with Both Feet: A Visual C# 2005 Programming Tour FIGURE 1.7 Changes made in the Properties window are reflected as soon as they re committed. You can also size a form by dragging its border, which you ll learn about in Hour 2. This property can also be changed by program code, which you ll learn how to write in Hour 5. Save the project now by choosing File, Save All from the menu or by clicking the Save All button on the toolbar it has a picture of stacked diskettes on it. Adding Controls to a Form Now that you ve set the initial properties of your form, it s time to create a user interface by adding objects to the form. Objects that can be placed on a form are called controls. Some controls have a visible interface with which a user can interact, whereas others are always invisible to the user. You ll use controls of both types in this example. On the left side of the screen is a vertical tab titled Toolbox. Click the Toolbox tab now to display the Toolbox window and click the plus sign next to Common Controls to see the most commonly used controls (see Figure 1.8). The toolbox contains all the controls available in the project, such as labels and text boxes.

13 Adding Controls to a Form 19 FIGURE 1.8 The toolbox is used to select controls to build a user interface. There are four ways to add a control to a form, and Hour 5 explains them in detail. In this hour, you will use the technique of double-clicking a tool in the toolbox and copying and pasting a control. Did you Know? The toolbox will close as soon as you ve added a control to a form and when the pointer is no longer over the toolbox. To make the toolbox stay visible, you would click the little picture of a pushpin located in the toolbox s title bar. See Hour 2 for more information on customizing the design environment. I don t want you to add them yet, but your Picture Viewer interface will consist of the following controls:. Two Button controls The standard buttons that you re used to clicking in pretty much every Windows program you ve ever run. A PictureBox control A control used to display images to a user. An OpenFileDialog control A hidden control that exposes the Windows Open File dialog box functionality

14 20 HOUR 1: Jumping In with Both Feet: A Visual C# 2005 Programming Tour Designing an Interface It s generally best to design the user interface of a form and then add the code behind the interface to make the form functional. You ll build your interface in the following sections. FIGURE 1.9 When you double-click a control in the toolbox, the control is added to the upper-left corner of the form. Adding a Visible Control to a Form Start by adding a Button control to the form. Do this by double-clicking the Button item in the toolbox. Visual C# creates a new button and places it in the upper-left corner of the form (see Figure 1.9). Using the Properties window, set the button s properties as follows. Remember, when you view the properties alphabetically, the Name property is listed first, so don t go looking for it down in the list or you ll be looking awhile. Property Value Name btnselectpicture Location 301,10 (Note: 301 is the x coordinate; 10 is the y coordinate.) Size 85,23 Text Select Picture

15 Designing an Interface 21 You re now going to create a button that the user can click to close the Picture Viewer program. Although you could add another new button to the form by double-clicking the Button control on the toolbox again, this time you ll add a button to the form by creating a copy of the button you ve already defined. This allows you to easily create a button that maintains the size and other style attributes of the original button when the copy was made. To do this, right-click the button and choose Copy from its shortcut menu. Next, right-click anywhere on the form and choose Paste from the form s shortcut menu (you could have also used the keyboard shortcuts Ctrl+C to copy and Ctrl+V to paste). The new button appears centered on the form, and it s selected by default. Notice that it retained almost all of the properties of the original button, but the name has been reset. Change the properties of the new button as follows: Property Value Name btnquit Location 301,40 Text Quit The last visible control you need to add to the form is a PictureBox control. A PictureBox has many capabilities, but its primary purpose is to show pictures, which is precisely what you ll use it for in this example. Add a new PictureBox control to the form by double-clicking the PictureBox item in the toolbox and set its properties as follows: Property Value Name picshowpicture BorderStyle FixedSingle Location 8,8 Size 282,275 After you ve made these property changes, your form will look like the one in Figure Click the Save All button on the toolbar to save your work. Adding an Invisible Control to a Form All the controls that you ve used so far sit on a form and have a physical appearance when the application is run. Not all controls have a physical appearance, however. Such controls, referred to as nonvisual controls (or invisible-at-runtime controls), aren t designed for direct user interactivity. Instead, they re designed to give you, the programmer, functionality beyond the standard features of Visual C# 2005.

16 22 HOUR 1: Jumping In with Both Feet: A Visual C# 2005 Programming Tour FIGURE 1.10 An application s interface doesn t have to be complex to be useful. To enable the user to select a picture to display, you need to give them the ability to locate a file on their hard drive. You might have noticed that whenever you choose to open a file from within any Windows application, the dialog box displayed is almost always the same. It doesn t make sense to force every developer to write the code necessary to perform standard file operations, so Microsoft has exposed the functionality via a control that you can use in your projects. This control is called the OpenFileDialog control, and it will save you dozens and dozens of hours that would otherwise be necessary to duplicate this common functionality. Other controls in addition to the OpenFileDialog control give you file functionality. For example, the SaveFileDialog control provides features for allowing the user to specify a filename and path for saving a file. Display the toolbox now and scroll down using the down arrow in the lower part of the toolbox until you can see the OpenFileDialog control (it s in the Dialogs category), and then double-click it to add it to your form. Note that the control isn t placed on the form, but rather it appears in a special area below the form (see Figure 1.11). This happens because the OpenFileDialog control has no form interface to display to a user. It does have an interface (a dialog box) that you can display as necessary, but it has nothing to display directly on a form. Select the OpenFileDialog control and change its properties as follows:

17 Designing an Interface 23 Property Name Filename Filter Title Value ofdselectpicture <delete existing text and make empty> Windows Bitmaps *.BMP JPEG Files *.JPG Select Picture The Filter property is used to limit (Filter) the types of files that will be displayed in the Open File dialog box. The format for a filter is description filter. The text that appears before the first pipe symbol is the descriptive text of the file type, whereas the text after the pipe symbol is the pattern to use to filter files. You can specify more than one filter type by separating each description filter value by another pipe symbol. Text entered into the Title property appears in the title bar of the Open File dialog box. FIGURE 1.11 Controls that have no interface appear below the form designer. The graphical interface for your Picture Viewer program is now finished. If you pinned the toolbox open, click the pushpin in the title bar of the toolbox now to close it.

18 24 HOUR 1: Jumping In with Both Feet: A Visual C# 2005 Programming Tour Writing the Code Behind an Interface You have to write code for the program to be capable of performing actions and responding to user interaction. Visual C# 2005 is an event-driven language, which means that code is executed in response to events. These events might come from users, such as a user clicking a button, or from Windows itself (see Hour 4, Understanding Events, for a complete explanation of events). Currently, your application looks nice, but it won t do a darn thing (sort of like me on Saturday mornings before kids). The user can click the Select Picture button until they can file for disability with carpel tunnel syndrome, but nothing will happen because you haven t told the program what to do when the user clicks the button. You can see this for yourself now by pressing F5 to run the project. Feel free to click the buttons, but they don t do anything. When you re finished, close the window you created to return to Design mode. You re going to write code to accomplish two tasks. First, you re going to write code that lets the user browse their hard drives to locate and select a picture file and then display the file in the picture box (this sounds a lot harder than it is). Second, you re going to add code to the Quit button that shuts down the program when the user clicks the button. Letting a User Browse for a File The first bit of code you re going to write enables the user to browse their hard drives, select a picture file, and then see the selected picture in the PictureBox control. This code executes when the user clicks the Select Picture button; therefore, it s added to the Click event of that button (you ll learn all about events in later hours). When you double-click a control on a form in Design view, the default event for that control is displayed in a code window. The default event for a Button control is its Click event, which makes sense because clicking is the most common action a user performs with a button. Double-click the Select Picture button now to access its Click event in the code window (see Figure 1.12). When you access an event, Visual C# builds an event handler (the code highlighted in the rectangle in Figure 1.12), which is essentially a template procedure in which you add the code that executes when the event occurs. The cursor is already placed within the code procedure, so all you have to do is add code. time you re finished with this book, you ll be madly clicking away as you write your own code to make your applications do exactly what you want them to do well, most of the time. For now, just enter the code as I present it here.

19 Writing the Code Behind an Interface 25 FIGURE 1.12 You ll write all code in a window such as this. It s important that you get in the habit of commenting your code, so the first statement you re going to enter is a comment. Beginning a statement with two forward slashes designates the statement as a comment; the compiler won t do anything with the statement, so you can enter whatever text you want after the two forward slashes. Type the following statement exactly as it appears and press the Enter key at the end of the line: // Show the open file dialog box. The next statement you ll enter triggers a method of the OpenFileDialog control that you added to the form. You ll learn all about methods in Hour 3. For now, think of a method as a mechanism to make a control do something. The ShowDialog() method tells the control to show its Open dialog box and let the user select a file. The ShowDialog() method returns a value that indicates its success or failure, which you ll then compare to a predefined result (DialogResult.OK). Don t worry too much about what s happening here; you ll be learning the details of all this in later hours, and the sole purpose of this hour is to get your feet wet. In a nutshell, the ShowDialog() method is invoked to let a user browse for a file. If the user selects a file, more code is executed. Of course, there s a lot more to using the OpenFileDialog control than I present in this basic example, but this simple statement gets the job done. Enter the following two code statements, pressing Enter at the end of each line:

20 26 HOUR 1: Jumping In with Both Feet: A Visual C# 2005 Programming Tour Capitalization is important. Visual C# is a case-sensitive language, which means ShowDialog() is not the same as Showdialog(). If you get the case of even one letter wrong, Visual C# will not recognize the word and you re code won t work, so always enter code exactly as it appears in this book! if (ofdselectpicture.showdialog() == DialogResult.OK) { The opening brace (the { character) is necessary for this if statement because it denotes that this if construct will be made up of multiple lines. Time for another comment. Your cursor is currently on the line below the { that you entered. Type this statement and remember to press Enter at the end of the code line. // Load the picture into the picture box. This next statement, is the line of code that actually displays the picture in the picture box. (If you re itching to know more about graphics, take a look at Hour 18, Working with Graphics. ) Enter the following statement: picshowpicture.image = Image.FromFile(ofdSelectPicture.FileName); In addition to displaying the selected picture, your program is also going to display the path and filename of the picture in the title bar. When you first created the form, you changed the Text property of the form using the Properties window. To create dynamic applications, properties need to be constantly adjusted at runtime, and this is done using code. Insert the following two statements (press Enter at the end of each line): // Show the name of the file in the form s caption. this.text = string.concat( Picture Viewer( + ofdselectpicture.filename + ) ); The last statement you need to enter is a closing brace (a } character). Whenever you have an opening brace, you have to have a closing brace. This is how Visual C# groups multiple statements of code. Enter this statement now: } After you ve entered all the code, your editor should look like that shown in Figure 1.13.

21 Writing the Code Behind an Interface 27 FIGURE 1.13 Make sure that your code exactly matches the visible code shown here. Terminating a Program Using Code The last bit of code you ll write terminates the application when the user clicks the Quit button. To do this, you ll need to access the Click event handler of the btnquit button. At the top of the code window are two tabs. The current tab has the text frmviewer.cs*. This is the tab containing the code window for the form with the filename frmviewer.cs. Next to this is a tab that contains the text frmviewer.cs [Design]*. Click this tab now to switch from Code view to the form designer. If you receive an error when you click the tab, the code you entered contains an error, and you need to edit it to make it the same as shown in Figure After the form designer appears, double-click the Quit button to access its Click event. Enter the following code in the Quit button s Click event handler, press Enter at the end of each statement: // Close the window and exit the application this.close(); The this.close(); statement closes the current form. When the last loaded form in a program is closed, the application shuts itself down completely. As you build more robust applications, you ll probably want to execute all kinds of cleanup routines before terminating an application, but for this example, closing the form is all you need to do.

22 28 HOUR 1: Jumping In with Both Feet: A Visual C# 2005 Programming Tour Running a Project Your application is now complete. Click the Save All button on the toolbar (it looks like a stack of disks), and then run your program by pressing F5. You can also run the program by clicking the button on the toolbar that looks like a right-facing triangle and resembles the Play button on a VCR (this button is called Start, and it can also be found on the Debug menu). Learning the keyboard shortcuts will make your development process move along faster, so I recommend you use them whenever possible. When you run the program, the Visual C# interface changes, and the form you ve designed appears floating over the design environment (see Figure 1.14). FIGURE 1.14 When in Run mode, your program executes the same as it would for an end user. You are now running your program as though it were a standalone application running on another user s machine; what you see is exactly what users would see if they ran the program (without the Visual Studio.NET design environment in the background, of course). Click the Select Picture button to display the Select Picture dialog box (see Figure 1.15). Use the dialog box to locate a picture file. When you ve found a file, double-click it, or click once to select it and then click Open. The selected picture is then displayed in the picture box, as shown in Figure 1.16.

23 Running a Project 29 When you click the Select Picture button, the default path shown depends on the last active path in Windows, so it will be different for you than shown in Figure FIGURE 1.15 The OpenFileDialog control handles all the details of browsing for files. Cool, huh? FIGURE 1.16 Visual C# makes it easy to display pictures with very little work. If you want to select and display a picture from your digital camera, chances are the format is JPEG, so you ll need to select this from the Files of type drop-down. Also, if your image is very large, you ll see only the upper-left corner of the image (what fits in the picture box). In later hours, I ll show you how you can scale the image to fit the picture box, and even resize the form to show a larger picture in its entirety.

24 30 HOUR 1: Jumping In with Both Feet: A Visual C# 2005 Programming Tour Summary When you re finished playing with the program, click the Quit button to return to Design view. That s it! You ve just created a bona fide Visual C# program. You ve used the toolbox to build an interface with which users can interact with your program, and you ve written code in strategic event handlers to empower your program to do things. These are the basics of application development in Visual C#. Even the most complicated programs are built using this fundamental approach; you build the interface and add code to make the application do things. Of course, writing code to do things exactly the way you want things done is where the process can get complicated, but you re on your way. If you take a close look at the organization of the hours in this book, you ll see that I start out by teaching you the Visual C# (Visual Studio.NET) environment. I then move on to building an interface, and later I teach you all about writing code. This organization is deliberate. You might be a little anxious to jump in and start writing serious code, but writing code is only part of the equation don t forget the word Visual in Visual C# As you progress through the hours, you ll be building a solid foundation of development skills. Soon, you ll pay no attention to the man behind the curtain you ll be that man (or woman)! Q&A Q. Can I show pictures of file types other than BMP and JPG? A. Yes. The PictureBox supports the display of images with the extensions BMP, JPG, ICO, EMF, WMF, and GIF. The PictureBox can even save images to a file using any of the supported file types. Q. Is it possible to show pictures in other controls? A. The PictureBox is the control to use when you are just displaying images. However, many other controls allow you to display pictures as part of the control. For instance, you can display an image on a button control by setting the button s Image property to a valid picture.

25 Workshop 31 Workshop The Workshop is designed to help you anticipate possible questions, review what you ve learned, and get you thinking about how to put your knowledge into practice. Quiz 1. What type of Visual C# project creates a standard Windows program? 2. What window is used to change the attributes (location, size, and so on) of a form or control in the IDE? 3. How do you access the default event (code) of a control? 4. What property of a picture box do you set to display an image? 5. What is the default event for a button control? Answers 1. Windows Application 2. Properties Window 3. Double-click the control in the designer 4. The Image property 5. The Click event Exercises 1. Change your Picture Viewer program so that the user can also locate and select GIF files. (Hint: Change the Filter property of the OpenFileDialog control.) 2. Create a new project and put two buttons on it. Place them in the bottomright corner of the form.