1. T U T O R I A L  2009 Pearson Education, Inc. All rights reserved. 1 27 Painter Application Introducing Graphics with Windows Presentation Foundation (WPF) and Mouse Events

2.  2009 Pearson Education, Inc. All rights reserved. 2 Outline 27.1 Test-Driving the Painter Application 27.2 Windows Presentation Foundation (WPF) 27.3 XAML (Extensible Application Markup Language) 27.4 Creating the Painter Application’s GUI in WPF 27.5 Constructing the Painter Application

3.  2009 Pearson Education, Inc. All rights reserved. 3 Outline 27.6 Handling the MouseLeftButtonDown Event 27.7 Handling the MouseLeftButtonUp Event 27.8 Handling the MouseMove Event 27.9 Handling Right Mouse Button Events 27.10 Select Colors with RadioButton s

4.  2009 Pearson Education, Inc. All rights reserved. 4 In this tutorial you will learn: ■Create a GUI using WPF. ■Handle mouse events. ■Use mouse events to allow user interaction with an application. ■Use the Ellipse object to draw circles on the Canvas. Objectives

5. Application Requirements  2009 Pearson Education, Inc. All rights reserved. 5 27.1 Test-Driving the Painter Application The principal of an elementary school wants to introduce computers to children by appealing to their creative side. Develop an application that allows the student to “paint” using the mouse. The application should draw when the user moves the mouse with the left mouse button held down and stop drawing when the left mouse button is released. The application draws many small circles side by side to trace out lines, curves and shapes. The user can select a color from the options presented as RadioButton s. The user can erase portions of the drawing by moving the mouse with the right mouse button held down.

6.  2009 Pearson Education, Inc. All rights reserved. 6 ■Run the completed Painter application (Fig. 27.1). Figure 27.1 | Painter application before drawing. Test-Driving the Painter Application

7.  2009 Pearson Education, Inc. All rights reserved. 7 ■Press and hold down the left mouse button to draw (Fig. 27.2). Figure 27.2 | Drawing in the Painter application. Test-Driving the Painter Application (Cont.) Drawing lines composed of small, colored circles

8.  2009 Pearson Education, Inc. All rights reserved. 8 ■Use the RadioButton s to change the color of the circles (Fig. 27.3). Figure 27.3 | Changing the color. Test-Driving the Painter Application (Cont.) Use the RadioButtons to select a color

9.  2009 Pearson Education, Inc. All rights reserved. 9 ■Draw an image (Fig. 27.4). Figure 27.4 | Drawing a cat and a computer mouse. Test-Driving the Painter Application (Cont.)

10.  2009 Pearson Education, Inc. All rights reserved. 10 ■Hold down the right mouse button and move the mouse pointer to erase (Fig. 27.5). Figure 27.5 | Erasing part of the drawing. Test-Driving the Painter Application (Cont.) Erasing by drawing circles that are the same color as the background

11.  2009 Pearson Education, Inc. All rights reserved. 11 ■Windows Presentation Foundation (WPF) is Microsoft’s new graphics framework. ■WPF is available on both Windows Vista and XP. ■WPF allows you to create powerful and flexible GUIs and to create media-rich experiences. ■Silverlight allows you to create WPF web-based applications. 27.2 Windows Presentation Foundation (WPF)

12.  2009 Pearson Education, Inc. All rights reserved. 12 27.3 XAML (Extensible Application Markup Language) ■WPF uses XAML–Extensible Application Markup Language. ■XAML is a form of XML (Extensible Markup Language). –XML allows markup (text-based data notation) for virtually any type of information. –XML describes data in a way that both human beings and computers can understand.

13.  2009 Pearson Education, Inc. All rights reserved. 13 Outline Player.xml ■Figure 27.6 is an example XML document. ■Elements such as firstName specify the document’s structure. ■XML documents delimit elements with start tags and end tags. –An element’s start and end tags enclose text that represents a piece of data. ■XML documents must have one root element.

14.  2009 Pearson Education, Inc. All rights reserved. 14 ■XML vocabularies, such as XAML, describe particular types of data in standardized ways. ■Using XAML to describe the user interface allows it to be interpreted by other applications. ■WPF provides many controls, some of which correspond directly to Windows Forms controls. ■The new WPF tools in Visual Studio are not yet as well developed as those for Windows Forms. 27.3 XAML (Extensible Application Markup Language) (Cont.)

15.  2009 Pearson Education, Inc. All rights reserved. 15 ■Select File > New Project…, then select WPF Application (Fig. 27.7). Figure 27.7 | Creating a WPF application. Creating a WPF Application Select the WPF Application template

16.  2009 Pearson Education, Inc. All rights reserved. 16 Creating a WPF Application (Cont.) ■At the top of the WPF Properties window (Fig. 27.8), you can set the name of the selected control or use a Search: TextBox. ■The Toolbox contains only the WPF controls.

17.  2009 Pearson Education, Inc. All rights reserved. 17 Figure 27.8 | Newly created WPF application in the IDE. Creating a WPF Application (Cont.) WPF Window Zoom slider WPF controls in the Toolbox Selected control’s element is highlighted in the XAML window XAML window Customize the Design and XAML windows’ layout WPF Properties window

18.  2009 Pearson Education, Inc. All rights reserved. 18 ■WPF uses a Window to contain the user interface. ■Select Tools > Options (Fig. 27.9). –Check Show all settings, and expand the Text Editor category. –Select the XAML category and check Line numbers. Creating a WPF Application (Cont.) Figure 27.9 | Displaying line numbers in the XAML window. Text Editor category expanded Line numbers CheckBox selected XAML category selected Show all settings CheckBox selected

19.  2009 Pearson Education, Inc. All rights reserved. 19 ■Every control is represented by an element in XAML. ■When you select a control in the designer, its corresponding XAML element is highlighted. ■The start tag of an element specifies its attributes, which set properties of the element. Creating a WPF Application (Cont.) Figure 27.10 | XAML representation of an empty WPF application. Window element Grid Element

20.  2009 Pearson Education, Inc. All rights reserved. 20 Modifying the Window and Grid Controls ■Modify a control’s properties by editing the attributes in the XAML or using the Properties window. ■Change the Window’s title (line 4) by setting the Title property to Painter (Fig. 27.11). Figure 27.11 | Changing the Window ’s title in XAML. Text updated in Window’s title Window’s Title property

21.  2009 Pearson Education, Inc. All rights reserved. 21 ■The default Grid contains a single row and column. ■Select the Grid control by clicking in the center of the Window (Fig. 27.12). Modifying the Window and Grid Controls (Cont.) Figure 27.12 | Selecting the Grid control. Grid control selected in designer Grid control selected in XAML

22.  2009 Pearson Education, Inc. All rights reserved. 22 ■Locate the Grid ’s ColumnDefinitions in the Properties window (Fig. 27.13). ■Try typing the name of the property in the Search: box. ■Click the Clear Button to restore the full list of properties. Modifying the Window and Grid Controls (Cont.) Figure 27.13 | Grid properties. ColumnDefinitions property Properties window Search: box

23.  2009 Pearson Education, Inc. All rights reserved. 23 ■Click the ellipsis to the right of the ColumnDefinitions property (Fig. 27.14). ■Click the Add Button twice, then click OK. Modifying the Window and Grid Controls (Cont.) Figure 27.14 | Collection Editor dialog for property ColumnDefinitions.

24.  2009 Pearson Education, Inc. All rights reserved. 24 ■Two Grid columns appear, separated by a thin blue line (Fig. 27.15). ■The columns’ XAML elements are nested between the Grid ’s start and end tags. –The ColumnDefinitions are child elements of the Grid control. –Single tags ending with /> are empty elements. Modifying the Window and Grid Controls (Cont.)

25.  2009 Pearson Education, Inc. All rights reserved. 25 Modifying the Window and Grid Controls (Cont.) Figure 27.15 | Two-column Grid layout container. Column 0 Column 1

