Images

Part 11 dbg

2

Images

• The form and several controls can display a number of different types of image files in the BackgroundImage Property.

• These images are displayed at their native size and may be tiled if necessary.

• Other controls, such as Buttons, can display a single copy of image at its native size.

Images

3

PictureBox Control

• The PictureBox control (pic prefix) is expressly designed for displaying a single image.

• Images with a file extension of .bmp, .gif, .jpg, .jpeg, .png, .ico can be displayed.

• Animated .gifs can be displayed, as well. • Images may be displayed in several modes

by changing the SizeMode property.

4

SizeMode Settings

• Normal: Image displayed from its upper left at normal size (but may not display fully).

• CenterImage: Image displayed with center aligned with center of the PictureBox (but may not display fully).

• AutoSize: Image displayed at normal size and PictureBox is resized to fit image (therefore may affect other controls on form).

5

SizeMode Settings

• StretchImage: Image is resized to fit the size and shape of the PictureBox but image may be distorted.

• Zoom: There is no distortion of Image; unused areas of PictureBox may remain because image is kept in correct proportion.

SizeMode

6

The Image Object

• An Image object can be used to determine the normal dimensions of an image stored in a file.

• Use the Height and Width properties to determine the aspect ratio of an image.

• This must be accomplished before setting the Height and Width Properties of a PictureBox used in the StretchImage mode—otherwise distortion will result.

AspectRatio

7

Panel • A Panel control is a container.• A Panel is like a GroupBox, except that it does

not have a Text Property (caption).• Panels can be used to organize other controls

such as radio buttons, check boxes, related buttons.– Add panel to form first.– Then add other controls to panel.

• A Panel can be drawn upon.• Use pnl prefix for a panel.

Graphics and Drawing

9

3 Step Process to Draw

1. Create a Graphics object using the CreateGraphics() method.

2. Instantiate a Pen or Brush to draw with.3. Use some of the drawing methods of the

Graphics object.

10

Graphics Object

• Any form or control that can create a Graphics object supports drawing.

• Forms, Panels, and PictureBoxes are most often used as drawing surfaces.

• To create a Graphics object for a Form:Graphics gr = this.CreateGraphics();

11

Drawing Coordinates

• The ClientSize (part of form available for controls) of a Form is available as a drawing surface.

• Drawing coordinates begin with 0,0 in the upper left corner, measured in pixels.

• The maxima of the visible drawing coordinates correspond to the ClientSize.Width (x pixels) and ClientSize.Height (y pixels).

12

The Drawing Area

Clie

ntS

ize.

Hei

ght

ClientSize.Width

X = 0 pixels, Y = 0 pixels

13

Drawing and Filling• Lines and “open” shapes are drawn with a

Pen object.• Solid and patterned shapes are filled with a

Brush object.• You can specify the color and width for a

Pen. If you do not specify a width, the default width is one pixel.

• You specify the color for a Brush, and you declare what type of Brush by declaring SolidBrush, HatchBrush, etc.

14

Drawing a Line

• Use the DrawLine() method of the Graphics object.

• The arguments for this method include the pen to be used and the coordinates of the ends of the lines, expressed in pixels.

DrawLine

15

Clearing the Graphics Object

• Any pixels drawn on the Graphics object can be “erased” with its Clear() method.

• The Clear() method requires an argument to set the color of the pixels after they are cleared.

• Normally, the pixels are reset to the default BackColor of the form or control.gr.Clear(this.Backcolor);

16

Pen Width

• When you instantiate a new Pen, you are able to control both the color and line width.

• Pen penName = new Pen(Color.Red, 4);

CustomPens

FlexiblePen

17

DrawRectangle()

• Draw a rectangle by stating the Pen, the coordinates of the upper left vertex, the width and the height.

• Note that if height and width are equal a square will be drawn.

DrawRectangle

18

DrawEllipse()

• Regard an ellipse as a conic section that is inscribed within a rectangle.

• Again, state the Pen to be used, the starting coordinates, the width and the height of a rectangle; an ellipse will be inscribed within the rectangle.

• Note that if the height and width are equal a circle will be drawn.

DrawEllipse

19

FillRectangle()

• Use the FillRectangle() method of the Graphics object with a Brushes.color object.gr.FillRectangle(Brushes.Blue, 0,0,50,100);

FillRectangle

20

FillEllipse()

• Use the FillEllipse() method of the Graphics object with a Brushes.color object.gr.FillEllipse(Brushes.Red, 0,0,50,100);

FillEllipse

21

DrawString()

• Although it is often easiest to add text to a window using a Label, there are special situations that may call for writing directly on the Client area.

• DrawString() uses a number of arguments to render a string of text using an indicated size and style of a font, starting at a given set of coordinates.

• A Font object must be instantiated for DrawString().

DrawString

22

Centering a Shape

• Knowing the ClientSize Height and Width properties and the height and width of a regular drawn shape allows simple calculations to center the shape.

• If the desired center point and radius of a circle are known, calculating the “starting coordinates” and the width is also trivial.

CenterCircle

CenterShape