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 Declaring a Graphics object Figure 21.6 Declaring a Graphics object.

12. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 12 21.4 Handling the MouseDown Event Figure 21.7 Creating a Graphics object.

13. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 13 21.4 Handling the MouseDown Event Generating the MouseDown event handler –Events Button on Properties window –Double-click MouseDown property

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 Creating a MouseDown event handler. MouseDown property

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 MouseDown event handler generated for FrmPainter. MouseEventArgs argument

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

17. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 17 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

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 General ellipse. (x,y) WidthBounding rectangle Height

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

20. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 20 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

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

22. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 22 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

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

24. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 24 21.5 Handling the MouseUp Event Generating the MouseUp event handler –Events Button on Properties window –Double-click MouseUp property

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

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

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

28. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 28 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

29. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 29 21.5 Handling the MouseUp Event Figure 21.17 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

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

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

32. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 32 21.6 Handling the MouseMove Event Altering the MouseDown event handler –Delete the code from the previous version of the application –Add line 100 of Fig. 21.19 to the MouseDown event handler to set m_blnShouldPaint to true 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 Figure 21.19 Setting m_blnShouldPaint to true. Allow drawing when mouse button is pressed

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

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

36. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 36 21.6 Handling the MouseMove Event Generating the MouseMove event handler –Events Button on Properties window –Double-click MouseUp property

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

38. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 38 21.6 Handling the MouseMove Event Adding code to the MouseMove handler –Add lines 117-123 from Fig 21.22 to the handler If m_blnShouldPaint is true, draw a BlueViolet circle on the Form If m_blnShouldPaint is false, nothing is drawn

39. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 39 21.6 Handling the MouseMove Event Figure 21.22 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

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

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

42. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 42 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

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

44. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 44 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

45. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 45 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

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 Setting m_blnShouldErase to false when a mouse button is released. Disabling erasing when a mouse button is released

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

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

49. Outline © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 49 Painter.cs (2 of 6)

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

51. Outline © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 51 Painter.cs (4 of 6) The Button property specifies which button was pressed The MouseButtons enumeration specifies constants for the mouse button

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

53. Outline © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 53 Painter.cs (6 of 6)