26.  2009 Pearson Education, Inc. All rights reserved. 26 ■Drag the Canvas control from the Toolbox and drop it in the right column (Fig. 27.16). ■Use the Properties window to set its Margin to 0 on all sides and set the Name to paintCanvas. Adding the Painting Canvas Figure 27.16 | Canvas added to the Grid ’s right column. Margin indicator Canvas control Margin indicator

27.  2009 Pearson Education, Inc. All rights reserved. 27 ■With the Margin set to 0, the Canvas now expands to fill the entire cell (Fig. 27.17). ■The Grid.Column attribute determines the column in which the element is placed. Adding the Painting Canvas (Cont.) Figure 27.17 | Canvas with Margin and Name properties set. Updated Canvas element Canvas fills its entire Grid cell

28.  2009 Pearson Education, Inc. All rights reserved. 28 ■Drag a GroupBox control into the left column of the Grid (Fig. 27.18). Adding the Color Options Figure 27.18 | GroupBox added to the Grid spans both columns. GroupBox before setting its properties

29.  2009 Pearson Education, Inc. All rights reserved. 29 ■Set the Margin property to 3 and the Grid.ColumnSpan property to 1 in order to restrict it to the left column (Fig. 27.19). ■Also set the Name to colorGroupBox and the Header to Color. Adding the Color Options (Cont.) Figure 27.19 | GroupBox with properties set correctly GroupBox after setting its properties

30.  2009 Pearson Education, Inc. All rights reserved. 30 ■The GroupBox is a content control and may contain only one element. ■Drag a StackPanel into the GroupBox. –A StackPanel arranges its child elements vertically or horizontally. –Change the StackPanel ’s Width and Height to Auto. –Set the StackPanel ’s Name to colorStackPanel and its Margin to 3 (Fig. 27.20). Adding the Color Options (Cont.)

31.  2009 Pearson Education, Inc. All rights reserved. 31 Adding the Color Options (Cont.) Figure 27.20 | StackPanel added to the Color GroupBox. StackPanel inside a GroupBox

32.  2009 Pearson Education, Inc. All rights reserved. 32 ■Add four RadioButton controls to the StackPanel (Fig. 27.21). ■Set the Width and Height of each RadioButton to Auto and the Margin to 3. ■Set the Content properties to Red, Blue, Green and Black from top to bottom and set their Names according to their colors (e.g., redRadioButton ). Adding the Color Options (Cont.)

33.  2009 Pearson Education, Inc. All rights reserved. 33 Adding the Color Options (Cont.) Figure 27.21 | RadioButtons added to a StackPanel. RadioButtons displayed in the order in which they were added to the StackPanel

34.  2009 Pearson Education, Inc. All rights reserved. 34 ■Set the StackPanel ’s HorizontalAlignment property to Left and its VerticalAlignment to Top ■The StackPanel shrinks to the size required to fit its elements and aligns to the top left corner (Fig. 27.22). Adding the Color Options (Cont.) Figure 27.22 | StackPanel resized to fit its elements.

35.  2009 Pearson Education, Inc. All rights reserved. 35 ■Also set the GroupBox ’s HorizontalAlignment and VerticalAlignment properties to Left and Top, respectively (Fig. 27.23). Adding the Color Options (Cont.) Figure 27.23 | GroupBox resized to fit its elements.

36.  2009 Pearson Education, Inc. All rights reserved. 36 ■Open the Collection Editor by clicking the ellipsis next to the Grid ’s ColumnDefinitions property in the Properties window. ■Set the first ColumnDefinition ’s Width to Auto (Fig. 27.24) –This causes the column to resize automatically to fit its content. ■The Width property * enables a column to occupy all remaining space. Adding the Color Options (Cont.)

37.  2009 Pearson Education, Inc. All rights reserved. 37 Figure 27.24 | Setting column width with the Collection Editor dialog. Adding the Color Options (Cont.)

