How To Draw Shapes Inside Panel Control In Winforms Using Visual studio 2017

INTRODUCTION

In this article I am going to explain how to draw shapes inside the panel control in Windows Forms applications using Visual Studio 2017. In this project I used panel control and ListBox Control to draw shapes inside the form.

STEP 1

Lets start the Project. Open Visual studio 2017--->New project--->Wndows Forms Application and name it as the drawing on the panel control

STEP2

By default, the designer page will be loaded. Drag and drop panel control and ListBox Control from the Toolbox onto the form in Visual Studio 2017.

LISTBOX CONTROL

The ListBox Control enables you to display a list of items to the user that the user can select by Clicking. ListBox stores several text items. It can interact with other controls, including button and TextBox controls. In addition to display and selection functionality, the ListBox also provides features that enable you to efficiently add items to the ListBox and to find text within the items of the list. You can use the add or insert method to add items to a ListBox.The add method adds new items at the end of the unsorted ListBox. Here, I added two items like a circle and a rectangle for displaying their shapes within the form.

PANEL CONTROL

Panel creates a group of controls.This control provides a simple frame for putting sub controls inside.These SubControls include buttons and textboxes. It furthur provides an optional border and ways to change its visibility.

Sub Controls in Panel:The entire point of the panel is to provide a visual and logical grouping for controls.To add some control, drag them to the inner part of the panel in Visual Studio. Here panel control is used to display the shapes given in the ListBox.

STEP 3 - Coding

Follow the code given below in the Screenshot. When the circle is clicked in the ListBox the shape of the circle should be displayed on the panel. When the rectangle is clicked in the ListBox the shape of the rectangle should be displayed on the panel .

public partial class Form1 : Form
{
int x;
int y;
public Form1()
{
InitializeComponent();
}
private void panel_click(object sender, MouseEventArgs e)
{
Point p = new Point(e.X, e.Y);
x = p.X;
y = p.Y;
panel1.Invalidate();
}
private void panel1_Paint(object sender, PaintEventArgs e)
{
Graphics g = panel1.CreateGraphics();
Pen p = new Pen(Color.Black);
if(listBox1.SelectedIndex==0)
{
SolidBrush sb = new SolidBrush(Color.Red);
g.DrawEllipse(p, x - 50, y - 50, 100, 100);
g.FillEllipse(sb, x - 50, y - 50, 100, 100);
}
if (listBox1.SelectedIndex == 1)
{
SolidBrush sb = new SolidBrush(Color.Blue);
g.DrawRectangle(p, x - 50, y - 50, 100, 100);
g.FillRectangle(sb, x - 50, y - 50, 100, 100);
}
}
}

OUTPUT

Compile and run the code.The following output will be obtained as given below in the screenshot.When the circle is clicked, the shape of the circle is displayed in the panel. When the rectangle is clicked, the shape of the rectangle is displayed in the panel.

SUMMARY

I hope this article is interesting. If there is any problem with the code or any errors feel free to comment below. I will try to solve the problem.

1 Comment

Join the conversation! Your thoughts help the community grow.

david vara6y ago
Private void Form1_Paint(object sender, PaintEventArgs e) { for (int m = 0; m < 101; m++) { Pen greenPen = new Pen(Color.Green, 3); Point point1 = new Point(400 - m / 2, 200); Point point2 = new Point(500, 100); Point point3 = new Point(600 + m / 2, 200); Point point4 = new Point(500, 300); Point point5 = new Point(400 - m / 2, 200); Point[] curvePoints = { point1, point2, point3, point4, point5 }; e.Graphics.DrawCurve(greenPen, curvePoints); this.Refresh(); } } // why the figure it is not same right side and left side?