How It Works Visual Studio comes with a lot of features to help developers while writing code. One of these features is that you can just double-click the GUI element for which you want to add the code, and you will be taken to the code associated with the GUI element in Code view. For example, when you double-click the Submit button in Design view, you are taken to the Code view, and the btnSubmit_Click event template automatically gets generated. To achieve the functionality for this control, you add the following code: MessageBox.Show("Hello" + ' ' + txtFname.Text + ' ' + txtLname.Text + ' ' + "Welcome to the Windows Application"); MessageBox.Show is a C# method that pops up a message box. To display a “Welcome” message with the first name and last name specified by the user in the message box, you apply a string concatenation approach while writing the code. In the code segment, you hard code the message “Hello Welcome to the Windows Application”, but with the first name and last name of the user appearing after the word “Hello” and concatenated with the rest of the message, “Welcome to the Windows Appli- cation”. For readability, you also add single space characters ( ' ') concatenated by instances of the + operator in between the words and values you are reading from the Text property of the txtFnam and txtLname. If you do not include the single space character (' ') during string concatenation, the words will be run into each other, and the message displayed in the message box will be difficult to read. Setting Dock and Anchor Properties Prior to Visual Studio 2005, resizing Windows Forms would require you to reposition and/or resize controls on those forms. For instance, if you had some controls on the left side of a form, and you tried to resize the form by stretching it toward the right side or bring it back toward the left, the controls wouldn’t readjust themselves according to the width of the resized form. Developers were bound to write code to shift controls accord- ingly to account for the user resizing the form. This technique was very code heavy and not so easy to implement. W ith V isual S tudio 2005 came two new properties, Anchor and Dock, which are so easy to set at design time itself. The same Dock and Anchor pr oper ties ar e available with V isual S tudio 2008, and they solv e the pr oblem with the behavior of controls that users face while r esizing for ms . CHAPTER 14 ■ BUILDING WINDOWS FORMS APPLICATIONS 335 9004ch14final.qxd 12/13/07 4:02 PM Page 335 Dock Property The Dock property allows you to attach a control to one of the edges of its parent. The term “parent” applies to Windows Forms, because Windows Forms contain the controls that you drag and drop on them. By default, the Dock property of any control is set to None. For example, a control docked to the top edge of a form will always be connected to the top edge of the form, and it will automatically resize in the left and right directions when its parent is resized. The Dock property for a control can be set by using the provided graphical interface in the Properties window as shown in Figure 14-11. Figure 14-11. Setting the Dock property Anchor Property When a user resizes a form, the controls maintain a constant distance from the edges of its parent form with the help of the Anchor property. The default value for the Anchor pr oper ty for any contr ol is set to T op , Left, which means that this control will maintain a constant distance fr om the top and left edges of the for m. The Anchor pr op - er ty can be set b y using the pr ovided graphical interface in the Properties window, as sho wn in F igur e 14-12. D ue to the default setting of Anchor pr oper ty to Top, Left, if you try to resize a form b y str etching it toward the right side, you will see that its controls are still positioned on the left r ather than shifting to the center of the for m to adjust to the size of the form after r esizing is done . I f opposite edges , for example, Left and Right, are both set in the Anchor property, the contr ol will str etch when the form is resized. However, if neither of the opposite edges is set in the Anchor pr oper ty, the control will float when the parent is resized. CHAPTER 14 ■ BUILDING WINDOWS FORMS APPLICATIONS336 9004ch14final.qxd 12/13/07 4:02 PM Page 336 Figure 14-12. Setting the Anchor property Try It Out: Working with the Dock and Anchor Properties In this exercise, you will use the existing Windows Forms Application named WinApp, which you created previously in the chapter. You will see how to modify this application in such a way that when you resize the form, its controls behave accordingly and keep the application presentable for the user. 1. Go to Solution Explorer and open the WinApp project. Open the WinApp form in Design mode. 2. Select the form by clicking its title bar; you will see handles around form’s border, which allow you to resize the form’s height and width. 3. Place the cursor on the handle of the right-hand border, and when mouse pointer becomes double-headed, click and stretch the form toward the right-hand side. You will see that form’s width increases, but the controls are still attached to the left corner of the form. 4. Similarly, grab the handle located on the bottom of the form and try to increase the height of the form. You will notice that the controls are still attached to the top side of the form. Have a look at Figure 14-13, which shows a resized (height and width) form and the position of the controls. The controls appear in the top-left corner because their Dock property values are None and Anchor property values are Top, Left. CHAPTER 14 ■ BUILDING WINDOWS FORMS APPLICATIONS 337 9004ch14final.qxd 12/13/07 4:02 PM Page 337 Figure 14-13. Resized form and position of controls Now you will try to set the Dock and Anchor properties for the controls and then retest the application. 5. Select the Label control having a Text value of Welcome, and go to the Properties window. Select the AutoSize property and set its value to False (default value is True). 6. Resize the width of the Label control to the width of the form, and adjust the Label control to the top border of the form. Set this control’s TextAlign property to Top, Center. 7. Set the Dock property for the Label control from None to Top, which means you want the label to always be affixed with the top border of the form. 8. Now select all the remaining controls (two Labels, two TextBoxes, and one Button) either by scrolling over all of them while holding down the left mouse button or selecting each with a click while pressing down either the Shift or Ctrl key. 9. Once you have selected all the controls, go to the Properties window. You will see listed all the properties common to the controls you have selected on the form. 10. S elect the Anchor property; modify its value from the default Top, Left to Top, Left, and Right. This will allow you to adjust the controls accordingly as soon as you r esize the form. The controls will also grow in size accordingly to adjust to the width of the form, as you can see in Figure 14-14. CHAPTER 14 ■ BUILDING WINDOWS FORMS APPLICATIONS338 9004ch14final.qxd 12/13/07 4:02 PM Page 338 Figure 14-14. The effect of the Anchor property setting Top , Left, Right on a resized form ■Note The Anchor property has very interesting behaviors; you can try setting this property in various combinations and see their effects when you resize your form. 11. Return the form to its previous size so you can see the effects of setting another Anchor property. 12. Select all the controls again as you did in Step 8. Set the Anchor property to Top only and try resizing the form now. You will notice that the controls are floating in the middle of the form when you resize it, as you can see in Figure 14-15. Figure 14-15. The effect of the Anchor property setting Top on a resized form 13. Save the changes in your project by clicking File ➤ Save All. CHAPTER 14 ■ BUILDING WINDOWS FORMS APPLICATIONS 339 9004ch14final.qxd 12/13/07 4:02 PM Page 339 How It Works When you resize the form, it will behave according to the settings of the Dock and Anchor properties. In the first instance, you set the Dock property of the Label control to Top, which allows this Label control to be affixed to the top border of the form and span the entire width of the form. Setting the Anchor property of the remaining controls to Top, Left, and Right shifts the controls in such a manner that they will maintain a constant dis- tance from the left and right borders of the form. Adding a New Form to the Project You’ll obviously need multiple Windows Forms in any given project. By default, every project opens with only one Windows Form, but you are free to add more. Try It Out: Adding a New Form to the Windows Project In this exercise, you will add another Windows Form to your project. You will also work with a ListBox control and see how to add items to that control. 1. Navigate to Solution Explorer and select the WinApp project, right-click, and click Add ➤ Windows Form. This will add a new Windows Form in your project. 2. In the Add New Item dialog box displayed, change the form’s name from Form1.cs to AddName.cs. Click Add. The new form with the name AddName will be added to your project. 3. Ensure that the newly added form AddN ame is open in Design view. Drag a Label control onto the form and change its Text property to Enter Name. 4. D r ag a TextBox control onto the AddName form, and modify its Name property to txtName. 5. Drag a ListBox control onto the AddName form, and modify its Name property to lstName. 6. A dd a B utton contr ol to the A ddN ame form and modify its Name property to btnA dd and its T ext pr oper ty to Add. Now you are done with the design part of the AddName form; your form should look like the one shown in Figure 14-16. CHAPTER 14 ■ BUILDING WINDOWS FORMS APPLICATIONS340 9004ch14final.qxd 12/13/07 4:02 PM Page 340 Figure 14-16. GUI design of the AddNames form You want the user to add a name into the TextBox and click the Add button, after which that name will be added to the ListBox. To do so, you need to write the code functionality behind the click event of the Add button. 7. Double-click the Add button and write the following code, which will read the name entered into the TextBox and add it to the ListBox, inside the btnAdd_Click event. lstName.Items.Add(txtName.Text); txtName.Clear(); 8. Go to the Build menu and select Build Solution. You should see a message indicat - ing a successful build. Keep your current project open, as you’ll need it immediately for the next exercise. (Don’t worry, we’ll explain how this and the next exercise work afterward.) Try It Out: Setting the Startup Form Setting the startup form in a Visual C# project is a little tricky, so we wanted to break it out into its own exercise. To set a startup form, you need to follow these steps: 1. In the project you modified in the previous exercise, navigate to Solution Explorer, open the Program.cs file, and look for the following code line: Application.Run(new WinApp()); This code line ensures the WinApp form will be the first form to run all the time; in order to set the AddNames form as the startup form, you need to modify this statement a little, as follows: Application.Run(new AddNames()); CHAPTER 14 ■ BUILDING WINDOWS FORMS APPLICATIONS 341 9004ch14final.qxd 12/13/07 4:02 PM Page 341 2. Build the solution, and run and test the application by pressing Ctrl+F5. The AddNames application form will be loaded. 3. Enter a name in the TextBox and click the Add button; you will see that the name you entered has been added to the ListBox, as shown in Figure 14-17. Figure 14-17. Running the AddNames Windows Forms Application How It Works Let’s have a look at the “Adding a New Form to the Windows Project” task first. You use the following code: lstName.Items.Add(txtName.Text); txtName.Clear(); The ListBox control has a collection named Items, and this collection can contain a list of items, which is why you use it here. Next you call up the Add method of the Items collection, and finally you pass the value entered in the TextBox to the ListBox’s Items col- lection’s Add method. As users may want to add another name after entering one, you have to clear the TextBox once the name has been added to the list so that the TextBox will be empty, ready for another name to be entered. In the “Setting the Startup Form” task, you create an instance of the AddName form in the Program.cs, as shown in the following code: Application.Run(new AddNames()); Implementing an MDI Form The term Multiple Document Interface (MDI) means to have a GUI interface that allows multiple documents or forms under one parent form or window. CHAPTER 14 ■ BUILDING WINDOWS FORMS APPLICATIONS342 9004ch14final.qxd 12/13/07 4:02 PM Page 342 Visualize the working style of Microsoft Word: you are allowed to open multiple doc- uments in one parent window, and all the documents will get listed in the Window menu, from which you can choose whichever you want to read, instead of having the individual documents open in their own windows, which makes it difficult to handle all of the docu- ments and covers your screen with a lot of open windows. Having an individual window for each instance of the same application is termed Single Document Interface (SDI); applications such as Notepad, MS Paint, Calculator, and so on are SDI applications. SDI applications only get opened in their own windows and can become difficult to manage, unlike when you have multiple documents or forms open inside one MDI interface. Hence, MDI applications follow a parent form and child form relationship model. MDI applications allow you to open, organize, and work with multiple documents at the same time . The parent (MDI) form organiz es and arranges all the child forms or documents that are currently open. Try It Out: Creating an MDI Parent Form with a Menu Bar In this exercise, you will create an MDI form in the WinApp project. You will also see how to create a menu bar for the parent form, which will allow you to navigate to all the child forms. To do so, follow these steps: 1. Navigate to Solution Explorer, select the WinApp project, right-click, and select Add ➤ Windows Form. Change the Name value from Form1.cs to ParentForm.cs, and click A dd. 2. Select the newly added ParentForm in Design mode, and navigate to the Proper- ties window. Set the IsMdiContainer property value to True (the default value is False). Notice that the background color of the form has changed to dark gray. 3. Modify the size of the ParentForm so that it can accommodate the two forms you cr eated earlier , WinApp and AddNames, inside it. 4. Add a menu to the ParentForm by dragging a MenuStrip (a control that serves the purpose of a menu bar) onto the ParentForm. In the top-left corner, you should now see a drop-down sporting the text Type Here. Enter Open Forms in the drop- down. This will be your main top-level menu. 5. Now under the Open Forms menu, add a submenu by entering the text Win App. 6. U nder the W in A pp submenu, enter A dd N ames . 7. N o w click the top menu, Open Forms, and on the right side of it, type H elp . CHAPTER 14 ■ BUILDING WINDOWS FORMS APPLICATIONS 343 9004ch14final.qxd 12/13/07 4:02 PM Page 343 8. Under the Help menu, enter Exit. 9. Now it’s time to attach code to the submenus you have added under the main menu Open Forms. First, you’ll add code for the submenu Win App, which basi- cally will open the WinApp form. In Design mode, double-click the Win App submenu, which will take you to the code editor. Under the click event, add the following code: WinApp wa = new WinApp(); wa.Show(); 10. Now to associate functionality with the Add Names submenu: double-click this submenu, and under the click event add the following code: AddNames an = new AddNames(); an.Show(); 11. To associate functionality with the Exit submenu located under the Help main menu, double-click Exit, and under the click event add the following code: Application.Exit(); Again, keep your current project open, as you’ll need it immediately for the next exercise. (Don’t worry, we’ll explain how this and the next exercise work afterward.) Try It Out: Creating an MDI Child Form and Running an MDI Application In this exercise, you will associate all the forms you created earlier as MDI child forms to the main MDI parent form you created in the previous task. 1. I n the pr oject y ou modified in the previous exercise, you’ll first make the WinApp for m an MDI child for m. T o do so , y ou need to set the MdiParent pr oper ty to the name of the MDI par ent for m, but in the code editor . Y ou have already added functionality in the pr evious task (opening the W inA pp for m); just before the line wher e y ou ar e calling the Show() method, add the follo wing code: wa.MdiParent=this; After adding this line, the code will appear as follows: WinApp wa = new WinApp(); wa.MdiParent = this; wa.Show(); CHAPTER 14 ■ BUILDING WINDOWS FORMS APPLICATIONS344 9004ch14final.qxd 12/13/07 4:02 PM Page 344 [...]... source view, so to see your change in effect, you need to switch back to Design view When you have a lot of changes, it can be a tedious process to see how each change made to the various controls and their respective properties looks To avoid this tedious switching between Source and Design view, Visual Studio 20 08 has come up with a brand new feature called Split view This feature allows you to work with... EXCEPTIONS 4 Add a Tab control to the form By default, the Tab control will include two tab pages Change the Text property of tabPage1 to ADO.NET and the second tab page’s Text property to Database 5 Add a button to the tab page titled ADO NET Exceptions, and change its Text property to ADO.NET Exception-1 Add a label to the right of this button, and change its Text property to Incorrect ADO.NET code will... property to blank (i.e., no text is assigned) 7 To attach the code behind the Button control, double-click the Button control 9004ch15final.qxd 12/13/07 4:00 PM Page 359 CHAPTER 15 s BUILDING ASP.NET APPLICATIONS 8 Source view opens, taking you inside the Input.aspx.cs tab page, where you will see the blank template for the Button1_Click event Add the following code to the click event of the button: Label1.Text... client’s request with the data the user wants to see or work with HTTP is a communication protocol that is used to request web pages from the web server and then to send the response back to the web browser 9004ch15final.qxd 12/13/07 4:00 PM Page 351 CHAPTER 15 s BUILDING ASP.NET APPLICATIONS Introduction to ASP.NET and Web Pages ASP NET is available to all NET developers, as it comes with Microsoft... Studio 20 08 You saw how to work with the Split view feature to save you time in development You now also have an understanding of the importance of Master Pages, and how to create them and allocate Master Pages to existing web pages and newly created web pages In the next chapter, you will see how to handle exceptions 9004ch16final.qxd 12/13/07 3:59 PM CHAPTER Page 369 16 Handling Exceptions U p to now,... open the Input.aspx page in Design view, where you can drag and drop controls onto the web page 4 Drag a Label control (named Label1) onto the form, and modify its Text property to Enter Name 5 Drag a TextBox control (named TextBox1) onto the form Drag a Button control (named Button1) onto the form and modify its Text property to Submit All three controls should appear in one line 6 Now add another Label... second button to the tab page, and change its Text property to ADO.NET Exception-2 Add a label to the right of this button, and change its Text property to Accessing a nonexistent column will cause exception The layout should now look like Figure 16-1 Figure 16-1 ADO.NET tab page 7 Add the following using directive for the SQL Server data provider namespace to Form1.cs using System.Data.SqlClient; 8 Insert... other pages will get emerged 4 You will add an image to the Master Page, but before you do that you need to add a folder to contain image files Right-click the project, click New Folder, and name it Images To add images to this folder, right-click it and select Add Existing Item Select the item you want to add, and then click Add The image will be added to this folder and made available for use anywhere... will attach the required functionality to the controls 1 Navigate to Solution Explorer, select the Chapter15 project, right-click it, and select Add New Item 2 In the Add New Item dialog box, modify the form name to appear as Input.aspx and ensure that the Language drop-down list shows Visual C# as the language to be used Click Add to add the Input.aspx form to your project 3 Right-click the Input.aspx... layout Open the Visual Studio 20 08 IDE, and select File ® New ® Web Site In the New Web Site dialog box, select ASP.NET Web Site as the project template, and then choose HTTP as the location and Visual C# as the language In the text box adjacent to the Location drop-down list box, modify the path from http:// to http://localhost/Chapter15, which indicates that you are going to create a web site under . Label control to the top border of the form. Set this control’s TextAlign property to Top, Center. 7. Set the Dock property for the Label control from None to Top, which means you want the label to always. property of any control is set to None. For example, a control docked to the top edge of a form will always be connected to the top edge of the form, and it will automatically resize in the left. according to the settings of the Dock and Anchor properties. In the first instance, you set the Dock property of the Label control to Top, which allows this Label control to be affixed to the top border