Making office2007 buttons with fading and opacity

• Download Article_demo.zip - 26.1 KB
• Download Article_src.zip - 133.2 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, with panels too), but 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 making own controls and delegates, however the base is here.

Background

If you try to make backcolor transparent and many other tricks as CreateParams, you always have a problem with real opacity and mantain 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 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 make 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 at 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 the 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 no that the button has only text, now lets add images

Making the office style with fading

You need to add the next 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 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 by 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; // Thats 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 out that in the begining of the toolbox you have the new button to drag the times you want, or by code, of course.

Points of Interest

Of course, the code is not a perfect class but it wasn't the objective of the article. That's 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