Ivor Horton’s BeginningVisual C++ 2008 phần 10 ppsx

22 More on Windows Forms Applications You already know quite a lot about the process of creating Windows Forms applications from CLR Sketcher. In this chapter, you will explore some more controls that you can use in the GUI for a Windows Forms application. You’ll do this by assembling a single application incrementally throughout the chapter, so by the end of the chapter you’ll have another Windows Forms program of a reasonable size. In this chapter, you’ll learn: ❑ How to use a wider variety of controls to build an application GUI ❑ How to display a Web page in an application ❑ How to work with control containers ❑ How to create and display message boxes Creating the Application GUI Create a new CLR project using the Windows Forms Application template and assign the name Ex22_01 to the project. You are going to develop Ex22_01 into a program to generate lot- tery entries. The program won’t be an ideal design because it includes controls that duplicate some functions perhaps unnecessarily, but the benefit is that you get to try out various possibili- ties in a working application. I have chosen two lotteries with which I am familiar and for which the program generates entries; if these don’t match the lottery that you favor, you should be able to adjust the example quite easily. 25905c22.qxd:WroxPro 2/21/08 9:25 AM Page 1217 Let me make one point against entering a lottery — you would probably not choose the numbers 1 to 6 as your entry because it is extremely unlikely that such an entry would win. Of course, the truth is that it’s just as likely as any other more random-looking set of numbers you might choose, but the numbers 1 to 6 have never come up as the winning entry in any lottery anywhere. So you can conclude that whatever you choose — you lose. First, display the Properties window for the form and change the value of its Text property to A Winning Application. To display the controls that are available for use with the form, press Ctrl+Alt+X, or select the View > Toolbox menu item. Add a menu strip control to the top of the form by dragging a MenuStrip from the Toolbox window to the form. Add three menu items to the menu strip with the text &Play, &Limits, and &Help. The & precedes the character that is the accelerator character for the menu item, so Alt+P is the accelerator for the Play menu. The Editor window containing the form with the menu strip should now look as shown in Figure 22-1. The Play menu won’t have a submenu but will cause a Click event to fire when it is clicked. Because you’ll be handling the event, it is convenient to give the menu item a name that is shorter than the default. You can access the properties by right-clicking the control in the form and selecting Properties from the context menu, but this time try clicking menuStrip1 below the form and select Edit Items from the con- text menu. It displays the Items Collection Editor dialog box shown in Figure 22-2. If you select the name in the left pane in the dialog box corresponding to the Play menu, the properties for it are displayed in the right pane. You can then edit the (Name) property value to make it playMenuItem. Figure 22-2 shows the dialog box after the change has been made. The advantage of using this dialog box is that you can work through all the items on the menu strip adjusting the properties as necessary. You can also add new items to the menu strip or rearrange the menu sequence by moving items up or down using the buttons to the right of the left pane. Figure 22-1 1218 Chapter 22: More on Windows Forms Applications 25905c22.qxd:WroxPro 2/21/08 9:25 AM Page 1218 Figure 22-2 Adding Submenus Add three menu items, Upper, Lower, and Reset, to the Limits menu and add an About menu item to the Help menu. You can add new menu items to a drop-down menu using the Items Collection Editor, too. You access this by right-clicking the top level menu item such as Limits and selecting .EditDropDownItems from the pop-up. You just select the item you want to add from the drop-down list at the top, and click the Add button. Alternatively you can work through the Editor pane and interact directly with the menu strip as you did with the CLR Sketcher application. The properties for the new menu items need to be modified, so display the properties for the Upper menu first of all by right-clicking it and selecting Properties from the pop-up. You will be handling events for this menu item so you can change the default name property to something shorter, such as upperMenuItem. You can also add a shortcut key for the item by clicking the down arrow in the value column for the ShortcutKeys property to display the list shown in Figure 22-3. Figure 22-3 1219 Chapter 22: More on Windows Forms Applications 25905c22.qxd:WroxPro 2/21/08 9:25 AM Page 1219 Select the modifier or modifiers by clicking one or more of the checkboxes and select the key from the drop-down list. I chose Ctrl+Alt+U as the shortcut for this menu item, as you can see. Figure 22-3 also shows that I have set the value for the ToolTipText property as “Set upper limit for values”. As you know, hovering the mouse cursor over a menu item results in the tooltip being displayed after a brief delay. Setting the AutoToolTip property that is toward the beginning of the list to True makes the tooltip the same as the text on the menu item. Leaving the property value as False causes the ToolTipText property value to be chosen for the tooltip text. You can also control whether or not the shortcut key com- bination is displayed alongside the menu item text by setting the ShowShortcutKeys property value. Clicking the Lower menu item causes its properties to be displayed in the Properties window. You can then change the (Name) property value to lowerMenuItem, the ShortcutKeys property value to Ctrl+Alt+L, and the ToolTipText property values to “Set lower limit for values”. In the same way you can change the (Name) property for the Reset menu item to resetMenuItem, set the ShortCutKeys property value to Ctrl+Alt+R, and make the tooltip text “Reset limits to original values” . You can also change the (Name) property value for the About menu item to aboutMenuItem and add tooltip text for that, too; an About menu item doesn’t usually have a shortcut key combination defined. The Play menu item creates a complete new set of values for a lottery entry, so you could add tooltip text to indicate that, if you want. Adding a Tab Control A TabControl control provides multiple tabs that can each contain their own set of controls. You can use a tab control to provide for entries to more than one lottery in the application window client area. Display the Toolbox window (Ctrl+Alt+X) and select TabControl from the list — it’s in the Containers group. Click in the client area of the form to add the tab control and then display its properties. All the controls listed under the Containers heading can contain other controls so they all provide a means of collecting together a set of controls into a group. Obviously with the tab control each tab can contain its own set of controls, and you can have as many tabs in the control as you want. You want the tab control to always fill the client area of the window, and this is determined by the value of the Dock property that is in the Layout group of properties for the TabControl control. Figure 22-4 shows the Properties window for the tab control with the value cell for the Dock property expanded. Clicking in the central area where the cursor currently appears in Figure 22-4 changes the Dock property value to Fill, which is what you want here. You can also dock the control to any of the four sides of the client area by clicking in one of the four areas around the edge of the pop-up or have it undocked by clicking in the area labelled None. The form in the Editor pane should now look like Figure 22-5. The tab control has two tabs, but you can add another by clicking the arrow on the top edge of the con- trol toward the right. Just click Add Tab from the pop-up. You’ll need to change the text on each of the tabs to something more meaningful and change the (Name) property values too. Go to the Properties window for the TabControl control — right-clicking the control and selecting Properties from the pop- up displays the window if it is not already visible — then select the value field for the TabPages prop- erty and click the ellipsis that appears. The Tab Page Collection Editor dialog box shown in Figure 22-6 displays. 1220 Chapter 22: More on Windows Forms Applications 25905c22.qxd:WroxPro 2/21/08 9:25 AM Page 1220 Figure 22-4 Figure 22-5 The text on the tab should reflect the lottery name to which the controls on this tab relate, so I changed the (Name) property value to lottoTab and the Text property value to Lotto, as shown in Figure 22-6. The (Name) property value is the name used in the Form1 class for the variable that references this tab, and the Text property value is the text on the tab. 1221 Chapter 22: More on Windows Forms Applications 25905c22.qxd:WroxPro 2/21/08 9:25 AM Page 1221 Figure 22-6 The tab labelled tabPage2 is for an entry to a second lottery, which in my case is called Euromillions. Again, you can choose whatever lottery you prefer. Click tabPage2 in the left pane to display the proper- ties for it in the right pane; after you select the new tab you should see that the name in the left pane for tabPage1 has been altered to lottoTab and the text on the first tab in the form has been updated. I set the Text property value for tabPage2 as Euromillions and the (Name) property value as euroTab. You’ll use the third tab to display a Web page for entering a lottery so change the Text property value for tabPage3 to Web Page and the name property value to webTab. When you have completed that, you can click the OK button to close the dialog box. Using GroupBox Controls You can use a GroupBox control to collect other controls together in a group. A GroupBox control also delineates the group with a line boundary and allows you to label the group if you want. A Lotto lottery entry consists of six different numbers that are from 1 to 49 so you’ll want to group together the controls that will display these numbers. Add a GroupBox control to the Lotto tab by clicking the control in the Toolbox window and then clicking in the Lotto tab. You can then modify the Text, (Name), and Dock property values for the GroupBox to the values shown in Figure 22-7. The Text property value indicates the range of possible values for the lottery entry that is displayed on this tab. The value for the Dock property makes the GroupBox control fill its container, which is the Lotto tab on the Tab control. The (Name) property value determines the name of the variable in the Form1 class that identifies this control. The lottery entry on the Euromillions tab involves two groups of values, one group of five different values from 1 to 50 and a second group of two different “star” values each from 1 to 9. Numbers in the first group can be the same as the two “star” values. Use yet another container in the Euromillions tab, so click on SplitContainer in the Containers group in the Toolbox window and click in the Euromillions tab to place it there. To select a tab, first click the tab label at the top of the tab control — this selects the tab control with the tab label you highlighted; you then click within the display area of the tab to select the highlighted tab within the control. The Dock property value for the SplitContainer control is Fill by default so the control should fill the tab. The control has two panes that can each contain further controls. You can drag the divider between the panes to adjust the relative sizes of the panes. 1222 Chapter 22: More on Windows Forms Applications 25905c22.qxd:WroxPro 2/21/08 9:25 AM Page 1222 Figure 22-7 Display the Properties for the control and set the Orientation and (Name) properties, as shown in Figure 22-8. The panes should now be separated by a horizontal divider, so drag this so that the lower pane is about half the height of the upper pane. Then set the IsSplitterFixed property for the control to have the value True, as shown in Figure 22-8. This fixes the divider at the position you have set. If you leave the IsSplitterFixed property value as False, you allow the divider to be dragged to any position by the user when the application is executing. Figure 22-8 1223 Chapter 22: More on Windows Forms Applications 25905c22.qxd:WroxPro 2/21/08 9:25 AM Page 1223 You can group the contents of each pane in the SplitContainer control using a GroupBox control, so add a GroupBox control to each of the panes. Set the Text, (Name), and Dock properties for the GroupBox control in the upper pane to have the values “Values 1 to 50”, euroValues, and Fill, respectively, and set the Text, (Name), and Dock properties for the GroupBox control in the lower pane to have the values “Values 1 to 9,” euroStars, and Fill, respectively. The Editor window should look like Figure 22-9. Figure 22-9 You have quite a hierarchy of controls now. The client area of the form contains a tab control and the Euromillions tab on the tab control contains a SplitContainer control and each of the panes in the SplitContainer control contains a GroupBox control. The next step is to add buttons to each of the GroupBox controls in the panes. Using Button Controls Button controls in the Common Controls group are regular buttons that typically appear in a dialog window. You’ll use a button control to house each value in a lottery entry. For the Euromillions lottery you’ll need seven buttons, five in the group box in the top pane with values from 1 to 50 and two in the group box in the bottom pane with values from 1 to 9. Place five buttons in the group box in the upper pane on the Euromillions tab and add two more in the group box in the lower pane below to make an elegant arrangement. You can reposition any of the but- tons by dragging it with the mouse whereupon you should see vertical and/or horizontal alignment guides displayed to help you align the control to the others. You can also use the Format > Horizontal Spacing > Make Equal menu item to make the spacing in a horizontal sequence of controls uniform. The other menu items in the Format menu are worth exploring; they provide for setting the vertical spac- ing, for aligning controls, for centering a selected group of controls in a form, and for adjusting the height and width of the controls. You can select any number of controls by clicking them while holding the Ctrl key down. 1224 Chapter 22: More on Windows Forms Applications 25905c22.qxd:WroxPro 2/21/08 9:25 AM Page 1224 Figure 22-10 shows my arrangement for the buttons on the Euromillions tab. You’ll be generating values to display as the text on these buttons, so you need to change the properties for each of them. I suggest you make the values for the Text property on the upper five buttons the val- ues 1, 2, 3, 4, and 5, and the values for the Text property on the two buttons in the lower pane 1 and 2. You can change the (Name) property for each button too. The buttons in the upper pane can have names euroValue1, euroValue2, through to euroValue5, and the two on the lower pane euroStar1 and euroStar1. While you’re at it, you might like to change the BackColor property for each button that determines the background color. I chose the color Silver for the top five buttons and Gold for the bot- tom two — where both colors are from the Web palette. When you have completed that, the application window with the Euromillions tab selected should look as shown in Figure 22-11. Now you can return to the Lotto tab by clicking it in the Editor window. You can then add buttons to that. The Lotto lottery is very simple: You just have to choose six different values from 1 to 49 for an entry. You therefore need to add six Button controls to the GroupBox that is already on the Lotto tab. After you have arranged the buttons to your satisfaction, change the text on the buttons so they show the default values 1 to 6 and change the (Name) property for the buttons to lottoValue1, lottoValue2, through to lottoValue6. You can also set the BackColor property value for the buttons to a color of your choice — I chose the SkyBlue from the Web color palette. If you compile and execute the application, it should look as shown in Figure 22-12. Figure 22-10 Figure 22-11 1225 Chapter 22: More on Windows Forms Applications 25905c22.qxd:WroxPro 2/21/08 9:25 AM Page 1225 Figure 22-12 You can add a control to the Web Page tab next. Using the WebBrowser Control Displaying a Web page in the application is going to be much easier than you might have imagined because the WebBrowser control in the Common Controls group does all of the work. Click the Web Page tab in the form the Editor window; then click on WebBrowser in the Toolbox window, and click in the tab to place it there. You can display its properties by right-clicking it and selecting Properties from the pop-up. The Properties window for the control is shown in Figure 22-13. Figure 22-13 Figure 22-13 shows the properties after I have amended the (Name) property value to webBrowser, and set a value for the Url property as the URL for the Web page that the control should display; you can enter the URL for your local lottery organization here. If you verify that the Dock property value is Fill, 1226 Chapter 22: More on Windows Forms Applications 25905c22.qxd:WroxPro 2/21/08 9:25 AM Page 1226 [...]... the top and bottom As you see, I resized the ListBox controls to be the same height as the Label controls and a width sufficient to display a single limit value I also changed the font Size property to 10 and the ScrollAlwaysVisible property to True Make sure the SelectionMode property value is One for both list boxes, as you want to allow only one item to be selected from a list box at one time The... Warning There are a significant number of overloaded versions of the static Show() function that range from the very simple with a single parameter of type String^ to the rather more complicated with up to 10 parameters If you compile and execute the example and set the limits inappropriately, you’ll see a window similar to that shown in Figure 22-18 Figure 22-18 As you see, you automatically get a scrollbar . 22: More on Windows Forms Applications 25905c22.qxd:WroxPro 2/21/08 9:25 AM Page 1224 Figure 22 -10 shows my arrangement for the buttons on the Euromillions tab. You’ll be generating values to. If you compile and execute the application, it should look as shown in Figure 22-12. Figure 22 -10 Figure 22-11 1225 Chapter 22: More on Windows Forms Applications 25905c22.qxd:WroxPro 2/21/08. a width sufficient to display a single limit value. I also changed the font Size property to 10 and the ScrollAlwaysVisible property to True. Make sure the SelectionMode property value is One