Click here to Skip to main content
11,721,053 members (77,422 online)
Click here to Skip to main content

WindowsVistaRenderer: A New Button Generation

, 23 Nov 2007 CPOL 200K 6.2K 318
Rate this:
Please Sign up or sign in to vote.
ToolStripRenderer that renders Vista like buttons
Screenshot - VistaRenderer.jpg

Introduction

This article demonstrates how to use the WindowsVistaRenderer and how it was created.

Background

Don't you miss the days when a button was drawn with a couple of lines to show a 3D effect? Drawing a button was as simple as drawing the light border and the shadow border. Those days are gone. Vista has arrived and our old apps may need to be renewed.

The first time you look at a button like the ones on Vista look and feel, you must feel dizzy. How to draw buttons like that? Well it turns out that it is not such a great deal. It took me a while to totally understand how these buttons are drawn, but I think the result is a good approach.

Using the Code

Thank God for the ToolStripRenderer technology.

To use this renderer on a ToolStrip you only need one line of code:

//
// Apply Windows Vista look and feel
//

toolStrip1.Renderer = new Renderers.WindowsVistaRenderer();

The Renderer initializes the necessary properties for the ToolStrip, except for the LayoutStyle property which I recommend to be the default HorizontalStackWithOverflow, otherwise the toolbar may look ugly in some cases.

The source solution contains a project named Renderers. Reference that DLL to your project or copy the source files to your project.

How to Draw a Button Like That

As I said before, the old-school buttons were drawn in a very easy way:

Screenshot - VistaRenderer1.gif Screenshot - VistaRenderer2.gif

The whole idea is to make the user think that he or she is really pushing a button, when clicked shadows were inverted, text pushed one pixel on x and one pixel on y, and the click effect was done.

The Vista buttons are way more complex. I've found different layers on the button drawing.

Borders

Three rounded rectangles are drown as a border, I call them the outer border, the border and the inner border.

Screenshot - VistaRenderer3.gif

Glossy Effect

A glossy effect is drawn on the north of the button. The green color represents an almost transparent color.

Screenshot - VistaRenderer4.gif

Glow

A radial gradient simulates a color glow on the south of the button. The green color represents an almost tansparent color.

Screenshot - VistaRenderer5.gif

Button Fill

Similar to the glossy effect, the inner border area is emphasized with a linear button fill from north to south.

Putting It All Together

Now, the order in which we draw these layers is critical. That order is:

  1. Outer border
  2. Button background color (if button is checked)
  3. Glossy effect
  4. Border
  5. Button fill glossy emphasis
  6. Inner border
  7. Glow
  8. Text and image of the button
Screenshot - VistaRenderer6.jpg

Some Other Details

To create the click effect, the color of the inner border and the button fill are changed. When clicked, the text is not pushed one pixel like in the old days.

When checked, the background color of the button changes. That color was extracted from the tabs on the MediaPlayer.

To make the toolbar a full-Vista-experience component, menus are drawn using the Windows Vista look and feel.

Credits

Thanks to Lukasz Swiatkowski for the methods on creating rounded rectangles and the bottom radial path.

History

  • 15 Oct 2007: Article creation
  • 25 Oct 2007: Subitem initialization by recursion solved (suggested by rvpilot)
  • 21 Nov 2007: Combobox and Textbox support. Better overflow chevron.
  • 23 Nov 2007: MenuStrip support.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Jose Menendez Póo
Team Leader
Mexico Mexico
I'm in game programming now: https://itunes.apple.com/us/app/ugly-aliens-training-center/id859271884?ls=1&mt=8

Jose Manuel Menéndez Poó

- I've been programming Windows and Web apps since 1997.
- My greatest concern nowadays is user interface usability.

Questions and stuff by twitter: @menendezpoo

Blog
menendezpoo.com

You may also be interested in...

