Making Office 2007 Buttons with Fading and Opacity

• Download demo - 26.12 KB
• Download source - 67.22 KB

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:

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...

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: b_on.png: b_search.png: 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.

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