Click here to Skip to main content
Click here to Skip to main content

Making Office 2007 Buttons with Fading and Opacity

, 12 Mar 2007 CPOL
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

Introduction

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.

Background

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 
					//System.Windows.Forms.Button();
...
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
PaintBackground(); 
timer1.Stop(); } 
break; } 
case 2: 
{ if (i_value == 0) 
{ i_value = 255; } 
if (i_value > -1) 
{ PaintBackground(); 
i_value -= 10; } 
else { i_value = 0; 
PaintBackground(); 
timer1.Stop(); 
} 
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.

History

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

License

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

Share

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
 
I'm developing with WPF4, SL4 MVVM, MVC3 Razor and WP7 projects, more info at my websites. Improving with Android and IOS.
 
Web:
Expediteapps


Take a look to my blog Juan Pablo G.C.
Mareinsula

Comments and Discussions

 
GeneralMy vote of 5 PinmemberRaviRanjankr4-Dec-11 8:59 
GeneralGood job Pinmemberimresoft7-Dec-09 3:26 
GeneralNice! Pinmembericcb101315-Jul-09 21:41 
GeneralInteresting Method - The Web Way Pinmemberstixoffire7-Jun-08 12:34 
QuestionLicense? PinmemberJulian-w17-May-08 9:51 
GeneralNice article PinmemberM.K.A. Monster22-Apr-07 22:02 
QuestionNot working when converted in VB PinmemberB-One21-Mar-07 23:43 
AnswerRe: Not working when converted in VB PinmemberB-One21-Mar-07 23:59 
GeneralButton click events are not generating Pinmembervivek_pawar12-Mar-07 20:56 
AnswerRe: Button click events are not generating PinmemberJuan Pablo G.C.13-Mar-07 3:01 

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
Web02 | 2.8.141223.1 | Last Updated 12 Mar 2007
Article Copyright 2007 by Juan Pablo G.C.
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid