Making Office2007 panels with fading and opacity

• Download demo project - 31.7 KB
• Download source files - 86.2 KB

Introduction

I have seen some OF07 panels with a good appearance that fail when they have controls inside and try to solve it making code in the parent form, that makes the project code too complicated. Another matter is opacity inside other panels with buttons, it works correctly and other thing I wanted in an Office 2007 style panel is fading from one base color to another. I have created an app that makes templates for a project. Let's see first how to put one in your project.

Using the code

In a new project add the class "off_panel.cs" (Solution Explorer->RightClick->Add Existing Item...). Then , you should drag a typical Forms.Panel to the form, then edit the code of the Form Designer (In the solution explorer view the subforms of the Form) changing the next:

this.panel1 = new Off_Style.off_panel(); 
        //Instead of new System.Windows.Forms.Panel();
 ...
private Off_Style.off_panel panel1; //Instead of Panel panel1;

Now you will see a form like this (Sometimes the designer will not refresh well, you can reopen the project or delete the new lines and drag from the toolbox):

Changing the Base Color

I make a template app (Download the demo project) to choose easily the Base Color and the On Color, run it and select:

(The trackbars have their own limits to make the style consistently). After choosing the Base Color you want (Find that in the template app, I put a Form BackColor if you want to use it) and the OnColor. Return to your project and apply it in the Properties Window.

Custom Properties

I have added three interesting Properties:

• Caption: It puts using the panel Font the text you want (I recommend don't use big fonts).
• Speed: When the color distance between the base to the on color is big, if you want a faster transition you can increase this parameter if you want it faster (Take a Look in the demo project).
• Opacity: As typical you can choose the opacity level.

Points of Interest

The design of the button

The fist time I cut the Office panel bitmap in 8 parts to make the panel as a bitmap, but I thought that if I put the cursor on I had to make another 8 parts, and what if I want to change the colors? At the end I decided to render it. You can see that the methods to draw the button are:

public void DrawArc()
{
    X = X0; Y = Y0; i_Zero = 180; D++;
    path = new GraphicsPath();
    path.AddArc(X + D, Y + D, T, T, i_Zero, i_Sweep); i_Zero += 90; X += XF;
    path.AddArc(X - D, Y + D, T, T, i_Zero, i_Sweep); i_Zero += 90; Y += YF;
    path.AddArc(X - D, Y - D, T, T, i_Zero, i_Sweep); i_Zero += 90; X -= XF;
    path.AddArc(X + D, Y - D, T, T, i_Zero, i_Sweep); i_Zero += 90; Y -= YF;
    path.AddArc(X + D, Y + D, T, T, i_Zero, i_Sweep);
}

public void DrawArc2(int OF_Y, int SW_Y)
{
    X = X0; Y = Y0 + OF_Y; i_Zero = 180;
    path = new GraphicsPath();
    path.AddArc(X + D, Y + D, T, T, i_Zero, i_Sweep); i_Zero += 90; X += XF;
    path.AddArc(X - D, Y + D, T, T, i_Zero, i_Sweep); i_Zero += 90; Y += SW_Y;
    path.AddArc(X - D, Y - D, T, T, i_Zero, i_Sweep); i_Zero += 90; X -= XF;
    path.AddArc(X + D, Y - D, T, T, i_Zero, i_Sweep); i_Zero += 90; Y -= SW_Y;
    path.AddArc(X + D, Y + D, T, T, i_Zero, i_Sweep);
}

You can see two Parameters:

• D: It controls the distance between borders (there are three borders).
• T: It controls how big the radius is.

The speed of fading

To make the transition faster, I put a perColor speed that changes to 1 when the Color Component is near the Color on Component.

if (System.Math.Abs(_BaseColorOn.R - R0) > i_factor)
{
    i_fR = i_factor;
}
else
{
    i_fR = 1;
}
if (System.Math.Abs(_BaseColorOn.G - G0) > i_factor)
{
    i_fG = i_factor;
}
else
{
    i_fG = 1;
}
if (System.Math.Abs(_BaseColorOn.B - B0) > i_factor)
{
    i_fB = i_factor;
}
else
{
    i_fB = 1;
}

Ignore the Panel OnMouseLeave when the Mouse is inside the panel but over a control.

To do that, when the Mouse Enters again:

protected override void OnMouseEnter(EventArgs e)
{
    Point P_EX = Cursor.Position;
    P_EX = this.PointToClient(P_EX);
    if (P_EX.X > 0 | P_EX.X < this.Width |
            P_EX.Y > 0 | P_EX.Y < this.Height)
    {
        i_mode = 0; timer1.Start(); } base.OnMouseEnter(e);
    }

    protected override void OnMouseLeave(EventArgs e)
    {
        Point P_EX = Cursor.Position;
    P_EX = this.PointToClient(P_EX);
    if (P_EX.X < 0 | P_EX.X >= this.Width | P_EX.Y < 0
                            | P_EX.Y >= this.Height)
    {
        i_mode = 1; timer1.Start(); } base.OnMouseLeave(e);
    }

Only if the mouse is outside the panel, it activates the timer. I hope you find it easy to use it.

History

• Version 1.0: March 07.