Custom Controls - potatoscript/csharp GitHub Wiki

πŸ₯” Custom Controls in C# πŸ₯”

🎯 What is a Custom Control?

Imagine you have a special potato-shaped button πŸ₯” that looks and works differently from a regular button. This button can have cool potato-themed features like a little potato image on it or a unique color when clicked.

A custom control in C# is just like that. It's a reusable, specialized component that you can create to extend the built-in controls (like buttons, text boxes, and labels). You can design it to look and behave exactly the way you want, like making a fancy mashed potato button!

πŸ₯” Why Use Custom Controls?

You might want to use custom controls when:

  • You need a unique appearance or behavior that normal controls can’t provide.
  • You want to reuse the same custom control in many parts of your app.
  • You want to create user-friendly and themed controls for things like a potato-themed form.

🎨 Creating a Custom Control

Let’s create a simple custom control called PotatoButton, which behaves like a normal button but has a potato background and text style. 🌟πŸ₯”

🎁 Step 1: Create a New Custom Control

  1. Right-click on your project in the Solution Explorer.
  2. Select Add β†’ New Item.
  3. Choose Class and name it PotatoButton.cs.
  4. Change the class to inherit from Button.
using System;
using System.Windows.Forms;
using System.Drawing;

namespace PotatoApp
{
    public class PotatoButton : Button
    {
        public PotatoButton()
        {
            // Set a default background color to make it look potato-y
            this.BackColor = Color.Brown;
            this.ForeColor = Color.White;
            this.Font = new Font("Comic Sans MS", 12);
        }

        // Override OnPaint method to draw a potato-shaped button
        protected override void OnPaint(PaintEventArgs pevent)
        {
            base.OnPaint(pevent);

            // Draw a potato-shaped button with rounded edges
            Graphics g = pevent.Graphics;
            Brush brush = new SolidBrush(this.BackColor);
            g.FillEllipse(brush, 0, 0, this.Width, this.Height);

            // Draw the button text
            g.DrawString(this.Text, this.Font, Brushes.White, new PointF(this.Width / 4, this.Height / 4));
        }
    }
}

πŸ₯” Explanation:

  • The PotatoButton class inherits from the Button class, which means it behaves like a button but can have custom features.
  • In the constructor (PotatoButton()), we set the background color to brown, which looks like a potato πŸ₯”, and the font to something fun.
  • In the OnPaint method, we draw a potato-shaped button using FillEllipse (because potatoes are round-ish!). We also draw the text inside the button.

🎁 Step 2: Use the Custom Control on Your Form

  1. Now that we have a custom control, let's add it to a form.
  2. Drag the PotatoButton class to your form or create an instance programmatically.
public partial class MainForm : Form
{
    public MainForm()
    {
        InitializeComponent();

        // Create a PotatoButton and add it to the form
        PotatoButton potatoButton = new PotatoButton();
        potatoButton.Text = "Click Me!";
        potatoButton.Size = new Size(200, 100);
        potatoButton.Location = new Point(100, 100);
        this.Controls.Add(potatoButton);
    }
}

πŸ§‘β€πŸ’» Complete Example:

using System;
using System.Windows.Forms;
using System.Drawing;

namespace PotatoApp
{
    public class PotatoButton : Button
    {
        public PotatoButton()
        {
            this.BackColor = Color.Brown;
            this.ForeColor = Color.White;
            this.Font = new Font("Comic Sans MS", 12);
        }

        protected override void OnPaint(PaintEventArgs pevent)
        {
            base.OnPaint(pevent);
            Graphics g = pevent.Graphics;
            Brush brush = new SolidBrush(this.BackColor);
            g.FillEllipse(brush, 0, 0, this.Width, this.Height);
            g.DrawString(this.Text, this.Font, Brushes.White, new PointF(this.Width / 4, this.Height / 4));
        }
    }

