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)
- Create a new Windows Application, for instance
ribbon_buttons
- In the solution explorer, over the name of the project, right click, add-> existing item, and add off_button.cs
- 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)
- Change this:
this.button1 = new Ribbon_Style.of_boton2(); ...
private Ribbon_Style.of_boton2 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();
if (i_fad == 1)
{ _img_temp = _img_on.Clone(); }
else if (i_fad == 2)
{ _img_temp = _img_back.Clone(); }
_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;
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