Chapter 13

Graphics, Animation, Sound, and

Drag-and-Drop

Copyright © 2011 by The McGraw-Hill Companies, Inc. All Rights Reserved.McGraw-Hill

13-2

Objectives (1 of 2)

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

• Create a drawing surface with a Graphics object.

• Instantiate Pen and Brush objects as needed for drawing.

• Create animation by changing pictures at run time.

• Create simple animation by moving images.

13-3

Objectives (2 of 2)

• Use the Timer component to automate animation.

• Use scroll bars to move an image.

• Add a sound player component to add sound to a project.

• Incorporate drag-and-drop events into your program.

• Draw a pie chart using the methods of the Graphics object.

13-4

Graphics in Windows and the Web

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

–Windows Forms

• PictureBox control

• Can draw graphics shapes (circles, lines, rectangles) on a form or control

• Accepts more file formats than a Web Form

–Web Forms

• Image control

13-5

The Graphics Environment

• >NET framework uses GDI+ technology for drawing graphics.

• GDI+ is designed to be device-independent.

• Code to draw a graphic is the same regardless of the output device.

13-6

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

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

• Assign 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-8

Pen and Brush Objects (1 of 2)

• Pen

• Used to draw lines or outlined shapes such as rectangles or circles

• Properties: Width, Color

• Brush

• Used to create filled shapes

• Property: Color

13-9

Pen and Brush Objects (2 of 2)

• Width property• Specifies the width of the stroke of a line or

outlined shape created by Pen object

• Specified in pixels

• Default width = One pixel

• Color property• Specifies color of lines drawn by Pen object and

color of filled shapes drawn by Brush object

• Assigns color using Color constants

13-10

Graphic Shapes Drawn with Pen and Brush Objects

Drawn with Pen

Drawn with Brush

13-11

The Pen Class

• Constructors

• Examples

Pen(Color)Pen(Color, Width)

Dim RedPen As New Pen(Color.Red)Dim WidePen As New Pen(Color.Black, 10)

13-12

The SolidBrush Class

• Constructor

• Example

SolidBrush(Color)

Dim BlueBrush As New SolidBrush(Color.Blue)

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

13-13

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 either

• Point structure• Size structure • Rectangle structure

13-14

The Coordinate System (2 of 2)

Form

PictureBox

0,0Position

On Form

0,0Position OnPictureBox

13-15

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

The Size Structure

• Two components, specified in pixels• Width (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-17

The Rectangle Structure

• Defines a rectangular region

• Specified 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 MyRectangle As New Rectangle(MyStartingPoint, MyPictureSize)

13-18

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

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

Graphics Methods — Code Example

Private Sub GraphicsForm_Paint(ByVal sender As Object, _ ByVal e As System.Windows.Forms.PaintEventArgs) _ Handles Me.Paint With e.Graphics Dim SmallRectangle as New Rectangle(10, 10, 30, 30).DrawRectangle(Pens.Red, SmallRectangle).DrawLine(Pens.Green, 50, 0, 50, 300)' Draw a blue filled circle.' If the width and height are equal, then the FillEllipse method' draws a circle; otherwise it draws an ellipse..FillEllipse(Brushes.Blue, 100, 100, 50, 50)' Draw a fat blue line..DrawLine(New Pen(Color.Blue, 15), 300, 0, 300, 300)End WithEnd Sub

13-21

Selected Methods from the Graphics Class

• Clear( )

• Dispose( )

• DrawArc( )

• DrawLine( )

• DrawEllipse( )

• DrawRectangle( )

• DrawPie( )

• DrawString( )

• FillEllipse( )

• FillPie( )

• FillRectangle( )

See Help for information for all draw and fill methods

13-22

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

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.GenerateRandomInteger = GenerateRandom.Next(10)' Return an integer in the range 0 to the width of the form.RandomNumberInteger = GenerateRandom.Next(1, Me.Width)

13-24

Simple Animation

• Possible approaches• Display an animated .gif file in a PictureBox.• Replace one graphic with another.• Move a picture.• Rotate through a series of pictures.• Create graphics with various graphics methods.

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

13-25

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

Controlling Pictures at Run Time

• Pictures can be added or changed at run time.

• To 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 time.

• Requires file name and path

• Store 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-27

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

Creating Animation

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

13-29

Moving a Picture

• Change the Left and Top properties

--OR--, better

• Use the control's SetBounds Method, which produces a smoother-appearing move.

13-30

SetBounds Method

• Used to move a control or change its size

• General Form

• Examples

SetBounds(XInteger, YInteger, WidthInteger, HeightInteger)

PlanePictureBox.SetBounds(XInteger, YInteger, PlaneWidthInteger, PlaneHeight)Integer

EnginePictureBox.SetBounds(xInteger, YInteger, WidthInteger, HeightInteger)

13-31

The Timer Component (1 of 2)

• Causes 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

• Sets value at run time or design time

13-32

The Timer Component (2 of 2)

• Interval property

• Between 0 and 65,535 milliseconds

• 1,000 milliseconds = 1 second

• Enabled property

• False (default) ==> Do not run Tick event

• True ==> Run Tick event at designated interval

• Tick event

• Occurs each time the Timer's designated interval elapses, if Enabled = True

13-33

The Scroll Bar Controls

• Horizontal scroll bars • Vertical scroll bars• Used to scroll through a

document or a window• Used 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-34

Scroll Bar Properties (1 of 3)

• Together represent a range of values

• Minimum–Minimum value

• Maximum–Maximum value

• SmallChange–Distance to move when user clicks scroll arrows

• LargeChange–Distance to move when user clicks gray area of scroll

bar or presses Page-Up or Page-Down keys

13-35

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

Scroll Bar Properties (3 of 3)

• Value Property

• Indicates the current position of thescroll box and the corresponding valuewithin the scroll bar

• User clicks up Scroll Arrow.–Value 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-37

Scroll Bar Events

• ValueChanged event

• Occurs anytime the Value property changes, by user action or in code

• Scroll event

• Occurs when user drags the scroll box

• As long as user continues to drag scroll box, this event continues to occur.

• Only when user releases scroll box will Scroll event cease and ValueChanged event occur.

13-38

The SoundPlayer Component

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

--OR--

• A SoundPlayer component.

• The component’s SoundLocation property gives the location of the file.

13-39

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

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

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

Drag-and-Drop Programming (2 of 2)

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

13-43

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 include DragDropEffects.Copy, DragDropEffects.Move, and DragDropEffects.None.

• General Form Example

ObjectName.DoDragDrop(DataToDrag, DesiredDragDropEffect)

13-44

The Target Object

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

• Forms may have multiple targets.

• To set a control to be a target, set its AllowDrop property to True.

• Target control needs

• DragEnter procedure that sets the effect

• DragDrop event procedure that executes the action to take and when the drop takes place

13-45

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

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.