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
Slide 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 Applications GUI in WPF 27.5 Constructing
the Painter Application
Slide 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
Slide 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
Slide 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.
Slide 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
Slide 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
Slide 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
Slide 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.)
Slide 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
Slide 11
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)
Slide 12
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.
Slide 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 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.
Slide 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.)
Slide 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
Slide 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.
Slide 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 controls element is highlighted in the XAML window
XAML window Customize the Design and XAML windows layout WPF
Properties window
Slide 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
Slide 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
Slide 20
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
Slide 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
Slide 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
Slide 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.
Slide 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.)
Slide 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
Slide 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
Slide 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
Slide 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
Slide 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
Slide 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.)
Slide 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
Slide 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.)
Slide 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
Slide 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.
Slide 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.
Slide 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.)
Slide 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.)
Slide 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.)
Slide 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.
Slide 40
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.)
Slide 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
Slide 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 Canvass background color 27.5
Constructing the Painter Application (Cont.)
Slide 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 applications ACE table. (Part 1 of 2.)
Action/Control/Event (ACE) Table for the Painter Application
Slide 44
2009 Pearson Education, Inc. All rights reserved. 44 Figure
27.28 | Painter applications ACE table. (Part 2 of 2.)
Action/Control/Event (ACE) Table for the Painter Application
(Cont.)
Slide 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.
Slide 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.)
Slide 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
Slide 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
Slide 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.)
Slide 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.)
Slide 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 Ellipses color, width and height Setting the Ellipses
position on the Canvas Adding the Ellipse to the Canvas
Slide 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 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.
Slide 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.
Slide 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.)
Slide 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
Slide 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.)
Slide 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
Slide 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
Slide 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.)
Slide 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.)
Slide 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
Slide 62
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
Slide 63
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
Slide 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.)
Slide 65
2009 Pearson Education, Inc. All rights reserved. 65 Erasing
the Canvas (Cont.) Figure 27.46 | Enabling and disabling erasing.
Enable erasing Disable erasing
Slide 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 Canvass background color
Slide 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
Slide 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.)
Slide 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.)
Slide 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 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
Slide 71
2009 Pearson Education, Inc. All rights reserved. 71 Outline (2
of 2 ) Creating the Blue RadioButton
Slide 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
Slide 73
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
Slide 74
2009 Pearson Education, Inc. All rights reserved. 74 Outline (3
of 7 )
Slide 75
2009 Pearson Education, Inc. All rights reserved. 75 Outline (4
of 7 ) Retrieve the mouse pointers position relative to the Canvas
at the time of the MouseMove event
Slide 76
2009 Pearson Education, Inc. All rights reserved. 76 Outline (5
of 7 ) Changing the brushColor to Red when the Red RadioButton is
selected
Slide 77
2009 Pearson Education, Inc. All rights reserved. 77 Outline (6
of 7 )
Slide 78
2009 Pearson Education, Inc. All rights reserved. 78 Outline (7
of 7 )