38.  2009 Pearson Education, Inc. All rights reserved. 38 ■Click OK to close the dialog. ■The second column expands to fill the available space (Fig. 27.25). Figure 27.25 | Grid columns resized to fit their content. Adding the Color Options (Cont.)

39.  2009 Pearson Education, Inc. All rights reserved. 39 ■Change the Background of the Window to Beige and the Background of the Canvas to White. ■Run the application. If you get an error regarding Option Strict, apply the suggested correction (Fig. 27.26). Demonstrating Layout Flexibility in WPF Figure 27.26 | Casting the application type to comply with Option Strict.

40.  2009 Pearson Education, Inc. All rights reserved. 40 ■Resize the running application’s Window —the column containing the Canvas expands and contracts to fill the remaining available Window space (Fig. 27.27). Figure 27.27 | Painter application’s GUI responding to Window resizing. Demonstrating Layout Flexibility in WPF (Cont.)

41.  2009 Pearson Education, Inc. All rights reserved. 41 When the left mouse button is pressed: Enable drawing When the right mouse button is pressed: Enable erasing When the left mouse button is released: Disable drawing When the right mouse button is released: Disable erasing 27.5 Constructing the Painter Application

42.  2009 Pearson Education, Inc. All rights reserved. 42 When the mouse is moved: If drawing is enabled Call method PaintCircle to draw a circle in the selected color at the position of the mouse pointer Else If erasing is enabled “Erase” by drawing a circle at the position of the mouse pointer in the Canvas’s background color 27.5 Constructing the Painter Application (Cont.)

43.  2009 Pearson Education, Inc. All rights reserved. 43 ■Use an ACE table to convert the pseudocode into Visual Basic (Fig. 27.28). Figure 27.28 | Painter application’s ACE table. (Part 1 of 2.) Action/Control/Event (ACE) Table for the Painter Application

44.  2009 Pearson Education, Inc. All rights reserved. 44 Figure 27.28 | Painter application’s ACE table. (Part 2 of 2.) Action/Control/Event (ACE) Table for the Painter Application (Cont.)

45.  2009 Pearson Education, Inc. All rights reserved. 45 ■Select the Window1.xaml file in the Solution Explorer and set its File Name to Painter.xaml. ■Right click the Painter project file in the Solution Explorer and select Properties. –Select Painter.xaml from the Startup URI: ComboBox (Fig. 27.29). Handling the MouseDown Event Figure 27.29 | Renaming the project files.

46.  2009 Pearson Education, Inc. All rights reserved. 46 ■Change the Window ’s Class attribute in the XAML to PainterWindow (Fig. 27.30). Figure 27.30 | Setting the Window ’s Class attribute. Handling the MouseDown Event (Cont.)

47.  2009 Pearson Education, Inc. All rights reserved. 47 ■In Code view, change the class name to PainterWindow (Fig. 27.31). ■Select paintCanvas from the Class Name ComboBox, then select MouseLeftButtonDown for the Method Name. Figure 27.31 | Creating a MouseLeftButtonDown event handler. Handling the MouseDown Event (Cont.) Class Name ComboBox with paintCanvas selected Method Name ComboBox with MouseLeftButtonDown selected

48.  2009 Pearson Education, Inc. All rights reserved. 48 ■This event is raised when the user presses the left mouse button while the mouse pointer is over paintCanvas (Fig. 27.32). Figure 27.32 | MouseLeftButtonDown event handler generated for paintCanvas. Handling the MouseDown Event (Cont.) MouseButtonEventArgs argument

49.  2009 Pearson Education, Inc. All rights reserved. 49 ■The MouseButtonEventArgs object contains information about the event, including the coordinates of the mouse pointer. ■Method GetPosition obtains a Point object representing the position of the mouse pointer over the Canvas. Handling the MouseDown Event (Cont.)

50.  2009 Pearson Education, Inc. All rights reserved. 50 ■The PaintCircle method (Fig. 27.33) paints a circle on the Canvas in the color represented by a Brush object. –A Brush is used to fill shapes with color. ■The Fill property of class Ellipse sets the color of the Ellipse. Handling the MouseDown Event (Cont.)

