Create a 3D Rectangular button in C# using GDI+

Manish Dalal

DateTime:
04-Apr-2009
01:08

Hi All,

Today, while discussing some improvements in user interface with one of my clients, I came across an idea to generate a 3D looking button that can be pushed and then retracted.

I started to write the sample code and came out with the following 3D buttons. This was just a matter of 30 minutes and I was ready with these buttons. The buttons are shown below:

When the user clicks on the button, it changes its state, from pushed to retracted and from retracted state to the pushed one. The user is able to only click on the area of the button and not above it. This is achieved by changing the control region.

The button's region is changed in the Paint event of the control based on whether the button is pushed or not. The sample code of the button is give below:

using System.Drawing;
using System.Drawing.Drawing2D;
class pushButton
{
    ...
	bool _IsPushed = false;
	public bool IsPushed
	{
	   get
	   {
	      return _IsPushed;
	   }
	   set
	   {
	      if(_IsPushed != value)
		  {
		     _IsPushed = value;
			 this.Invalidate();
		  }
	   }
	}
	
	protected override void OnPaint(PaintEventArgs e)
	{
	   int downShift = 0;
	   if(IsPushed)
 	      downShift = 25;
      
	   GraphicsPath gp = new GraphicsPath();
	   gp.AddLine(35, downShift, this.Width - 1, downShift);
	   gp.AddLine(this.Width - 1, downShift, this.Width - 1, this.Height - 36);
	   gp.AddLine(this.Width - 1, this.Height - 36, this.Width - 36, this.Height - 1);
	   gp.AddLine(this.Width - 36, this.Height - 1, 0, this.Height - 1);
	   gp.AddLine(0, this.Height - 1, 0, 35 + downShift);
	   gp.AddLine(0, 35 + downShift, 35, downShift);
	   this.Region = new Region(gp);
	  
	   Graphics g = e.Graphics;
	   Pen p = new Pen(this.ForeColor, 1);
	  
	   g.DrawLine(p, 0, 35 + downShift, this.Width - 36, 35 + downShift);
	   g.DrawLine(p, this.Width - 36, 35 + downShift, this.Width - 36, this.Height - 1);
 	   g.DrawLine(p, this.Width - 36, 36 + downShift, this.Width - 1, downShift);
	  
	   base.OnPaint(e);
	}
	
	protected override void OnMouseEnter(EventArgs e)
	{
	   this.Cursor = Cursors.Hand;
	   base.OnMouseEnter(e);
	}
	
	protected override void OnMouseLeave(EventArgs e)
	{
	   this.Cursor = Cursors.Default;
	   base.OnMouseLeave(e);
	}
					 

This is how the above code proceeds:

In the Paint event of the control (in fact, we override the method OnPaint, that raises the paint event), we check if the IsPushed variable is true or not. If the IsPushed variable is true, we set the value of downShift (local variable) to 25.

Then we define the Graphics path which comprises of the six sides of the button. The button path defines the outer boundary of the button control as shown in image below:

Then, a new Region object is created from the GraphicsPath object (gp) and assigned to the control's region property. This sets the region of the control based on our control's 'Pushed' state.

After that, we draw lines in the 3D pushable button by using DrawLine method of the Graphics object passed into the OnPaint method (through PaintEventArgs object 'e').

Thereafter, we write code for OnMouseEnter and OnMouseLeave events (in fact, the event raising methods are override) to change the cursor to hand when the mouse enters and back to normal when user leaves the control.

That's it, our pushable 3D control is ready.

What next? I'm interacting with designers to create a 3D button looks for this button with proper lighting effects and all.

A potentially dangerous Request.Form value was detected from the client.

Solution

Disable request validation at page level

Disable request validation at page level