Making a glass button?

[Blake81]

I was in a Flash chat room and I saw buttons that looked really good. I'd love to be able to make these for my VB programs. Would someone here know how to do this? Here's the button

It looks to me like it may just fade to a gradient on top and bottom and be overlayed with a semi-transparent oval on top for the reflection. Is that it? I wouldn't know how to make the rounded rectangle shape either. Thanks.

 

[JohnH]

Looks so. Post 8 here got two rounding functions: http://www.vbdotnetforums.com/showthread.php?t=17327

 

[Blake81]

I managed to make the following, by using GDI+ Architect and then copying the code into VB. Not perfect, but I think it's a good start.

 

[vis781]

Take a look at this, toward the bottom is the source to create a IE7 style navigation control. See attached pic. Might give you a few pointers. http://blogs.msdn.com/cjacks/archive/2006/03/21/556721.aspxhttp://blogs.msdn.com/cjacks/Default.aspx?p=2

 

[Blake81]

GDI+ Architect has really been a good tool. From looking at images of glass spheres, I could tell that they were just a gradient with a semi-transparent oval on top. I made a few more improvements to mine. Here it is now.

The buttons in your last post look really good. It looks like there are more shapes going on in those ones. I'll have to check out the code. Thanks for the link!

Edit:

I also just created this image

 

[Anti-Rich]

how would you go about specifying a semi-tranparent ellipse in vb.net?

it has me stumped, i have no clue how to go about it.

that GDI+ architect is pretty handy though!

adam

 

[jwh]

You set the alpha property of the fill color to anything between 0 - 255

255 being opaque, and 0 being invisible.

 

[Blake81]

I figured I should post the code here for how this is made. GDI+ Architect generates the code for you. I'm not really sure why some of the code is there, but it works fine when I take some of it out. You may have to tweak this to get it to work.

Public Class Untitled1
    Inherits System.ComponentModel.Component
    
    Private Ellipse2Brush As System.Drawing.Drawing2D.LinearGradientBrush = New System.Drawing.Drawing2D.LinearGradientBrush(New System.Drawing.Rectangle(96, -4, 98, 83), System.Drawing.Color.FromArgb(255, 20, 30, 93), System.Drawing.Color.FromArgb(255, 241, 241, 241), System.Drawing.Drawing2D.LinearGradientMode.Vertical)
    
    Private Ellipse2Pen As System.Drawing.Pen = New System.Drawing.Pen(System.Drawing.Color.FromArgb(0, 248, 248, 248), 1!)
    
    Protected Ellipse2 As System.Drawing.Rectangle = New System.Drawing.Rectangle(96, -4, 98, 83)
    
    Private Ellipse3Brush As System.Drawing.Drawing2D.LinearGradientBrush = New System.Drawing.Drawing2D.LinearGradientBrush(New System.Drawing.Rectangle(115, -4, 57, 25), System.Drawing.Color.FromArgb(255, 232, 233, 230), System.Drawing.Color.FromArgb(41, 214, 214, 214), System.Drawing.Drawing2D.LinearGradientMode.Vertical)
    
    Private Ellipse3Pen As System.Drawing.Pen = New System.Drawing.Pen(System.Drawing.Color.FromArgb(0, 255, 255, 255), 1!)
    
    Protected Ellipse3 As System.Drawing.Rectangle = New System.Drawing.Rectangle(115, -4, 57, 25)
    
    Public Sub New()
        MyBase.New
        Me.InitializeGraphics
    End Sub
    
    Private Sub InitializeGraphics()
        Ellipse2Pen.DashStyle = System.Drawing.Drawing2D.DashStyle.Custom
        Ellipse3Pen.DashStyle = System.Drawing.Drawing2D.DashStyle.Custom
    End Sub
    
    Public Overridable Sub RenderGraphics(ByVal g As System.Drawing.Graphics)
        g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.AntiAlias
        g.TextRenderingHint = System.Drawing.Text.TextRenderingHint.AntiAlias
        g.FillEllipse(Me.Ellipse2Brush, Me.Ellipse2)
        g.DrawEllipse(Me.Ellipse2Pen, Me.Ellipse2)
        g.FillEllipse(Me.Ellipse3Brush, Me.Ellipse3)
        g.DrawEllipse(Me.Ellipse3Pen, Me.Ellipse3)
    End Sub
    
    'Required to dispose of created resources
    Private Sub DisposeGraphics()
        Me.Ellipse2Brush.Dispose
        Me.Ellipse2Pen.Dispose
        Me.Ellipse3Brush.Dispose
        Me.Ellipse3Pen.Dispose
    End Sub
    
    Protected Overloads Overrides Sub Dispose(ByVal disposing As Boolean)
        If disposing Then
            Me.DisposeGraphics
        End If
    End Sub
End Class

In the paint event for the form, I took a lot of this out, and just did this:

    Private Ellipse2Brush As System.Drawing.Drawing2D.LinearGradientBrush = New System.Drawing.Drawing2D.LinearGradientBrush(New System.Drawing.Rectangle(96, -4, 98, 83), System.Drawing.Color.FromArgb(255, 20, 30, 93), System.Drawing.Color.FromArgb(255, 241, 241, 241), System.Drawing.Drawing2D.LinearGradientMode.Vertical)
    
    Private Ellipse2Pen As System.Drawing.Pen = New System.Drawing.Pen(System.Drawing.Color.FromArgb(0, 248, 248, 248), 1!)
    
    Protected Ellipse2 As System.Drawing.Rectangle = New System.Drawing.Rectangle(96, -4, 98, 83)
    
    Private Ellipse3Brush As System.Drawing.Drawing2D.LinearGradientBrush = New System.Drawing.Drawing2D.LinearGradientBrush(New System.Drawing.Rectangle(115, -4, 57, 25), System.Drawing.Color.FromArgb(255, 232, 233, 230), System.Drawing.Color.FromArgb(41, 214, 214, 214), System.Drawing.Drawing2D.LinearGradientMode.Vertical)
    
    Private Ellipse3Pen As System.Drawing.Pen = New System.Drawing.Pen(System.Drawing.Color.FromArgb(0, 255, 255, 255), 1!)
    
    Protected Ellipse3 As System.Drawing.Rectangle = New System.Drawing.Rectangle(115, -4, 57, 25)
 
g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.AntiAlias
        g.TextRenderingHint = System.Drawing.Text.TextRenderingHint.AntiAlias
        g.FillEllipse(Me.Ellipse2Brush, Me.Ellipse2)
        g.DrawEllipse(Me.Ellipse2Pen, Me.Ellipse2)
        g.FillEllipse(Me.Ellipse3Brush, Me.Ellipse3)
        g.DrawEllipse(Me.Ellipse3Pen, Me.Ellipse3)

 

[Anti-Rich]

if you have an onrender event, i dont think you need the onpaint event as well... dont they do basically the same thing?

im not sure, so dont quote me!

adam

 

[Blake81]

I don't known either, but I would guess that is correct, since the code worked when I placed it in the On Paint event.

 

[Blake81]

By the way, I wasn't able to convert that code that vis781 gave to VB .NET, because I wasn't sure what some parts were doing. I'd love to be able to make that button though.