51.  2009 Pearson Education, Inc. All rights reserved. 51 Figure 27.33 | Drawing a circle on the Canvas. Handling the MouseDown Event (Cont.) Creating an Ellipse object to draw a colored circle Setting the Ellipse’s color, width and height Setting the Ellipse’s position on the Canvas Adding the Ellipse to the Canvas

52.  2009 Pearson Education, Inc. All rights reserved. 52 ■An object of class Ellipse draws an ellipse (Fig. 27.34). ■The dotted rectangle is known as the ellipse’s bounding box. Figure 27.34 | General ellipse. Handling the MouseDown Event (Cont.) Bounding box represented by the dashed rectangle ■The Children property is a collection of all the elements in the Canvas.

53.  2009 Pearson Education, Inc. All rights reserved. 53 ■Modify the paintCanvas_MouseLeftButtonDown event handler (Fig. 27.35). ■Line 32 retrieves the position of the mouse cursor relative to the control passed to the GetPosition method. Handling the MouseDown Event (Cont.) Figure 27.35 | Adding code to the MouseLeftButtonDown event handler.

54.  2009 Pearson Education, Inc. All rights reserved. 54 ■Run the application. ■Notice that a small black circle is drawn when the left mouse button is pressed (Fig. 27.36). Figure 27.36 | Running the application. Handling the MouseDown Event (Cont.)

55.  2009 Pearson Education, Inc. All rights reserved. 55 ■Select paintCanvas from the Class Name ComboBox, then select MouseLeftButtonUp from the Method Name ComboBox. ■This creates an event handler (Fig. 27.37). Figure 27.37 | MouseLeftButtonUp empty event handler. Handling the MouseUp Event MouseLeftButtonUp event handler after commenting and formatting

56.  2009 Pearson Education, Inc. All rights reserved. 56 ■The MouseLeftButtonUp event handler (Fig. 27.38) draws a green circle whenever the user releases the left mouse button. Figure 27.38 | MouseLeftButtonUp event handler code. Drawing a green circle Handling the MouseUp Event (Cont.)

57.  2009 Pearson Education, Inc. All rights reserved. 57 ■Run your application (Fig. 27.39). ■A Black circle is drawn when you press the left mouse button, and a Green circle is drawn when you release the left mouse button. Figure 27.39 | Running the application. Pressing the mouse button and releasing it without moving the mouse pointer Handling the MouseUp Event (Cont.) Pressing the mouse button, then releasing it after moving the pointer Drawing a flower using only MouseLeftButtonUp and MouseLeftButtonDown event handlers

58.  2009 Pearson Education, Inc. All rights reserved. 58 ■The Boolean instance variable shouldPaint (Fig. 27.40) will determine whether to draw on the Canvas. Figure 27.40 | Boolean instance variable shouldPaint is declared and set to False. Declaring and setting an instance variable to control painting Modifying the Painter Application

59.  2009 Pearson Education, Inc. All rights reserved. 59 ■Remove the code inside the MouseLeftButtonDown event handler (Fig. 27.41). ■Add line 34 to set shouldPaint to True. Figure 27.41 | Setting shouldPaint to True. Allow drawing when left mouse button is pressed Modifying the Painter Application (Cont.)

60.  2009 Pearson Education, Inc. All rights reserved. 60 ■Remove the code inside the MouseLeftButtonUp event handler (Fig. 27.42). ■Add line 43 to set shouldPaint to False. Figure 27.42 | Setting shouldPaint to False. Disable drawing when left mouse button is released Modifying the Painter Application (Cont.)

61.  2009 Pearson Education, Inc. All rights reserved. 61 ■Select paintCanvas from the Class Name ComboBox. ■Select MouseMove from the Method Name ComboBox to generate its event handler (Fig. 27.43). Adding the MouseMove Event Handler Figure 27.43 | MouseMove event handler after commenting and formatting MouseMove event handler after commenting and formatting

