Click here to Skip to main content
Email Password   helpLost your password?

Screenshots

Sample application using a standard glass button with image.

Sample application using a standard glass button with image.

The same application, but this time it has a customized glass button.

Sample application using a customized glass button.

MFC application which hosts four glass buttons.

MFC application which hosts four glass buttons.

Introduction

I bet you have already seen animated task buttons in Windows Vista. I have. I was wondering how to create a similar control. Fortunately, I found a web page which describes how to do that using the Microsoft Expression Blend (Creating a Glass Button: The Complete Tutorial). The glass button (and thus the whole application) created with the Microsoft Expression Blend requires .NET Framework 3.0 to run. Because some people cannot or do not want to use .NET Framework 3.0 yet, I have decided to rewrite that cool control using only GDI+ so it would work with .NET Framework 2.0.

"Converting" XAML to C# (GDI+)

The tutorial from the page mentioned above was easy to complete, and the generated XAML code was so understandable that there were no big issues with a "conversion."

For example, I have translated the following code:

<Border HorizontalAlignment="Stretch" 
        Margin="0,0,0,0" x:Name="shine" 
        Width="Auto" CornerRadius="4,4,0,0">

  <Border.Background>
    <LinearGradientBrush EndPoint="0.494,0.889" 
                         StartPoint="0.494,0.028">
      <GradientStop Color="#99FFFFFF" Offset="0" />

      <GradientStop Color="#33FFFFFF" Offset="1" />
    </LinearGradientBrush>
  </Border.Background>

</Border>

into:

using (GraphicsPath bh = CreateTopRoundRectangle(rect2, 4))
{
  int opacity = 0x99;
  if (isPressed) opacity = (int)(.4f * opacity + .5f);
  using (Brush br = new LinearGradientBrush(rect2, 
                          Color.FromArgb(opacity, shineColor),
                          Color.FromArgb(opacity / 3, shineColor),
                          LinearGradientMode.Vertical))
  {
    g.FillPath(br, bh);
  }
}

(This is only a fragment of the DrawButtonBackground method.)

Even the animation of a hovered button was easily obtained by using the Timer class. Unfortunately, an animation is not quite smooth when a glass button is quite big.

How to use the GlassButton class?

The GlassButton class derives from the Button class so it can be used in the same way. Displaying an image on a glass button is also supported now. Even the guidelines work fine in the Visual Studio's form designer.

History

You must Sign In to use this message board.
 
 
Per page   
 FirstPrevNext
GeneralRounded Corners
edurveda
10:18 18 Nov '09  
Firstly - a fantastic control that works very well! I was wondering if you could create a couple of extra features:
1. Expose the Corner Radius as a user managed parameter - this will allow the buttons to be tiled nicely when creating something like say a numeric keypad.
2. Allow user to explicitly set the color of the outer border
Generalback color transparency
Member 3953480
0:46 8 Jul '09  
hi,

i used your control in an vc++ appliction in a dialog class. i created an instance of the control like this

CWinFormsControl<Glass::GlassButton> m_button1;

i then assciated the control to a static text control like this.

DDX_ManagedControl(pDX, IDC_GLASS_BUTTON, m_button1);

i have set the backcolor of the glassbutton to transparent.

the problem here is that when i set the brush color of the dialog on WM_CTLCOLOR evernt,
the background color of the button does not change to the color of the brush but instead draws the default dialog color in the area under the button.

MJ.
GeneralRe: back color transparency
Lukasz Swiatkowski
4:16 8 Jul '09  
Did you try also manually draw background in WM_ERASEBKGND message?
E.g.:
BOOL MyDlg::OnEraseBkgnd(CDC* pDC)
{
CRect rect;
GetClientRect(&rect);
CBrush myBrush(RGB(255, 255, 255)); // dialog background color
CBrush *pOld = pDC->SelectObject(&myBrush);
BOOL bRes = pDC->PatBlt(0, 0, rect.Width(), rect.Height(), PATCOPY);
pDC->SelectObject(pOld); // restore old brush
return bRes; // CDialog::OnEraseBkgnd(pDC);
}

Łukasz

~~~~~~~~~~~~~~~~~~~
My website: www.lukesw.net

JokeThank you
Mr_Coder
19:50 18 Mar '09  
thank you very much.
Generalits some how good
zanzona
0:07 12 Jan '09  
the information is good
GeneralUsing a GlassButton as the appearance for a RadioButton
Meestor_X
11:59 28 Nov '08  
Excellent work!

However, I have a project with a number of RadioButtons that have the appearance of Buttons.

This is accomplished in the RadioButton Properties or by the following code:
Me.RadioButton1.Appearance = System.Windows.Forms.Appearance.Button

As opposed to:
Me.RadioButton1.Appearance = System.Windows.Forms.Appearance.Normal

Is there any way I can somehow add the glassbutton style so a RadioButton can look like a GlassButton?

Thanks very much for any and all help!

-Andy.
GeneralRe: Using a GlassButton as the appearance for a RadioButton
Lukasz Swiatkowski
12:49 12 Jan '09  
Thank you Smile

Create a copy of the GlassButton.cs/vb file, then change all occurences of "Button" into "RadioButton" and add the following lines
_imageButton.Checked = Checked;
_imageButton.CheckAlign = CheckAlign;
to the DrawForegroundFromButton method before the
_imageButton.ImageAlign = ImageAlign;
line.

Regards,
Łukasz

~~~~~~~~~~~~~~~~~~~
My website: www.lukesw.net

QuestionRe: Using a GlassButton as the appearance for a RadioButton
himoobd
2:39 14 May '09  
Thanks a lot for your great work.However, I have the similar request as this thread.
I added the following code:
_imageButton.Checked = Checked;
_imageButton.CheckAlign = CheckAlign;

