How to: Draw Shapes with the OvalShape and RectangleShape Controls (Visual Studio)
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
How to: Draw Lines with the LineShape Control (Visual Studio)