    public partial class MainForm : Form
    {
        public MainForm()
        {
            InitializeComponent();
            PotatoButton potatoButton = new PotatoButton();
            potatoButton.Text = "Click Me!";
            potatoButton.Size = new Size(200, 100);
            potatoButton.Location = new Point(100, 100);
            this.Controls.Add(potatoButton);
        }
    }
}

πŸ₯” Handling Events in Custom Controls

Now, let's add an event to our PotatoButton. Let’s say when the PotatoButton is clicked, it displays a potato-themed message.

🎁 Step 1: Create a Custom Event

You can handle the Click event just like any other button. But let’s create a special event for this custom button!

public event EventHandler PotatoButtonClicked;

protected override void OnClick(EventArgs e)
{
    base.OnClick(e);
    PotatoButtonClicked?.Invoke(this, e);
}

πŸ§‘β€πŸ’» Explanation:

  • We added an event called PotatoButtonClicked, which is triggered when the button is clicked.
  • When the button is clicked, the OnClick method is called, and it invokes the PotatoButtonClicked event if there are any subscribers to it.

🎁 Step 2: Handle the Custom Event in the Form

Now, let’s subscribe to this event in your MainForm and show a potato message when the button is clicked.

public partial class MainForm : Form
{
    public MainForm()
    {
        InitializeComponent();
        PotatoButton potatoButton = new PotatoButton();
        potatoButton.Text = "Click Me!";
        potatoButton.Size = new Size(200, 100);
        potatoButton.Location = new Point(100, 100);

        // Subscribe to the custom event
        potatoButton.PotatoButtonClicked += PotatoButton_Clicked;

        this.Controls.Add(potatoButton);
    }

    private void PotatoButton_Clicked(object sender, EventArgs e)
    {
        MessageBox.Show("Potato button clicked! πŸ₯”");
    }
}

πŸ§‘β€πŸ’» Complete Example with Custom Event:

using System;
using System.Windows.Forms;
using System.Drawing;

namespace PotatoApp
{
    public class PotatoButton : Button
    {
        public event EventHandler PotatoButtonClicked;

        public PotatoButton()
        {
            this.BackColor = Color.Brown;
            this.ForeColor = Color.White;
            this.Font = new Font("Comic Sans MS", 12);
        }

        protected override void OnPaint(PaintEventArgs pevent)
        {
            base.OnPaint(pevent);
            Graphics g = pevent.Graphics;
            Brush brush = new SolidBrush(this.BackColor);
            g.FillEllipse(brush, 0, 0, this.Width, this.Height);
            g.DrawString(this.Text, this.Font, Brushes.White, new PointF(this.Width / 4, this.Height / 4));
        }

        protected override void OnClick(EventArgs e)
        {
            base.OnClick(e);
            PotatoButtonClicked?.Invoke(this, e);
        }
    }

    public partial class MainForm : Form
    {
        public MainForm()
        {
            InitializeComponent();
            PotatoButton potatoButton = new PotatoButton();
            potatoButton.Text = "Click Me!";
            potatoButton.Size = new Size(200, 100);
            potatoButton.Location = new Point(100, 100);

            // Subscribe to the custom event
            potatoButton.PotatoButtonClicked += PotatoButton_Clicked;

            this.Controls.Add(potatoButton);
        }

        private void PotatoButton_Clicked(object sender, EventArgs e)
        {
            MessageBox.Show("Potato button clicked! πŸ₯”");
        }
    }
}

πŸ₯” Custom Control Styling

You can customize the look of your PotatoButton even further. You could change the shape, the background image, or even add animations!

For example, you could add a potato image to the button:

public PotatoButton()
{
    this.BackgroundImage = Image.FromFile("potatoImage.png");
    this.BackgroundImageLayout = ImageLayout.Stretch;
    this.ForeColor = Color.White;
}

πŸ₯” Summary of Custom Controls

  • Custom controls are like building your own potato-themed buttons and other components.
  • You can create unique looks and behaviors for controls that normal buttons can’t do.
  • You can also handle events for your custom controls, like showing a potato message when clicked.