13-1

aslkjdhfalskhjfgalsdkfhalskdhjfglaskdhjflaskdhjfglaksjdhflakshflaksdhjfglaksjhflaksjhfaslkjdhfalskhjfgalsdkfhalskdhjfglaskdhjflaskdhjfglaksjdhflakshflaksdhjfglaksjhflaksjhfaslkjdhfalskhjfgalsdkfhalskdhjfglaskdhjflaskdhjfglaksjdhflakshflaksdhjfglaksjhflaksjhfaslkjdhfalskhjfgalsdkfhalskdhjfglaskdhjflaskdhjfglaksjdhflakshflaksdhjfglaksjhflaksjhfaslkjdhfalskhjfgalsdkfhalskdhjfglaskdhjflaskdhjfglaksjdhflakshflaksdhjfglaksjhflaksjhfaslkjdhfalskhjfgalsdkfhalskdhjfglaskdhjflaskdhjfglaksjdhflakshflaksdhjfglaksjhflaksjhfaslkjdhfalskhjfgalsdkfhalskdhjfglaskdhjflaskdhjfglaksjdhflakshflaksdhjfglaksjhflaksjhfaslkjdhfalskhjfgalsdkfhalskdhjfglaskdhjflaskdhjfglaksjdhflakshflaksdhjfglaksjhflaksjhfaslkjdhfalskhjfgalsdkfhalskdhjfglaskdhjflaskdhjfglaksjdhflakshflaksdhjfglaksjhflaksjhfaslkjdhfalskhjfgalsdkfhalskdhjfglaskdhjflaskdhjfglaksjdhflakshflaksdhjfglaksjhflaksjhfaslkjdhfalskhjfgalsdkfhalskdhjfglaskdhjflaskdhjfglaksjdhflakshflaksdhjfglaksjhflaksjhfaslkjdhfalskhjfgalsdkfhalskdhjfglaskdhjflaskdhjfglaksjdhflakshflaksdhjfglaksjhflaksjhfaslkjdhfalskhjfgalsdkfhalskdhjfglaskdhjflaskdhjfglaksjdhflakshflaksdhjfglaksjhflaksjhfaslkjdhfalskhjfgalsdkfhalskdhjfglaskdhjflaskdhjfglaksjdhflakshflaksdhjfglaksjhflaksjhfaslkjdhfalskhjfgalsdkfhalskdhjfglaskdhjflaskdhjfglaksjdhflakshflaksdhjfglaksjhflaksjhfaslkjdhfalskhjfgalsdkfhalskdhjfglaskdhjflaskdhjfglaksjdhflakshflaksdhjfglaksjhflaksjhfaslkjdhfalskhjfgalsdkfhalskdhjfglaskdhjflaskdhjfglaksjdhflakshflaksdhjfglaksjhflaksjhfaslkjdhfalskhjfgalsdkfhalskdhjfglaskdhjflaskdhjfglaksjdhflakshflaksdhjfglaksjhflaksjhfaslkjdhfalskhjfgalsdkfhalskdhjfglaskdhjflaskdhjfglaksjdhflakshflaksdhjfglaksjhflaksjhfaslkjdhfalskhjfgalsdkfhalskdhjfglaskdhjflaskdhjfglaksjdhflakshflaksdhjfglaksjhflaksjhfaslkjdhfalskhjfgalsdkfhalskdhjfglaskdhjflaskdhjfglaksjdhflakshflaksdhjfglaksjhflaksjhfaslkjdhfalskhjfgalsdkfhalskdhjfglaskdhjflaskdhjfglaksjdhflakshflaksdhjfglaksjhflaksjhfaslkjdhfalskhjfgalsdkfhalskdhjfglaskdhjflaskdhjfglaksjdhflakshflaksdhjfglaksjhflaksjhfaslkjdhfalskhjfgalsdkfhalskdhjfglaskdhjflaskdhjfglaksjdhflakshflaksdhjfglaksjhflaksjhf

Graphics, Animation, Sound, and Drag-and-Drop

Chapter 1313

McGraw-Hill © 2006 The McGraw-Hill Companies, Inc. All rights reserved.

