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

  • Article

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

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

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

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

To draw a simple shape at run time

  1. On the Project menu, click Add Reference.

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

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

    Imports Microsoft.VisualBasic.PowerPacks

    using Microsoft.VisualBasic.PowerPacks;

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

To draw a circle that has a custom border

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

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

  3. Set the BorderColor property to the color that you want.

  4. Set the BorderStyle property to any value other than Solid.

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

To draw a circle that has a solid fill

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

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

  3. Set the BackColor property to the color that you want.

  4. Set the BackStyle property to Opaque.

To draw a circle that has a patterned fill

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

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

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

  4. Set the BackStyle property to Opaque.

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

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

To draw a circle that has a gradient fill

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

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

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

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

  5. Set the FillGradientStyle property to a value other than None.

To draw a circle that is filled with an image

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

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

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

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

  5. Click OK to insert the image.

See Also

Tasks

How to: Draw Lines with the LineShape Control (Visual Studio)

Reference

OvalShape

RectangleShape

Concepts

Introduction to the Line and Shape Controls (Visual Studio)