Comments and Discussions

 
QuestionTabControl Pin
jyrka984-Nov-14 18:38
memberjyrka984-Nov-14 18:38 
QuestionGreat Work - take 5! Pin
Jens-Madsen20-Jul-14 7:34
memberJens-Madsen20-Jul-14 7:34 
QuestionHow to Change background colors Pin
vijayksingh2-Apr-13 2:15
membervijayksingh2-Apr-13 2:15 
GeneralMy vote of 2 Pin
programmerdon17-Oct-12 8:15
memberprogrammerdon17-Oct-12 8:15 
QuestionBinaries Pin
Vercas21-Jun-11 2:55
memberVercas21-Jun-11 2:55 
I do not even care about this if you don't have compiled binaries to prove.
I am tired of extracting, converting and compiling everyone's projects.
AnswerRe: Binaries Pin
Jose Menendez Póo21-Jun-11 3:05
memberJose Menendez Póo21-Jun-11 3:05 
GeneralRe: Binaries Pin
Vercas21-Jun-11 3:21
memberVercas21-Jun-11 3:21 
QuestionIs there a renderer with Windows 7 theme? Pin
stax7614-Aug-09 0:48
memberstax7614-Aug-09 0:48 
Generalnot properly recover default renderer Pin
Unruled Boy17-Jan-09 15:36
memberUnruled Boy17-Jan-09 15:36 
Generalmenu not properly rendered in windows 2003 Pin
Unruled Boy17-Jan-09 14:43
memberUnruled Boy17-Jan-09 14:43 
Questionrenderer in vb.net Pin
JoeFisher716-Nov-08 5:35
memberJoeFisher716-Nov-08 5:35 
AnswerRe: renderer in vb.net Pin
Jose M. Menendez Poó6-Nov-08 6:36
memberJose M. Menendez Poó6-Nov-08 6:36 
GeneralMessage Removed Pin
Katekortez25-Oct-08 9:08
memberKatekortez25-Oct-08 9:08 
GeneralAbout new button generation Pin
marclenoir20051-Sep-08 6:27
membermarclenoir20051-Sep-08 6:27 
GeneralRe: About new button generation Pin
Jose M. Menendez Poó1-Sep-08 6:55
memberJose M. Menendez Poó1-Sep-08 6:55 
QuestionLegal for commerical Application? Pin
Omnicoder31-May-08 8:58
memberOmnicoder31-May-08 8:58 
QuestionThe control looks very good. Is there any way to implement the same look and feel in web pages of asp.net Pin
Member 314494524-Feb-08 17:34
memberMember 314494524-Feb-08 17:34 
AnswerRe: The control looks very good. Is there any way to implement the same look and feel in web pages of asp.net Pin
The Dogcow Farmer26-Jun-08 11:36
memberThe Dogcow Farmer26-Jun-08 11:36 
QuestionLicence Pin
Julian-w30-Dec-07 23:26
memberJulian-w30-Dec-07 23:26 
GeneralFighting the tools Pin
Mount30-Dec-07 22:57
memberMount30-Dec-07 22:57 
QuestionHow do I do this with just the command buttons? Pin
JonathanVQP19-Dec-07 6:55
memberJonathanVQP19-Dec-07 6:55 
AnswerRe: How do I do this with just the command buttons? Pin
The Dogcow Farmer27-Jun-08 5:10
memberThe Dogcow Farmer27-Jun-08 5:10 
GeneralTranslation to vb.net [modified] Pin
virtual.aussie26-Nov-07 10:13
membervirtual.aussie26-Nov-07 10:13 
Generaljust move to WPF Pin
dimzon21-Nov-07 6:48
memberdimzon21-Nov-07 6:48 
AnswerRe: just move to WPF Pin
mofle21-Nov-07 11:43
membermofle21-Nov-07 11:43 
GeneralRe: just move to WPF Pin
dimzon22-Nov-07 5:28
memberdimzon22-Nov-07 5:28 
GeneralRe: just move to WPF Pin
mofle22-Nov-07 5:52
membermofle22-Nov-07 5:52 
GeneralRe: just move to WPF Pin
The_Mega_ZZTer23-Nov-07 5:12
memberThe_Mega_ZZTer23-Nov-07 5:12 
GeneralRe: just move to WPF Pin
mofle23-Nov-07 5:18
membermofle23-Nov-07 5:18 
GeneralRe: just move to WPF Pin
Simon Capewell23-Nov-07 5:44
memberSimon Capewell23-Nov-07 5:44 
GeneralRe: just move to WPF Pin
User of Users Group23-Nov-07 8:55
memberUser of Users Group23-Nov-07 8:55 
QuestionTextbox problem Pin
mofle20-Nov-07 8:56
membermofle20-Nov-07 8:56 
AnswerRe: Textbox problem Pin
Jose M. Menendez Poo21-Nov-07 3:50
memberJose M. Menendez Poo21-Nov-07 3:50 
GeneralRe: Textbox problem Pin
mofle21-Nov-07 4:10
membermofle21-Nov-07 4:10 
QuestionRe: Textbox problem Pin
mofle22-Nov-07 8:30
membermofle22-Nov-07 8:30 
QuestionRe: Textbox problem Pin
mofle28-Nov-07 23:51
membermofle28-Nov-07 23:51 
GeneralToolStripComboBox Issue Pin
Michal Brylka13-Nov-07 5:12
memberMichal Brylka13-Nov-07 5:12 
AnswerRe: ToolStripComboBox Issue Pin
Jose M. Menendez Poo21-Nov-07 3:49
memberJose M. Menendez Poo21-Nov-07 3:49 
GeneralMenuStrip Problem Pin
Sk8tz27-Oct-07 0:55
memberSk8tz27-Oct-07 0:55 
AnswerRe: MenuStrip Problem Pin
StaffanW21-Nov-07 3:40
memberStaffanW21-Nov-07 3:40 
GeneralRe: MenuStrip Problem Pin
Sk8tz21-Nov-07 3:57
memberSk8tz21-Nov-07 3:57 
GeneralRe: MenuStrip Problem Pin
Sk8tz22-Nov-07 20:33
memberSk8tz22-Nov-07 20:33 
AnswerRe: MenuStrip Problem Pin
Jose M. Menendez Poo23-Nov-07 4:14
memberJose M. Menendez Poo23-Nov-07 4:14 
GeneralRe: MenuStrip Problem Pin
Sk8tz23-Nov-07 4:32
memberSk8tz23-Nov-07 4:32 
GeneralRe: MenuStrip Problem Pin
Sk8tz26-Nov-07 19:34
memberSk8tz26-Nov-07 19:34 
GeneralToolstripSplitButton Problem Pin
grouperb126-Oct-07 4:20
membergrouperb126-Oct-07 4:20 
GeneralRe: ToolstripSplitButton Problem Pin
Jose M. Menendez Poo26-Oct-07 4:28
memberJose M. Menendez Poo26-Oct-07 4:28 
GeneralRe: ToolstripSplitButton Problem Possible Solution Pin
grouperb126-Oct-07 21:33
membergrouperb126-Oct-07 21:33 
GeneralMuy buen trabajo Jose! Pin
PakT25-Oct-07 22:14
memberPakT25-Oct-07 22:14 
GeneralRe: Muy buen trabajo Jose! Pin
sk8er_boy28711-Dec-08 1:28
membersk8er_boy28711-Dec-08 1:28 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.150901.1 | Last Updated 23 Nov 2007
Article Copyright 2007 by Jose Menendez Póo
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid