T U T O R I A L 2009 Pearson Education, Inc. All rights reserved. 1 27 Painter Application...

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 Applications GUI in WPF 27.5 Constructing the Painter Application

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

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

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.

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

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

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

2009 Pearson Education, Inc. All rights reserved. 11 Windows Presentation Foundation (WPF) is Microsofts 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)

2009 Pearson Education, Inc. All rights reserved. 12 27.3 XAML (Extensible Application Markup Language) WPF uses XAMLExtensible 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.

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 documents structure. XML documents delimit elements with start tags and end tags. An elements start and end tags enclose text that represents a piece of data. XML documents must have one root element.

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.)

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

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.

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 controls element is highlighted in the XAML window XAML window Customize the Design and XAML windows layout WPF Properties window

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

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

2009 Pearson Education, Inc. All rights reserved. 20 Modifying the Window and Grid Controls Modify a controls properties by editing the attributes in the XAML or using the Properties window. Change the Windows 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 Windows title Windows Title property

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

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

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.

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.)

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

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

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

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

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.)

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.)

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

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.

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.

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.)

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.)

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.

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

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

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 Canvass background color 27.5 Constructing the Painter Application (Cont.)

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 applications ACE table. (Part 1 of 2.) Action/Control/Event (ACE) Table for the Painter Application

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.

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.)

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

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

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.)

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.)

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 Ellipses color, width and height Setting the Ellipses position on the Canvas Adding the Ellipse to the Canvas

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 ellipses 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.

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.

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.)

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

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.)

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

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

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.)

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.)

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

2009 Pearson Education, Inc. All rights reserved. 62 This event handler (Fig. 27.44) executes each time the user moves the mouse while its 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

2009 Pearson Education, Inc. All rights reserved. 63 Instance variable shouldErase (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

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.)

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 Canvass background color

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

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.)

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.)

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 elements 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

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

T U T O R I A L 2009 Pearson Education, Inc. All rights reserved. 1 27 Painter Application...

Documents

Transcript of T U T O R I A L 2009 Pearson Education, Inc. All rights reserved. 1 27 Painter Application...