Login Register






[C#] HC Glow Button filter_list
Author
Message
[C#] HC Glow Button #1
Alright, so the last button I posted was pretty basic, but I was going strictly by the style I seen on HC... And today I just noticed these buttons:

[Image: QV855C1.png]

And I decided to try to fully recreate these ones, as this is a bit more advanced. (*I could have trimmed out Linuxephus™'s username from the screenshot but I figured he/she might like the spotlight lol.)

Here's a *small* collection of some of the controls I have made so far most recently. (I've actually made much more than this, but for the project I am working on these are the ones I currently still have in my designer from since I wrote the code for them. I started working on more of an animated one in here.)
[Image: qoKJtyL.png]

(I am working on this right now... I had to post this so that I could see the first image as I accidentally saved over top of it when I created the second screenshot. This thread will be used as my visual reference until I am finished with the button. (Sorry for the disappointment :whistleSmile)

EDIT:
preview:
[Image: 758PsFi.png]

code:
Code:
// HCGlowButton - (c)Arkphaze // Released: May 11/2013 // http://hackcommunity.net using System; using System.Drawing; using System.Drawing.Drawing2D; using System.Windows.Forms; sealed class HCGlowButton : Button { private readonly SolidBrush _flatBgBrush = new SolidBrush(Color.FromArgb(20, 20, 20)); private readonly Pen _penTopLine = new Pen(Color.FromArgb(77, 77, 77)); private readonly Pen _penOuterBorder = new Pen(Color.FromArgb(40, 40, 40)); private readonly SolidBrush _textBrush = new SolidBrush(Color.White); private readonly Color _gradient1 = Color.FromArgb(30, 30, 30); private readonly Color _gradient2 = Color.FromArgb(5, 5, 5); private MouseState _mouseState = MouseState.Normal; enum MouseState { Normal, Hover, Pressed } private const int MaxGlowAlpha = 100; private const int GlowSpeed = 5; private int _glowAlpha; private bool _glowBrighter; private bool _showGlow; private readonly Timer _timer = new Timer(); public HCGlowButton() { DoubleBuffered = true; _timer.Interval = 1; _timer.Tick += _timer_Tick; _showGlow = true; } protected override void OnPaint(PaintEventArgs e) { base.OnPaint(e); e.Graphics.Clear(Color.Black); e.Graphics.SmoothingMode = SmoothingMode.HighQuality; switch (_mouseState) { case MouseState.Hover: using ( LinearGradientBrush lgb = new LinearGradientBrush(Point.Empty, new Point(0, Height), _gradient2, _gradient1)) { e.Graphics.FillRectangle(lgb, DisplayRectangle); } _textBrush.Color = Color.White; break; case MouseState.Pressed: e.Graphics.FillRectangle(_flatBgBrush, DisplayRectangle); _textBrush.Color = Color.FromArgb(145, 145, 145); break; default: // Normal using ( LinearGradientBrush lgb = new LinearGradientBrush(Point.Empty, new Point(0, Height), _gradient1, _gradient2)) { e.Graphics.FillRectangle(lgb, DisplayRectangle); } _textBrush.Color = Color.White; break; } // Draw top line e.Graphics.DrawLine(_penTopLine, 0f, 0f, Width, 0f); // Draw other border lines e.Graphics.DrawLine(_penOuterBorder, 0f, 0f, 0f, Height - 1); // Left e.Graphics.DrawLine(_penOuterBorder, 0f, Height - 1, Width - 1, Height - 1); // Bottom e.Graphics.DrawLine(_penOuterBorder, Width - 1, 0f, Width - 1, Height - 1); // Right // Draw text DrawText(e.Graphics); } #region Overrided Mouse Event Methods protected override void OnMouseDown(MouseEventArgs e) { base.OnMouseDown(e); _mouseState = MouseState.Pressed; _showGlow = false; } protected override void OnMouseUp(MouseEventArgs e) { base.OnMouseUp(e); _mouseState = MouseState.Hover; _showGlow = true; Invalidate(); } protected override void OnMouseMove(MouseEventArgs mevent) { base.OnMouseMove(mevent); _mouseState = MouseState.Hover; _showGlow = true; _glowBrighter = true; if (_glowAlpha < MaxGlowAlpha) { _timer.Start(); } } protected override void OnMouseLeave(EventArgs e) { base.OnMouseLeave(e); _mouseState = MouseState.Normal; _showGlow = true; _glowBrighter = false; if (_glowAlpha > 0) { _timer.Start(); } } #endregion private void DrawText(Graphics graphics) { string text = Text.ToUpper(); SizeF textSize = graphics.MeasureString(text, Font); float x = (Width / 2) - (textSize.Width / 2); float y = (Height / 2) - (textSize.Height / 2); graphics.DrawString(text, Font, _textBrush, x, y); if (_showGlow) { // Draw text glow DrawGlow(graphics, new Rectangle((int)x, (int)y, (int) textSize.Width, (int) textSize.Height)); } } private void DrawGlow(Graphics graphics, Rectangle textRect) { Rectangle glowRect = ExpandRectangle(textRect, 2); Point[] pts = new[] { new Point(glowRect.X, glowRect.Y), new Point(glowRect.X + glowRect.Width, glowRect.Y), new Point(glowRect.X + glowRect.Width, glowRect.Y + glowRect.Height), new Point(glowRect.X, glowRect.Y + glowRect.Height) }; using (PathGradientBrush pgb = new PathGradientBrush(pts)) { pgb.CenterPoint = new PointF(Width / 2, Height / 2); pgb.CenterColor = Color.FromArgb(_glowAlpha, Color.White); pgb.SurroundColors = new[] { Color.Transparent }; pgb.FocusScales = new PointF(0.25f, 0.25f); graphics.FillRectangle(pgb, glowRect); } } private void _timer_Tick(object sender, EventArgs e) { if (_glowBrighter) { if ((_glowAlpha += GlowSpeed) >= MaxGlowAlpha) { _timer.Stop(); _glowAlpha = MaxGlowAlpha; } } else { if ((_glowAlpha -= GlowSpeed) <= 0) { _timer.Stop(); _glowAlpha = 0; } } Invalidate(); } private Rectangle ExpandRectangle(Rectangle rect, int expansion) { const int extraWidth = 4; return new Rectangle(rect.X - expansion - extraWidth, rect.Y - expansion, rect.Width + (expansion * 2) + (extraWidth * 2), rect.Height + (expansion * 2)); } }

Looks not too bad. Note: The glow is animated... I was just too lazy to make a gif.

Confusedmoke:
ArkPhaze
"Object oriented way to get rich? Inheritance"
Getting Started: C/C++ | Common Mistakes
[ Assembly / C++ / .NET / Haskell / J Programmer ]

Reply

RE: HC Glow Button #2
Done... First post will now be edited with the code and results.
ArkPhaze
"Object oriented way to get rich? Inheritance"
Getting Started: C/C++ | Common Mistakes
[ Assembly / C++ / .NET / Haskell / J Programmer ]

Reply

RE: HC Glow Button #3
Thats a nice effort! Good Job! Your threads are begging me to learn C# next Biggrin
My Blog: http://www.procurity.wordpress.com
Donations: 1HLjiSbnWMpeQU46eUVCrYdbkrtduX7snG

Reply

RE: HC Glow Button #4
I could have improved it by creating a graphics path for a rounded rectangle, but decided this looked good enough. If others disagree, I can change that. I decided to avoid the GraphicsPath though for now because Point's and Rectangle's are structures, meaning they are much faster to create. In the forum it looks like each character has it's own glow, and collectively the text in full, so creating it this way would have slowed things down as well, and for as close as this is I didn't see the point.
ArkPhaze
"Object oriented way to get rich? Inheritance"
Getting Started: C/C++ | Common Mistakes
[ Assembly / C++ / .NET / Haskell / J Programmer ]

Reply

RE: [C#] HC Glow Button #5
@ArkPhaze
He indeed never strays far from the spotlight.
Except in the incident where he was referred to as a she.:lol:
Doesn't anyone read a profile in this day and age?:whistle:

P.S.-I like the buttons by the way lest I stray too far from the threads spotlight.Biggrin

Reply

RE: [C#] HC Glow Button #6
(05-13-2013, 06:59 AM)Linuxephus™ Wrote: @ArkPhaze
He indeed never strays far from the spotlight.
Except in the incident where he was referred to as a she.:lol:
Doesn't anyone read a profile in this day and age?:whistle:

P.S.-I like the buttons by the way lest I stray too far from the threads spotlight.Biggrin

Quote:Doesn't anyone read a profile in this day and age?

Well now we know the answer to that question. :lol: And this is why I usually refer to others on a forum as "member", "individual", or "person."
ArkPhaze
"Object oriented way to get rich? Inheritance"
Getting Started: C/C++ | Common Mistakes
[ Assembly / C++ / .NET / Haskell / J Programmer ]

Reply

RE: [C#] HC Glow Button #7
(05-13-2013, 06:59 AM)Linuxephus™ Wrote: @ArkPhaze
He indeed never strays far from the spotlight.
Except in the incident where he was referred to as a she.:lol:
Doesn't anyone read a profile in this day and age?:whistle:

P.S.-I like the buttons by the way lest I stray too far from the threads spotlight.Biggrin

Quote:Doesn't anyone read a profile in this day and age?

Well now we know the answer to that question. :lol: And this is why I usually refer to others on a forum as "member", "individual", or "person."
ArkPhaze
"Object oriented way to get rich? Inheritance"
Getting Started: C/C++ | Common Mistakes
[ Assembly / C++ / .NET / Haskell / J Programmer ]

Reply

RE: [C#] HC Glow Button #8
(05-13-2013, 07:25 AM)ArkPhaze Wrote: Well now we know the answer to that question. :lol: And this is why I usually refer to others on a forum as "member", "individual", or "person."

Except where Linuxephus was referred to as a she.
Even though "she" is a husband and father.:lol:

Reply

RE: [C#] HC Glow Button #9
(05-13-2013, 07:25 AM)ArkPhaze Wrote: Well now we know the answer to that question. :lol: And this is why I usually refer to others on a forum as "member", "individual", or "person."

Except where Linuxephus was referred to as a she.
Even though "she" is a husband and father.:lol:

Reply