Click here to Skip to main content
13,094,742 members (88,097 online)
Click here to Skip to main content
Add your own
alternative version


103 bookmarked
Posted 12 Mar 2007

Making Office 2007 Buttons with Fading and Opacity

, 12 Mar 2007
Rate this:
Please Sign up or sign in to vote.
An easy way to make new style buttons very compatible
Screenshot - background.png Screenshot - form_example.png


I've been looking for free source code of Office 2007 style buttons to use it in my own applications and I've found only trials and complex buttons. Then I tried to design by myself in .NET 2.0 (Windows 2000 compatible) and I found many problems with real opacity (not only form opacity, but with panels too). At last I found a great and easy way to make it. Here I explain how to make your own button with fading and opacity levels. I have to recognize that I'm not an expert in making my own controls and delegates, however the base is here.


If you try to make a backcolor transparent and many other tricks as CreateParams, you always have a problem with real opacity and with maintaining the correct aspect you want in your control, so the best way is to put a background image with a level of opacity. How to do that? The easiest way is by using the Gimp. Install it and create a new file of 10x10 transparent. In create a new image, select advanced options, 'fill with transparent' and if you zoom, you will see this:

Screenshot - image1.png

Now you can make your own color opacity effect selecting fill, choose and downside the icons. There is the opacity level, change it as you want and click on the image. You will see something like the second image (2 in opacity level and R212; G228; B242 color). Save it as 'back.png' file, and let's go to Visual Studio.

Using the off_button Class (Ribbon_Style Namespace)

  1. Create a new Windows Application, for instance ribbon_buttons
  2. In the solution explorer, over the name of the project, right click, add-> existing item, and add off_button.cs
  3. Now add a typical button (System.Windows.Forms.Button) from the toolbox to the form and go to the code of Form1.Designer.cs (in the Solution Explorer)
  4. Change this:
this.button1 = new Ribbon_Style.of_boton2(); 	//Instead of new 
private Ribbon_Style.of_boton2 button1; 	//Instead of 
					//System.Windows.Forms.Button button1;

You will see that the button has only text, now let's add images.

Making the Office Style with Fading

You need to add the following images to the project. For instance, save in your HD and in properties, choose img, img_back...

Screenshot - image3.png

b_click.png, b_on, and for instance b_search.png, background.png (the b_search.png has a transparent background, not green):

b_click.png: Screenshot - B_click.png b_on.png: Screenshot - B_on.png b_search.png: Screenshot - B_search.png background.png: Screenshot - background.png

(Mark beside left here to see back...) . Now you can try on your own.

Inside Off_Button

Let's see the Main methods:

public void PaintBackground() 
    { object _img_temp = new object(); 	// We create the temp_image 
    if (i_fad == 1) 
    { _img_temp = _img_on.Clone(); } 	// That we clone to do not overwrite 
    else if (i_fad == 2) 
    { _img_temp = _img_back.Clone(); } 	// We use the i_value to choose 
					// the background opacity 
    _img_fad = (Image)_img_temp; 
    Graphics _grf = Graphics.FromImage(_img_fad); 
    SolidBrush brocha = new SolidBrush(Color.FromArgb(i_value, 255, 255, 255)); 
    _grf.FillRectangle(brocha, 0, 0, _img_fad.Width, _img_fad.Height); 
    this.BackgroundImage = _img_fad; 

private void timer1_Tick(object sender, EventArgs e) 
{ switch (i_fad) 
case 1: 
{ if (i_value == 0) 
{ i_value = 255; } 
if (i_value > -1) 
{ PaintBackground(); i_value -= 10; } 
else { i_value = 0; // That's the only way to be able to play with the ticks
timer1.Stop(); } 
break; } 
case 2: 
{ if (i_value == 0) 
{ i_value = 255; } 
if (i_value > -1) 
{ PaintBackground(); 
i_value -= 10; } 
else { i_value = 0; 
break; } } }

Now you can find that in the beginning of the toolbox, you have the new button to drag the times you want, or by code, of course.

Screenshot - image5.png

Points of Interest

The code is not a perfect class but it wasn't the objective of the article. This is my first control and I'm not an expert with custom controls and events yet. So when I learn a bit more, I'll make them better and I will update the article.


  • March, 06-2007: This is my first version of the control


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


About the Author

Juan Pablo G.C.
Software Developer Expediteapps
Spain Spain
I'm Electronic Engineer, I did my end degree project at Astrophysical Institute and Tech Institute. I'm HP Procurve AIS and ASE ,Microsoft 3.5 MCTS
I live in Canary Islands ,developing customized solutions

Deeply involved in Xamarin Forms LOB (including Azure Cloud with offline support, custom controls, dependencies) projects, WP8.1 & W10 projects, WPF modern styled projects. Portable libraries like portablePDF, portableOneDrive, portableReports and portablePrinting (using Google Printing API).

Web and apps showcase at:

Take a look to my blog

You may also be interested in...


Comments and Discussions

GeneralButton click events are not generating Pin
vivek_pawar12-Mar-07 19:56
membervivek_pawar12-Mar-07 19:56 
AnswerRe: Button click events are not generating Pin
Juan Pablo G.C.13-Mar-07 2:01
memberJuan Pablo G.C.13-Mar-07 2:01 

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

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

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.170813.1 | Last Updated 12 Mar 2007
Article Copyright 2007 by Juan Pablo G.C.
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid