Monday, January 22, 2007

Custom Gradient Button with hover Effect C#.NET

Any one create a gradient button with this example. Which have hover effect
class CustomButton:Button
{
#region Fields
private Color _StartColor;
private Color _EndColor;
private Color _StartHoverColor;
private Color _EndHoverColor;
private bool bMouseHover;
private Brush _paintBrush;
private PointF _centerPoint;
StringFormat _sf = new StringFormat();
#endregion
#region Properties
public Color StartColor
{
get
{
return _StartColor;
}
set
{
if (value == Color.Empty)
{
_StartColor = Color.FromArgb(251,250,249);
}
else
{
_StartColor = value;
}
}
}
public Color StartHoverColor
{
get
{
return _StartHoverColor;
}
set
{
if (value == Color.Empty)
{
_StartHoverColor =Color.White;
}
else
{
_StartHoverColor = value;
}
}
}
public Color EndHoverColor
{
get
{
return _EndHoverColor;
}
set
{
if (value == Color.Empty )
{
_EndHoverColor = Color.FromArgb(255,255,207) ;
}
else
{
_EndHoverColor = value;
}
}
}
public Color EndColor
{
get
{
return _EndColor;
}
set
{
if (value == Color.Empty)
{
_EndColor = Color.FromArgb(224,220,207);
}
else
{
_EndColor = value;
}
}
}
#endregion
#region Constructor
public CustomButton()
{
InitializeComponent();
bMouseHover = false;
_sf.Alignment = StringAlignment.Center;
_sf.FormatFlags = StringFormatFlags.DirectionRightToLeft;
}
#endregion
#region Methods
private void OnMouseEnter(object sender, System.EventArgs e)
{
bMouseHover = true;
Invalidate();
}
private void OnMouseLeave(object sender, System.EventArgs e)
{
bMouseHover = false;
Invalidate();
}
private void InitializeComponent()
{
this.MouseEnter += new System.EventHandler(this.OnMouseEnter);
this.MouseLeave += new System.EventHandler(this.OnMouseLeave);
}
protected override void OnPaint(PaintEventArgs pevent)
{
base.OnPaint(pevent);
Graphics g = pevent.Graphics;
if (bMouseHover == true)
{
_paintBrush = new LinearGradientBrush(this.ClientRectangle,this.StartHoverColor,this.EndHoverColor,LinearGradientMode.Vertical);
}
else
{
_paintBrush = new LinearGradientBrush(this.ClientRectangle, this.StartColor, this.EndColor, LinearGradientMode.Vertical);
}
g.FillRectangle(_paintBrush, this.ClientRectangle);
_paintBrush = new SolidBrush(this.ForeColor);
//this._centerPoint = new PointF((this.ClientRectangle.Left + this.ClientRectangle.Right) / 2,
// (this.ClientRectangle.Top + this.ClientRectangle.Bottom) / 2);
this._centerPoint = new PointF(this.Width / 2, this.Height / 2);
g.DrawString(this.Text,this.Font,_paintBrush, _centerPoint.X, _centerPoint.Y-5, _sf);
paint_Border(pevent);
}
private void paint_Border(PaintEventArgs e)
{
if (e == null)
return;
if (e.Graphics == null)
return;
Pen pen = new Pen(this.ForeColor, 1);
Point[] pts = border_Get(0, 0, this.Width - 1, this.Height - 1);
e.Graphics.DrawLines(pen, pts);
pen.Dispose();
}
private Point[] border_Get(int nLeftEdge, int nTopEdge, int nWidth, int nHeight)
{
int X = nWidth;
int Y = nHeight;
Point[] points =
{
new Point(1 , 0 ),
new Point(X-1 , 0 ),
new Point(X-1 , 1 ),
new Point(X , 1 ),
new Point(X , Y-1),
new Point(X-1 , Y-1),
new Point(X-1 , Y ),
new Point(1 , Y ),
new Point(1 , Y-1),
new Point(0 , Y-1),
new Point(0 , 1 ),
new Point(1 , 1 )
};
for (int i = 0; i < points.Length; i++)
{
points[i].Offset(nLeftEdge, nTopEdge);
}
return points;
}
#endregion
}
Share:

2 comments:

  1. Great article, thanks.

    However, for a free out-of-the-box solution for gradient button, you can check out also http://www.sharppieces.com/free-aspnet-controls/GradientButton.aspx .

    ReplyDelete
  2. Good one I liked it

    ReplyDelete

Your feedback is very important to me. Please provide your feedback via putting comments.

About Me
My Photo

Full Stack Developer,Blogger,Microsoft Mvp, Mentor, Life long learner, 10+ Years of Experience for JavaScript, web and Microsoft technologies. ASP.NET MVC,Web Forms,C#,AngularJs,Golang
Mvp profile
Subscribe to my blog

Enter your email address:

Follow us on facebook
Blog Archive
Total Pageviews