Friday, October 1, 2010

C# Tutorial: Create a Glossy Button [Custom Controls]

Here is the code

// Import the Gdi32 DLL
[DllImport("Gdi32.dll",EntryPoint="CreateRoundRectRgn")]
// Import the Method from DLL. With this method you can create a Form with rounded corners
private static extern IntPtr CreateRoundRectRgn(int leftRect,int topRect, int rightRect, int bottomRect, int wEllipse, int hEllipse);
// Create a Pen that will draw the border of the button.
Pen p = new Pen(Color.Aqua);
// Configure the BtnText Property
[Description("The text associated with the control")]
[Category("Appearance")]
public string BtnText
{
    get
    {
        return label1.Text; 
    }
    set
    {
        label1.Text = value;
        label1.Location = new Point(this.Width / 2 - label1.Width / 2, this.Height / 2 - label1.Height / 2);  
    }
}
// Set the font of label1 through the Font Property of GlossyButton
public override Font Font
{
    get
    {
        return label1.Font;
    }
    set
    {
        label1.Font = value;
        // Center the label
        label1.Location = new Point(this.Width / 2 - label1.Width / 2, this.Height / 2 - label1.Height / 2);
    }
}

protected void onMouseEnter()
{
    p.Color = Color.Red; this.BackColor = Color.Firebrick; this.Invalidate(); 
}

protected void onMouseDown()
{
    this.BackColor = Color.Maroon; this.Invalidate();  
}

protected void NormalStyle()
{
    p.Color = Color.Aqua; this.BackColor = Color.DodgerBlue; this.Invalidate(); 
}

protected override void OnPaint(PaintEventArgs e)
{
    base.OnPaint(e);
    // Create the rounded corners for your form (in this case your button)
    this.Region = System.Drawing.Region.FromHrgn(CreateRoundRectRgn(0, 0, this.Width + 1, this.Height + 1, 3, 3));
    // Create a transparent white gradient
    LinearGradientBrush lb = new LinearGradientBrush(new Rectangle(0, 0, this.Width, this.Height), Color.FromArgb(150, Color.White), 

Color.FromArgb(50, Color.White), LinearGradientMode.Vertical);
    // Draw the gradient
    e.Graphics.FillRectangle(lb, 2, 2, this.Width - 6, this.Height / 2);
    // Draw the border
    e.Graphics.DrawRectangle(p, 0, 0, this.Width - 3, this.Height - 3);   
}
protected override void OnSizeChanged(EventArgs e)
{
    base.OnSizeChanged(e);
    // Center the label
    label1.Location = new Point(this.Width / 2 - label1.Width / 2, this.Height / 2 - label1.Height / 2);
}

protected override void OnMouseEnter(EventArgs e)
{
    base.OnMouseEnter(e); onMouseEnter();
}
protected override void OnMouseLeave(EventArgs e)
{
    base.OnMouseLeave(e); NormalStyle();
}
protected override void OnMouseDown(MouseEventArgs e)
{
    base.OnMouseDown(e); onMouseDown();
}
protected override void OnMouseUp(MouseEventArgs e)
{
    base.OnMouseUp(e); onMouseEnter();
}

private void label1_MouseEnter(object sender, EventArgs e)
{
    onMouseEnter();
}

private void label1_MouseLeave(object sender, EventArgs e)
{
    NormalStyle();
}

private void label1_MouseDown(object sender, MouseEventArgs e)
{
    onMouseDown();
}

private void label1_MouseUp(object sender, MouseEventArgs e)
{
    onMouseEnter();
}

Or download the solution

3 comments:

  1. Could you please upload a tutorial on how to make an analogue clock with C#(GUI)?

    ReplyDelete
  2. Excellent tutorial, all your vids are very good, thanks for sharing.

    About this tutorial, I've created my own GlossyButton but my issue is, when you pass the mouse over the label that is inside the button, the mouseover status is lost, how can I resolve this?

    Your help will be more than appreciated. Cheers!!

    P.S. Keep uploading your tutorials!!

    ReplyDelete