6-How to create a component from a menu button

In this post, we will upgrade the Test Diagram project to allow a user to create a component (shape) from a button and display it on the schematicCanvas. Time for some architectural changes to the project:

• Create a component class called Comp.cs that can draw a shape in a Draw() method
• Define the Pen for the shape in the component class
• Add a list of components attribute in the form code to store newly created shapes
• Add a button in the form main menu panel with handler to create a new component and add it to the form component list.
• Add a foreach iterator in the paint event to "loop" over the component list and call each components Draw() method

Add a new class to the TestDiagram project called Comp.cs:

using System;
using System.Collections.Generic;
using System.Drawing;
 
namespace TestDiagram
{
    public class Comp
    {
        Pen pen = new Pen(Color.Black);
 
        public Comp()
        {
 
        }
 
        public void Draw(Graphics gr)
        {
            // Draw a simple rectangle with black border and no fill color
            gr.DrawRectangle(pen, 100, 100, 100, 100);
        }
    }
}

Note that the pen for drawing the rectangle is included in the class as an attribute. The constructor is not necessary but I always create one. The Draw method passes the graphic variable to the class and draws the rectangle. Super simple class at this stage of the design.

Next add a button to the TestDiagram main menu panel:

• Text: Create Component
• Size: Resize to show the text
• Name: btnCreateComponent

Double click on the button to create a Click event handler. When the button is clicked, a new component is instantiated and added to the component list.

Next modify the main form code as follows:

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Drawing;
using System.Windows.Forms;
 
namespace TestDiagram
{
    public partial class TestDigramMainForm : Form
    {
        // The grid spacing.
        public const int grid_gap = 10;
 
        // Create a component list
        List<Comp> comps = new List<Comp>();
 
        public TestDigramMainForm()
        {
            InitializeComponent();
        }
 
        /* **************************** Grid & Snap Methods **************************** */
        private void DrawBackgroundGrid()
        {
            Bitmap bm = new Bitmap(
                2000,
                2000);
            for (int x = 0; x < 2000; x += grid_gap)
            {
                for (int y = 0; y < 2000; y += grid_gap)
                {
                    bm.SetPixel(x, y, Color.Black); //Color.Black);
                }
            }
            schematicCanvas.BackgroundImage = bm;
        }
 
        private void schematicCanvas_Resize(object sender, EventArgs e)
        {
            DrawBackgroundGrid();
        }
 
        private void schematicCanvas_Paint(object sender, PaintEventArgs e)
        {
            foreach(Comp comp in comps)
            {
                comp.Draw(e.Graphics);
            }
        }
 
        private void btnCreateComponent_Click(object sender, EventArgs e)
        {
            Comp comp = new Comp();
            comps.Add(comp);
        }
    }
}

First, a List of type Comp is defined to store dynamically created components. Then, in the Paint event, a foreach loop iterates over the component list and calls the Draw() method for each component.

Run the program and resize the window to show the Rectangle. Why doesn't the rectangle show up before the window is resized? We need to tell the form to repaint when the component is created. We do this by adding the line schematicCanvas.Invalidate() at the end of the create component button event handler. This tells the system that a new graphic has been created and to draw it on the next update.

Run the program again, click the create component button and note that the rectangle is drawn immediately and anytime the form is resized.