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

Making Office2007 panels with fading and opacity

, 19 Mar 2007 CPOL
Rate this:
Please Sign up or sign in to vote.
An easy way to add Office 2007 panels style

Screenshot - Article.png

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):

Screenshot - img_1.png

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:

Screenshot - img_2.png

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

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 Pinmemberreza_ali20200011-Feb-13 12:51 
GeneralRe: My vote of 5 PinmemberJuan Pablo G.C.13-Feb-13 2:30 
GeneralCatcy PinmemberVCSKicks2-Feb-09 10:49 
GeneralCoding PinmemberNedim Sabic25-Nov-08 0:35 
QuestionHow to set Opacity of Gradient panel Pinmemberamitnawale29-May-08 3:13 
GeneralGood PinmemberPriyank Bolia15-Jan-08 23:50 
GeneralGreat Pinmembertopcatalpha30-Mar-07 2:32 
GeneralAwesome! [modified] Pinmemberk^s28-Mar-07 5:32 
GeneralAbout Voting PinmemberJuan Pablo G.C.28-Mar-07 1:36 
GeneralConverted it on VB PinmemberB-One21-Mar-07 23:22 
GeneralRelated Query PinmemberVasudevan Deepak Kumar19-Mar-07 4:05 
GeneralRe: Related Query PinmemberTom Lawrance19-Mar-07 4:12 

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 | Mobile
Web04 | 2.8.141022.2 | Last Updated 19 Mar 2007
Article Copyright 2007 by Juan Pablo G.C.
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid