How to: Draw Shapes with the OvalShape and RectangleShape Controls (Visual Studio)

08/03/2014

5 分钟可看完

本文内容

You can use the OvalShape control to draw circles or ovals on a form or container, both at design time and at run time. You can use the RectangleShape control to draw squares, rectangles, or rectangles with rounded corners on a form or container. You can also use this control to draw shapes both at design time and at run time.

You can customize the appearance of a shape by changing the width, color, and style of the border. The background of a shape is transparent by default; you can customize the background to display a solid color, a pattern, a gradient fill (transitioning from one color to another), or an image.

To draw a simple shape at design time

Drag the OvalShape or RectangleShape control from the Visual Basic PowerPacks tab (to install, see Visual Basic Power Packs Controls)in the Toolbox to a form or container control.

Drag the sizing and move handles to size and position the shape.

You can also size and position the shape by changing the Size and Position properties in the Properties window.

To create a rectangle with rounded corners, select the CornerRadius property in the Properties window and set it to a value that is greater than 0.

In the Properties window, optionally set additional properties to change the appearance of the shape.

To draw a simple shape at run time

On the Project menu, click Add Reference.

In the Add Reference dialog box, select Microsoft.VisualBasic.PowerPacks.VS, and then click OK.

In the Code Editor, add an Imports or using statement at the top of the module:

Imports Microsoft.VisualBasic.PowerPacks

using Microsoft.VisualBasic.PowerPacks;

Add the following code in an Event procedure:

Dim canvas As New ShapeContainer

' To draw an oval, substitute

' OvalShape for RectangleShape.

Dim theShape As New RectangleShape

' Set the form as the parent of the ShapeContainer.

canvas.Parent = Me

' Set the ShapeContainer as the parent of the Shape.

theShape.Parent = canvas

' Set the size of the shape.

theShape.Size = New System.Drawing.Size(200, 300)

' Set the location of the shape.

theShape.Location = New System.Drawing.Point(100, 100)

' To draw a rounded rectangle, add the following code:

theShape.CornerRadius = 12

ShapeContainer canvas = new ShapeContainer();

// To draw an oval, substitute

// OvalShape for RectangleShape.

RectangleShape theShape = new RectangleShape();

// Set the form as the parent of the ShapeContainer.

canvas.Parent = this;

// Set the ShapeContainer as the parent of the Shape.

theShape.Parent = canvas;

// Set the size of the shape.

theShape.Size = new System.Drawing.Size(200, 300);

// Set the location of the shape.

theShape.Location = new System.Drawing.Point(100, 100);

// To draw a rounded rectangle, add the following code:

theShape.CornerRadius = 12;

Customizing Shapes

When you use the default settings, the OvalShape and RectangleShape controls are displayed with a solid black border that is one pixel wide and a transparent background. You can change the width, style, and color of the border by setting properties. Additional properties enable you to change the background of a shape to a solid color, a pattern, a gradient fill, or an image.

Before you change the background of a shape, you should know how several of the properties interact.

The BackColor property setting has no effect unless the BackStyle property is set to Opaque.

If the FillStyle property is set to Solid, the FillColor overrides the BackColor.

If the FillStyle property is set to a pattern value such as Horizontal or Vertical, the pattern will be displayed in the FillColor. The background will be displayed in the BackColor, provided that the BackStyle property is set to Opaque.

In order to display a gradient fill, the FillStyle property must be set to Solid and the FillGradientStyle property must be set to a value other than None.

Setting the BackgroundImage property to an image overrides all other background settings.

To draw a circle that has a custom border

Drag the OvalShape control from the Visual Basic PowerPacks tab in the Toolbox to a form or container control.

In the Properties window, in the Size property, set Height and Width to equal values.

Set the BorderColor property to the color that you want.

Set the BorderStyle property to any value other than Solid.

Set the BorderWidth to the size that you want, in pixels.

To draw a circle that has a solid fill

Drag the OvalShape control from the Visual Basic PowerPacks tab in the Toolbox to a form or container control.

In the Properties window, in the Size property, set Height and Width to equal values.

Set the BackColor property to the color that you want.

Set the BackStyle property to Opaque.

To draw a circle that has a patterned fill

Drag the OvalShape control from the Visual Basic PowerPacks tab in the Toolbox to a form or container control.

In the Properties window, in the Size property, set Height and Width to equal values.

Set the BackColor property to the color that you want for the background.

Set the BackStyle property to Opaque.

Set the FillColor property to the color that you want for the pattern.

Set the FillStyle property to any value other than Transparent or Solid.

To draw a circle that has a gradient fill

Drag the OvalShape control from the Visual Basic PowerPacks tab in the Toolbox to a form or container control.

In the Properties window, in the Size property, set Height and Width to equal values.

Set the FillColor property to the color that you want for the starting color.

Set the FillGradientColor property to the color that you want for the ending color.

Set the FillGradientStyle property to a value other than None.

To draw a circle that is filled with an image

Drag the OvalShape control from the Visual Basic PowerPacks tab in the Toolbox to a form or container control.

In the Properties window, in the Size property, set Height and Width to equal values.

Select the BackgroundImage property and click the ellipsis button (...).

In the Select Resource dialog box, select an image to display. If no image resources are listed, click Import to browse to the location of an image.

Click OK to insert the image.

See Also

Tasks

Reference

Concepts