62.  2009 Pearson Education, Inc. All rights reserved. 62 ■This event handler (Fig. 27.44) executes each time the user moves the mouse while it’s over the Canvas. Adding the MouseMove Event Handler (Cont.) Figure 27.44 | MouseMove event handler draws a circle on the Canvas if left mouse button is held down. Drawing a circle when the mouse moves and the left mouse button is pressed

63.  2009 Pearson Education, Inc. All rights reserved. 63 ■Instance variable should­Erase (Fig. 27.45) specifies whether the mouse pointer should act like an eraser. Erasing the Canvas Figure 27.45 | Boolean instance variable shouldErase is declared and set to False. Declaring and setting an instance variable to control erasing

64.  2009 Pearson Education, Inc. All rights reserved. 64 ■Select paintCanvas from the Class Name ComboBox. ■Add event handlers for the MouseRightButtonDown and MouseRightButtonUp events (Fig. 27.46). Erasing the Canvas (Cont.)

65.  2009 Pearson Education, Inc. All rights reserved. 65 Erasing the Canvas (Cont.) Figure 27.46 | Enabling and disabling erasing. Enable erasing Disable erasing

66.  2009 Pearson Education, Inc. All rights reserved. 66 ■Replace the code in event handler paintCanvas_MouseMove (Fig. 27.47). Erasing the Canvas (Cont.) Figure 27.47 | 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 Canvas’s background color

67.  2009 Pearson Education, Inc. All rights reserved. 67 ■Instance variable brushColor (Fig. 27.48) specifies the color in which to draw circles. Choosing Colors with RadioButtons Figure 27.48 | Brush instance variable brushColor. Declaring and setting an instance variable to control erasing

68.  2009 Pearson Education, Inc. All rights reserved. 68 ■Double click the Red RadioButton to generate its event handler (Fig. 27.49). ■Add Checked event handlers for the remaining RadioButton s. Figure 27.49 | Changing the paint color. Set brushColor to Red Choosing Colors with RadioButtons (Cont.)

69.  2009 Pearson Education, Inc. All rights reserved. 69 ■Replace line 62 of the MouseMove event handler (Fig. 27.50). ■The application now uses brushColor to determine what color to paint in. Figure 27.50 | Painting with the selected color. Paint in the color specified by brushColor Choosing Colors with RadioButtons (Cont.)

70.  2009 Pearson Education, Inc. All rights reserved. 70 ■Figure 27.51 and Fig. 27.52 present the code for the Painter application. Outline (1 of 2 ) Root element of the XAML document Window element’s attributes correspond to properties Adding columns to the Grid Adding the Canvas on which to paint Using a StackPanel to vertically align RadioButtons in a GroupBox

71.  2009 Pearson Education, Inc. All rights reserved. 71 Outline (2 of 2 ) Creating the Blue RadioButton

72.  2009 Pearson Education, Inc. All rights reserved. 72 Outline (1 of 7 ) Brush used to specify the color used later to paint an Ellipse Create a new Ellipse object

73.  2009 Pearson Education, Inc. All rights reserved. 73 Outline (2 of 7 ) Set the color and size of the Ellipse Setting the Ellipse’s position on the Canvas Adding the Ellipse to the Canvas Handling the Canvas’s MouseLeftButtonDown event

74.  2009 Pearson Education, Inc. All rights reserved. 74 Outline (3 of 7 )

75.  2009 Pearson Education, Inc. All rights reserved. 75 Outline (4 of 7 ) Retrieve the mouse pointer’s position relative to the Canvas at the time of the MouseMove event

76.  2009 Pearson Education, Inc. All rights reserved. 76 Outline (5 of 7 ) Changing the brushColor to Red when the Red RadioButton is selected

77.  2009 Pearson Education, Inc. All rights reserved. 77 Outline (6 of 7 )

78.  2009 Pearson Education, Inc. All rights reserved. 78 Outline (7 of 7 )