13-3

Objectives (1 of 2)

Use Graphics methods to draw shapes, lines, and filled shapes

Create a drawing surface with a Graphics objectInstantiate Pen and Brush objects as needed for

drawingCreate animation by changing pictures at run timeCreate simple animation by moving images

13-4

Objectives (2 of 2)

Use the Timer component to automate animationUse scroll bars to move an imageAdd a sound player component to add sound to a

projectIncorporate drag-and-drop events into your programDraw a pie chart using the methods of the Graphics

object

13-5

Graphics in Windows and the Web

Graphics refers to any text, drawing, image, or icon that is displayed on the screen in either:

Windows FormsPictureBox controlCan draw graphics shapes (circles, lines, rectangles) on

a form or controlAccepts more file formats than a Web Form

Web FormsImage control

13-6

The Graphics Environment

>NET framework uses GDI+ technology for drawing graphics

GDI+ is designed to be device-independentCode to draw a graphic is the same regardless of the

output device

13-7

Steps for Drawing Graphics

Create a Graphics object to use as a drawing surface

Instantiate a Pen or Brush object to draw with

Call the drawing methods from the Graphics object

13-8

The Paint Event Procedure

Place code for drawing methods in the Paint event procedure for the form or control

Graphics are redrawn every time form is repainted or rendered

Declare a Graphics objectAssign the Graphics property of the procedure's

PaintEventArgs argument to the new Graphics object

Private Sub Form1_Paint(ByVal sender As Object, _ ByVal e As System.Windows.Forms.PaintEventArgs) _

Handles Me.Paint' Create a graphics object.Dim gr As Graphics = e.Graphics

13-9

Pen and Brush Objects (1 of 2)

PenUse to draw lines or outlined shapes such as rectangles

or circlesProperties: Width, Color

BrushUse to create filled shapesProperty: Color

13-10

Pen and Brush Objects (2 pf 2)

Width propertySpecifies the width of the stroke of a line or

outlined shape created by Pen objectSpecified in pixelsDefault width = One pixel

Color propertySpecifies color of lines drawn by Pen object and

color of filled shapes drawn by Brush objectAssign color using Color constants

13-11

Graphic Shapes Drawn with Pen and Brush Objects

Drawn with Pen

Drawn with Brush

13-12

Constructors

Examples

The Pen Class

Pen(Color)Pen(Color, Width)

Dim redPen As New Pen(Color.Red)Dim widePen As New Pen(Color.Black, 10)

13-13

Constructor

Example

The SolidBrush Class

SolidBrush(Color)

Dim blueBrush As New SolidBrush(Color.Blue)

There are other Brush Classes:TextureBrush, HatchBrush, LinearGradientBrush, PathGradientBrush. See Help for more information.

13-14

The Coordinate System (1 of 2)

Graphics are measured from a starting point of 0,0 for the X and Y coordinates beginning in the upper-left corner

X represents the horizontal position and Y is the vertical position

The starting point depends on where the graphic is placed-each drawing method allows a specific starting position using X and Y coordinates

Most of the drawing methods allow the position to be specified using eitherPoint structureSize structure Rectangle structure

13-15

Form

PictureBox

0,0Position

On Form

0,0Position OnPictureBox

The Coordinate System (2 of 2)

13-16

The Point Structure

Designed to hold the X and Y coordinates as a single unit

Create a Point object and give it values for X and Y

Use the object anywhere that accepts a Point structure as an argument

Example

Dim myStartingPoint As New Point(20, 10)

13-17

The Size Structure

Two components, specified in pixelsWidth (specified first)Height

Use the object anywhere that accepts a Size structure as an argument

Example

Dim myPictureSize As New Size(100, 20) ‘Width is 100, height is 20

13-18

The Rectangle Structure

Defines a rectangular regionSpecified by

Upper left corner (X and Y coordinates )Size (width and height)

Use the object anywhere that accepts a Rectangle structure as an argument

Example

Dim myOtherRectangle As New Rectangle(xInteger, yInteger, _ widthInteger, heightInteger)

Dim myOtherRectangle As New Rectangle(myStartingPoint, myPictureSize

13-19

Graphics Methods

Two basic categories, draw and fill

Draw methods create an outline shape with a Pen object

Fill methods are solid shapes created with Brush objects

Each method requires X and Y coordinates or a Point object, some require the size

13-20

Graphics Methods – General Form

DrawLine(Pen, x1Integer, y1Integer, x2Integer, y2Integer) DrawLine(Pen, Point1, Point2)

DrawRectangle(Pen, xInteger, yInteger, widthInteger, heightInteger)DrawRectangle(Pen, Rectangle)

FillRectangle(Brush, xInteger, yInteger, widthInteger, heightInteger)FillRectangle(Brush, Rectangle)

FillEllipse(Brush, xInteger, yInteger, widthInteger, heightInteger)FillEllipse(Brush, Rectangle)

13-21

Graphics Methods – Code Example

Private Sub graphicsForm_Paint(ByVal sender As Object, _ ByVal e As System.Windows.Forms.PaintEventArgs) _ Handles MyBase.Paint Dim gr As Graphics = e.Graphics ' Create a graphics object. Dim redPen As New Pen(Color.Red) gr.DrawRectangle(redPen, 10, 10, 30, 30) ' Draw a red rectangle.

gr.DrawLine(redPen, 50, 0, 50, 300) ' Draw a red line. Dim blueBrush As New SolidBrush(Color.Blue)

gr.FillEllipse(blueBrush, 100, 100, 50, 50) ' Draw a blue filled circle.

Dim widePen As New Pen(Color.Blue, 15)gr.DrawLine(widePen, 300, 0, 300, 300) ' Draw a fat blue line.

End Sub

13-22

Selected Methods from the Graphics Class

ClearDisposeDrawArcDrawLineDrawEllipseDrawRectangle

DrawPie DrawStringFillEllipseFillPieFillRectangle

See Help for information for all draw and fill methods

13-23

Random Numbers

Random class contains methods to return random numbers of different data types

To generate a different series for each run, use an integer value when instantiating an object from the Random class (seeding the random number generator)

Can use system date to get different seed for each execution of code

Generate random numbers using the Random object’s Next method

13-24

The Random.Next Method

General Form

Examples

' Any positive integer number.Object.Next( )' A positive integer up to the value specified.Object.Next(maximumValueInteger)' A positive integer in the range specified.Object.Next(minimumValueInteger, maximumValueInteger)

' Return an integer in the range 0 – 10.randomInteger = generateRandom.Next(10)' Return an integer in the range 0 to the width of the form.randomNumberInteger = generateRandom.Next(1, Me.Width)

13-25

Simple Animation

Possible approachesDisplay an animated .gif file in a PictureBoxReplace one graphic with anotherMove a pictureRotate through a series of picturesCreate graphics with various graphics methods

On a Web page display animated .gif files or use a scripting language or Java Applets and avoid roundtrips to the server

13-26

Displaying an Animated Graphic

Animation is achieved on either a Windows Form or a Web Form by displaying an animated.gif file

Use a PictureBox control on a Windows Form and an Image control on a Web Form

13-27

Controlling Pictures at Run Time

Pictures can be added or changed at run timeTo speed execution, load pictures in controls that can

be made invisible and set Visible property to True at run time

Use the FromFile Method to load a picture at run timeRequires file name and pathStore image files in Bin folder to eliminate need for path

To remove a picture from the display, either hide or use the Nothing constant

13-28

Switching Images

Easy way to show animation is to replace one picture with another

Use images (or icons) of similar sizes

May use images (or icons) with opposite states (open/closed, on/off, etc.)--

13-29

Creating Animation

Each of the graphics is placed into the upper picture box when the user clicks the Change button

13-30

Moving a Picture

Change the Left and Top properties

--OR--, betterUse the control's SetBounds Method which produces

a smoother-appearing move

13-31

Use to move a control or change its sizeGeneral Form

Examples

SetBounds Method

SetBounds(xInteger, yInteger, widthInteger, heightInteger)

Me.planePictureBox.SetBounds(xInteger, yInteger, planeWidth, planeHeight)Me.enginePictureBox.SetBounds(xInteger, yInteger, widthInteger,

heightInteger)

13-32

Cause events to occur at a set interval with its Tick event

Useful for animation; move or change an image each time the Tick event occurs

Set value at run time or design time

The Timer Component (1 of 2)

13-33

The Timer Component (2 of 2)

Interval propertyBetween 0 and 65,535 milliseconds1,000 milliseconds = 1 second

Enabled propertyFalse (default) ==> Do not run Tick eventTrue ==> Run Tick event at designated interval

Tick eventOccurs each time the Timer's designated interval

elapses, if Enabled = True

13-34

The Scroll Bar Controls

Horizontal scroll bars Vertical scroll barsUse to scroll through a

document or a windowUse to control items that

have a range of values such as sound level, color, or size

Can be changed in small or large increments

13-35

Scroll Bar Properties (1 of 3)

Together represent a range of valuesMinimum

Minimum value

MaximumMaximum value

SmallChangeDistance to move when user clicks scroll arrows

LargeChangeDistance to move when user clicks gray area of scroll

bar or presses Page-Up or Page-Down keys

13-36

Scroll Bar Properties (2 of 3)

Gray Area(LargeChange property)

Scroll Box(Value property)

Scroll Arrow(SmallChange property)

Maximum value(Maximum property)

Minimum value(Minimum property)

13-37

Scroll Bar Properties (3 of 3)

Value PropertyIndicates the current position of the

scroll box and the corresponding valuewithin the scroll bar

User clicks up Scroll ArrowValue property decreases by the amount of the

SmallChange unless Minimum has been reached User clicks down Scroll Arrow

Value property increases by the amount of the SmallChange unless Maximum has been reached

13-38

Scroll Bar Events

ValueChanged eventOccurs anytime the Value property changes, by user

action or in codeScroll event

Occurs when user drags the scroll boxAs long as user continues to drag scroll box this event

continues to occurOnly when user releases scroll box will Scroll event

cease and ValueChanged event occur

13-39

The SoundPlayer Component

Programs play sounds files, called wave files (.wav) using the new My.Computer.Audio.Play

--OR--A SoundPlayer componentThe component’s SoundLocation property gives the

location of the file

13-40

Adding Sounds Files

When using sounds in a project the best way is to add the files to the project’s resources

To refer to the filename in code, use My.Resources.Filename

13-41

A Sound-Playing Program

Users can choose to play one of the preselected sounds or select a file to play

File types are restricted using the filter property

13-42

Drag-and-Drop Programming (1 of 2)

Often Windows users use drag-and-drop events rather than selecting a menu item or pressing a button

Drag-and-drop programming requires that a user begin the drag-drop with a MouseDown event

Determine the effect of the drop with a DragEnter event

The event that holds the code for the drop is the DragDrop event

13-43

Drag-and-Drop Programming (2 of 2)

The Source object is dragged to the Target object in a drag-and-drop operation

13-44

The Source Object

The item chosen to drag With .NET programming begin a drag-drop operation

by setting the source object using a control’s DoDragDrop method

The DragDrop effect specifies the requested action; choices inlcude DragDropEffects.Copy, DragDropEffects.Move, and DragDropEffects.None

General Form Example

ObjectName.DoDragDrop(DataToDrag, DesiredDragDropEffect)

13-45

The Target Object

Location at which a user releases the mouse, a drop, is the target

Forms may have multiple targetsTo set a control to be a target, set its AllowDrop

property to TrueTarget control needs

DragEnter procedure that sets the effect DragDrop event procedure that executes the action to

take and when the drop takes place

13-46

The DragEnter Event

When a user drags a source object over the target, the target control’s DragEnter event fires

The argument is defined as DragEventArgs—which has special properties for the drag operation

13-47

The DragDrop Event

Statements to perform additional functions are added to the DragDrop event

Data that is being dragged is contained in the Data property of the argument of the DragDrop event procedure

Retrieve the dragged data using the GetData method of the Data object

Format the data or use a predefined clipboard data format