1. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 1 Tutorial 21 - “Cat and Mouse” Painter Application Introducing the Graphics Object and Mouse Events Outline 21.1 Test-Driving the Painter Application 21.2 Constructing the Painter Application 21.3 Using a Graphics Object 21.4 Handling the MouseDown Event 21.5 Handling the MouseUp Event 21.6 Handling the MouseMove Event 21.7 Distinguishing Between Mouse Buttons 21.8 Wrap-Up

2. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 2 Objectives In this tutorial, you will learn to: –Use mouse events to allow user interaction with an application. –Handle MouseDown, MouseUp, and MouseMove events. –Use the Graphics object to draw circles on the Form. –Determine which mouse button was pressed.

3. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 3 21.1 Test-Driving the Painter Application

4. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 4 21.1 Test-Driving the Painter Application Opening the completed Painter application –Double click Painter.sln –Debug > Start

5. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 5 21.1 Test-Driving the Painter Application Figure 21.1 Painter application before drawing.

6. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 6 21.1 Test-Driving the Painter Application Figure 21.2 Drawing on the Painter application’s Form. Drawing lines composed of small, colored circles

7. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 7 21.1 Test-Driving the Painter Application Figure 21.3 Drawing a cat and a computer mouse on the Form.

8. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 8 21.1 Test-Driving the Painter Application Figure 21.4 Erasing part of the drawing. Erasing by drawing circles that are the same color as the Form ’s background

9. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 9 21.2 Constructing the Painter Application

10. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 10 21.3 Using a Graphics Object Creating a Graphics object –Use the Form ’s CreateGraphics method

11. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 11 21.3 Using a Graphics Object Creating a Graphics object Figure 21.6 Declaring a Graphics reference.

12. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 12 21.4 Handling the MouseDown Event Generating the MouseDown event handler –Select Base Class Events from the Class Name ComboBox –Select MouseDown from the Method Name ComboBox

13. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 13 21.4 Handling the MouseDown Event Figure 21.7 Creating a MouseDown event handler. Class Name ComboBox with ( Base Class Events ) selected Select MouseDown Method Name ComboBox

14. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 14 21.4 Handling the MouseDown Event Figure 21.8 MouseDown event handler generated for FrmPainter. MouseEventArgs argument

15. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 15 21.4 Handling the MouseDown Event Figure 21.9 Adding code to the MouseDown event handler. Using the Graphics object to draw a colored circle

16. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 16 21.4 Handling the MouseDown Event Drawing on the Form whenever a mouse button is clicked –FillEllipse method Pass a Brush object, which is used to fill the shape with colors –Color of Brush is specified in call to constructor Pass x- and y- coordinates Pass height and width of ellipse

17. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 17 21.4 Handling the MouseDown Event Figure 21.10 General ellipse. (x,y) WidthBounding box Height

18. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 18 21.4 Handling the MouseDown Event Figure 21.11 Selecting a color by using Intellisense. Type Color followed by a dot (. ) to access Intellisense

19. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 19 21.4 Handling the MouseDown Event Run the application –Debug > Start –Note that a blue-violet dot is drawn when the mouse button is pressed over the Form

20. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 20 21.4 Handling the MouseDown Event Figure 21.12 Running the application.

21. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 21 21.5 Handling the MouseUp Event Adding a second diameter –Declare a second constant that stores the diameter of a smaller circle –A circle with this diameter will be drawn when the mouse button is released

22. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 22 21.5 Handling the MouseUp Event Figure 21.13 Declaring a constant for use in the MouseUp event handler. Using a constant to store a circle’s diameter

23. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 23 21.5 Handling the MouseUp Event Add the event handler –Select Base Class Events –Select MouseUp to generate the MouseUp event handler

24. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 24 21.5 Handling the MouseUp Event Figure 21.14 MouseUp empty event handler. MouseUp event handler after commenting and formatting

25. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 25 21.5 Handling the MouseUp Event Drawing a circle when the user releases a button –MouseUp circles have half the diameter of MouseDown circles

26. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 26 21.5 Handling the MouseUp Event Figure 21.15 MouseUp event handler code. Drawing a green circle with half the diameter of the blue-violet circle

27. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 27 21.5 Handling the MouseUp Event Running the application – Debug > Start –BlueViolet circle is drawn when you press any mouse button and a Green circle is drawn when it is released

28. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 28 21.5 Handling the MouseUp Event Figure 21.16 Running the application. Pressing the mouse button and releasing it without moving the mouse pointer Pressing mouse button, then releasing after moving pointer Drawing a flower using only MouseUp and MouseDown event handlers

29. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 29 21.6 Handling the MouseMove Event Add a Boolean variable –Declare and initialize the Boolean variable m_blnShouldPaint –m_blnShouldPaint is True when any mouse button is held down

30. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 30 21.6 Handling the MouseMove Event Figure 21.17 Boolean instance variable m_blnShouldPaint is declared and set to False. Declaring and setting an instance variable to control painting

31. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 31 21.6 Handling the MouseMove Event Altering the MouseDown event handler –Delete the code from the previous version of the application –Add line 60 of Fig. 21.18 to the MouseDown event handler to set m_blnShouldPaint to True when mouse button is pressed

32. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 32 21.6 Handling the MouseMove Event Figure 21.18 Setting m_blnShouldPaint to True. Allow drawing when mouse button is pressed

33. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 33 21.6 Handling the MouseMove Event Altering the MouseUp event handler –Delete the code from the previous version of this application –Add line 69 of Fig. 21.19 to the MouseUp event handler to set m_blnShouldPaint to False

34. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 34 21.6 Handling the MouseMove Event Figure 21.19 Setting m_blnShouldPaint to False. Disable drawing when mouse button is released

35. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 35 21.6 Handling the MouseMove Event Adding the MouseDown event handler –Select Base Class Events from the Class Name ComboBox –Select MouseMove

36. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 36 21.6 Handling the MouseMove Event Figure 21.20 MouseMove empty event handler. MouseMove event handler after commenting and formatting

37. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 37 21.6 Handling the MouseMove Event Adding code to the MouseMove handler –Add lines 78-82 from Fig 21.21 to the handler If m_blnShouldPaint is True, draw a BlueViolet circle on the Form If m_blnShouldPaint is False, nothing is drawn

38. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 38 21.6 Handling the MouseMove Event Figure 21.21 MouseMove event handler draws circles on the Form if a mouse button is held down. Drawing a circle when the mouse moves and a mouse button is pressed

39. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 39 21.7 Distinguishing Between Mouse Buttons Add another Boolean variable –m_blnShouldErase determines whether the mouse should act like an eraser

40. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 40 21.7 Distinguishing Between Mouse Buttons Figure 21.22 Boolean instance variable m_blnShouldErase is declared and set to False. Declaring and setting an instance variable to control erasing

41. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 41 21.7 Distinguishing Between Mouse Buttons Determining which mouse button was pressed –MouseButtons enumeration Defines constants for 3 mouse buttons: Right, Left, and M iddle –Change MouseDown event handler If left button is pressed m_blnShouldPaint becomes True If right button is pressed m_blnShouldErase becomes True

42. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 42 21.7 Distinguishing Between Mouse Buttons Figure 21.23 Determining which mouse button was pressed. Using the Button property to enable drawing Using the Button property to enable erasing

43. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 43 21.7 Distinguishing Between Mouse Buttons Changing the MouseUp event handler –Both Boolean instance variable are set to False –No drawing or erasing allowed when mouse button is not pressed

44. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 44 21.7 Distinguishing Between Mouse Buttons Changing the MouseMove event handler –m_blnShouldPaint is True Draw a BlueViolet circle –m_BlnShouldErase is True Draw a circle with the same color as the background –Use the Form ’s BackColor property

45. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 45 21.7 Distinguishing Between Mouse Buttons Figure 21.24 Setting m_blnShouldErase to False when a mouse button is released. Disabling erasing when a mouse button is released

46. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 46 21.7 Distinguishing Between Mouse Buttons Figure 21.25 Changing the MouseMove event handler to allow erasing. Drawing circles if right mouse button is pressed while the mouse moves Erasing by drawing circles with the Form ’s background color

47. Outline © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 47 Painter.vb (1 of 3)

48. Outline © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 48 Painter.vb (2 of 3) Property Button specifies which button was pressed Enumeration MouseButtons specifies constants for the mouse button

49. Outline © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 49 Painter.vb (3 of 3) Method FillEllipse used to draw a BlueViolet ellipse Create a Brush with the Form ’s background color