and did all the modification as you guided, but I see the button is not acting as Radio button.
It is not being toggled as when GlassRadioButton.appearance=Button

Could you please compare the behavior of RadioButton appearance and GlassRadioButton appearance when their appearance is set to Button?

Could you please convert this project t a cool Radio Button that can be toggled?

Thanks again for this cool hard work.

Have a nice time. Smile
QuestionImage Animation
Danish Sultan
21:46 9 Nov '08  
I found this control really wonderful. Thanks for that. I wanted to ask if there is a way to Fade in and out Images on roll over and away events.

Lets say if I want the image in the 'BackgroundImage' property to be faded into 'Image' property when the mouse enters (animation starts) and revert back to the background image when the mouse leaves.
May be this may cause the control to be a bit slow, but this is an effect I have been looking for quite a time.

If you can help in this regard, I will be very grateful.
thank you.
AnswerRe: Image Animation
Lukasz Swiatkowski
12:13 12 Jan '09  
Unfortunately it's not that easy. My code draws only animated background. Foreground (text and image) is not drawn directly by my code. I have private Button _imageButton field, and invoke its paint method (but not directly) to draw specified foreground. Implementing animated foreground would require to make serious changes to the code, which wouldn't be easy.

Regards,
Łukasz

~~~~~~~~~~~~~~~~~~~
My website: www.lukesw.net

General[Message Removed]
Katekortez
9:56 25 Oct '08  
Spam message removed
GeneralExcellent!
grt3kl
12:27 19 Aug '08  
Thanks for being kind of enough to provide this excellent tool to the community! Big Grin
GeneralRe: Excellent!
Lukasz Swiatkowski
9:17 2 Sep '08  
You're welcome. Big Grin

~~~~~~~~~~~~~~~~~~~
My website: www.lukesw.net

GeneralVB Version
raing3
14:42 25 Jun '08  
will you be releasing a VB .NET version of this control?

R. Ainger

GeneralRe: VB Version
Lukasz Swiatkowski
0:47 26 Jun '08  
I'm not sure, but probably I will.

Lukasz

~~~~~~~~~~~~~~~~~~~
My website: www.lukesw.net

GeneralAwesome Button!
Engr486
9:22 7 Jun '08  
Looks really sharp! Thanks!
GeneralRe: Awesome Button!
Lukasz Swiatkowski
0:37 26 Jun '08  
You're welcome.

~~~~~~~~~~~~~~~~~~~
My website: www.lukesw.net

QuestionLicence
Julian-w
4:03 17 May '08  
Hello,
can I use your control in a freeware library?
The library contains controls who makes a vista style.

My Site: julian-w.de

(Sorry for my bad English, I'm from Germany)

AnswerRe: Licence
Lukasz Swiatkowski
7:10 17 May '08  
Hello,

I repeat a post which is somewhere below:
"Basically, anyone can use my dll file or the source code. I forbid only including it in some controls/components packs and similar libraries."
So, you can if it will be only for your applications. But you cannot if you are planning to release it for everyone, sorry.

Lukasz

~~~~~~~~~~~~~~~~~~~
My website: www.lukesw.net

GeneralRe: Licence
Julian-w
8:18 17 May '08  
OK, then I only link to this page and include the code directly in my program

My Site: julian-w.de

(Sorry for my bad English, I'm from Germany)

GeneralRe: Licence
Julian-w
3:50 18 May '08  
I have a question.
I develop a library for time to play media files(images, music and videos).
There is a graphiches interface, for which I also took advantage of your library.
In this library are still other controls included (Vista List View, TreeView, Status List, etc.), but the acces is only "internal class".
At the end there will be a DLL file.

Is that okay?

(I hope you understand me)


My Site: julian-w.de

(Sorry for my bad English, I'm from Germany)

GeneralRe: Licence
Lukasz Swiatkowski
3:59 18 May '08  
Yes, it's OK. You can use glass button in that way.

Regards,
Lukasz

~~~~~~~~~~~~~~~~~~~
My website: www.lukesw.net

GeneralDrawToBitmap
Jacob Shepherd
21:41 20 Apr '08  
This is a great control! You suggested in a previous thread to use the button's DrawToBitmap method to save the button as an image. Do you know how to keep a transparent background when doing the save? I'd like to end up with a semi-transparent png of the entire button, without the background. Using your CreateBackgroundFrame method gets me close, but doesn't include the foreground (text, image, etc).

I have tried overriding the OnPaintBackground, but it didn't seem to do the trick.

protected override void OnPaintBackground(PaintEventArgs e)
{
e.Graphics.FillRectangle(Brushes.Transparent, this.Bounds);
}

Any suggestions?

Thanks!
GeneralRe: DrawToBitmap
Lukasz Swiatkowski
6:33 21 Apr '08  
I use this code and it works:
GlassButton gb = new GlassButton();
gb.Size = new Size(75, 23);
gb.Text = "Text";
Image img = new Bitmap(bg.Width, bg.Height);
using (Graphics g = Graphics.FromImage(img))
{
g.Clear(Color.Transparent);
// in order for this to work, these two methods have to be public
gb.DrawButtonBackgroundFromBuffer(g);
gb.DrawForegroundFromButton(new PaintEventArgs(g, gb.ClienrRectangle));
}
img.Save("file.png");
Lukasz

~~~~~~~~~~~~~~~~~~~
My website: www.lukesw.net

GeneralRe: DrawToBitmap
Jacob Shepherd
15:11 28 Apr '08  
Thanks for your help! Now I have a version of this that works for the web!


Last Updated 5 Nov 2008 | Advertise | Privacy | Terms of Use | Copyright © CodeProject, 1999-2010