Click here to Skip to main content
Licence CPOL
First Posted 9 Sep 2010
Views 11,786
Bookmarked 8 times

Colorful Microsoft windows forms Controls

By | 16 Sep 2010 | Technical Blog
Get bored from the static appearance of windows forms 2.0 controls?! What about adding some exciting features for them in order to enhance the UI of our applications! In this tutorial I’ll show you how to create gradient colors as a background for those controls, let’s make our target is the Panel
A Technical Blog article. View original blog here.[^]

Get bored from the static appearance of windows forms 2.0 controls?! What about adding some exciting features for them in order to enhance the UI of our applications!

In this tutorial I’ll show you how to create gradient colors as a background for those controls, let’s make our target is the Panel Control.

  1. Create a new “Class Library” project from Microsoft Visual Studio 2005 and name it as GradientPanelLibrary.
  2. Add a CustomControl item to the current solution and name it as GradientPanel.
  3. Switch to the code of the GradientPanel class and change the inherited class to be Panel instead of Control.
  4. Now let’s add some properties for the fancy panel control, we’ll need the following properties:
  5. ///
    /// The gradient first color 
    ///
    
    private Color Color1; 
    public Color BackColor1 
    { 
    get { return Color1; } 
    set { Color1 = value; this.Invalidate(); } 
    } 
    ///
    /// The gradient second color 
    /// private Color Color2; 
    public Color BackColor2 
    { 
    get { return Color2; } 
    set { Color2 = value; this.Invalidate(); } 
    }
    ///
    /// The gradient fill mode
    ///
    private LinearGradientMode Mode; 
    public LinearGradientMode FillMode 
    { 
    get { return Mode; } 
    set { Mode = value; this.Invalidate(); } 
    }
  6. All we’ve to do now is overriding the OnPaint method in order to draw the Panel with the gradient colors, Here’s the code:
if (this.ClientRectangle.Height == 0 || this.ClientRectangle.Width == 0) return; 

//get the graphics object of the control 
Graphics g = pe.Graphics; 

//The drawing gradient brush 
LinearGradientBrush brush = new LinearGradientBrush(this.ClientRectangle,
    BackColor1, BackColor2, FillMode); 

//Fill the client area with the gradient brush using the control's graphics object 
g.FillRectangle(brush, this.ClientRectangle);

Now we can build the solution in order to generate the dll for our fancy Panel, then add this generated dll to the ToolBox, and then you can drag the GradientPanel Control from the toolbox and drop it into any windows forms to enhance your UI.Note that you can apply this technique to any control, so you’ll have special controls that make your UI is the best one.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Ahmed_Said

Software Developer
Asset Technology Group
Egypt Egypt

Member

Follow on Twitter Follow on Twitter
I'm a professional components designer, web developer, UX engineer and 3d designer as well, I'm 4 years experienced .net software engineer and 7 years experienced 3d designer using 3D Max. I'm very interested in RIA technologies, prototyping and UX engineering.
 
Ahmed Said
Senior .Net Software Engineer

Sign Up to vote   Poor Excellent
Add a reason or comment to your vote: x
Votes of 3 or less require a comment

Comments and Discussions

 
You must Sign In to use this message board. (secure sign-in)
 
Search this forum  
 FAQ
    Noise  Layout  Per page   
  Refresh
GeneralMy vote of 1 PinmemberDigitalRacer13:29 13 Sep '10  
GeneralRe: My vote of 1 PinmemberAhmed_Said17:31 13 Sep '10  
GeneralRe: My vote of 1 Pinmemberdalek95:33 15 Sep '10  
GeneralRe: My vote of 1 PinmemberAhmed_Said8:06 15 Sep '10  
GeneralRe: My vote of 1 Pinmemberdalek912:21 15 Sep '10  
GeneralRe: My vote of 1 PinmemberAhmed_Said4:20 16 Sep '10  
GeneralRe: My vote of 1 PinmemberAhmed_Said4:19 16 Sep '10  

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.

Permalink | Advertise | Privacy | Mobile
Web02 | 2.5.120517.1 | Last Updated 16 Sep 2010
Article Copyright 2010 by Ahmed_Said
Everything else Copyright © CodeProject, 1999-2012
Terms of Use
Layout: fixed | fluid