Quick Start Tutorial

Step 1: Create a New Project

dotnet new winforms -n MyBeepApp
cd MyBeepApp
dotnet add package TheTechIdea.Beep.Winform.Controls

Step 2: Set Up BeepiFormPro as Your Main Form

Replace the default Form1 with BeepiFormPro for a modern custom-drawn window:

using TheTechIdea.Beep.Winform.Controls;
using TheTechIdea.Beep.Winform.Controls.Forms.ModernForm;
using TheTechIdea.Beep.Winform.Controls.ThemeManagement;

// MainForm.cs — inherit BeepiFormPro instead of Form
public class MainForm : BeepiFormPro
{
    public MainForm()
    {
        Text = "My Beep App";
        Size = new Size(800, 600);
        
        // Choose a form style (35+ available)
        FormStyle = FormStyle.Material;
    }
}

BeepiFormPro is a borderless, fully owner-drawn Form. It handles its own caption bar, close/min/max buttons, resizing, and DPI scaling. Each FormStyle value maps to a dedicated painter class (e.g., MaterialFormPainter, MacOSFormPainter, FluentFormPainter).

Step 3: Initialize Themes & Add Controls

In Program.cs, initialize BeepThemesManager which auto-discovers all IBeepTheme implementations via assembly reflection:

// Program.cs
using TheTechIdea.Beep.Winform.Controls.ThemeManagement;

static class Program
{
    [STAThread]
    static void Main()
    {
        ApplicationConfiguration.Initialize();
        
        // Auto-discovers all IBeepTheme classes from loaded assemblies
        BeepThemesManager.InitializeThemes();
        
        Application.Run(new MainForm());
    }
}

Then add themed controls to your form. All controls inherit from BaseControl and automatically respond to theme changes:

// Inside MainForm constructor
var button = new BeepButton();
button.Text = "Click Me";
button.Location = new Point(30, 100);
button.Size = new Size(160, 45);
button.ImagePath = "icons/check.svg";  // Images always by string path
button.Click += (s, e) => MessageBox.Show("Hello from Beep!");
Controls.Add(button);

var textBox = new BeepTextBox();
textBox.Location = new Point(30, 160);
textBox.Size = new Size(250, 35);
Controls.Add(textBox);

var label = new BeepLabel();
label.Text = "Welcome to Beep Controls";
label.Location = new Point(30, 210);
label.Size = new Size(300, 30);
Controls.Add(label);

Step 4: Run Your App

dotnet run

You should see a custom-drawn BeepiFormPro window with a Material-style caption bar, and all child controls themed consistently. Try changing FormStyle to FormStyle.MacOS, FormStyle.Fluent, or FormStyle.Cyberpunk to see different looks.

Understanding the Architecture

Here's what's happening under the hood:

• BaseControl — All controls inherit from this. It uses a Painter Strategy Pattern: OnPaint → EnsurePainter() → _painter.Paint(). The painter handles borders, backgrounds, and shadows; your control just renders content inside DrawingRect.
• BeepiFormPro — Custom Form with its own painter per FormStyle. Uses FormPainterMetrics for layout, BeepiFormProHitAreaManager for mouse hit testing, and BeepiFormProInteractionManager for button hover/press.
• BeepThemesManager — Static class that scans assemblies for IBeepTheme implementations. Fires ThemeChanged event which all controls listen to.
• BeepStyling — Central coordinator managing 130+ painter classes across 7 categories (Background, Border, Text, Shadow, SpinnerButton, Path, Image painters).

What's Next?

• Theming System — Deep dive into BeepThemesManager, IBeepTheme, and 27 design systems
• Basic Examples — Common control patterns (login forms, grids, tabs)
• Advanced Examples — FormStyle switching, painter kinds, custom controls