Click here to Skip to main content
Click here to Skip to main content
Technical Blog

Colorful Microsoft windows forms Controls

, 16 Sep 2010 CPOL
Rate this:
Please Sign up or sign in to vote.
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

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)

Share

About the Author

Ahmed_Said
Software Developer Asset Technology Group
Egypt Egypt
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
Follow on   Twitter

Comments and Discussions

 
GeneralMy vote of 1 PinmemberDigitalRacer13-Sep-10 13:29 
GeneralRe: My vote of 1 PinmemberAhmed_Said13-Sep-10 17:31 
GeneralRe: My vote of 1 Pinmemberdalek915-Sep-10 5:33 
GeneralRe: My vote of 1 PinmemberAhmed_Said15-Sep-10 8:06 
GeneralRe: My vote of 1 Pinmemberdalek915-Sep-10 12:21 
GeneralRe: My vote of 1 PinmemberAhmed_Said16-Sep-10 4:20 
GeneralRe: My vote of 1 PinmemberAhmed_Said16-Sep-10 4:19 

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
Web01 | 2.8.141022.2 | Last Updated 16 Sep 2010
Article Copyright 2010 by Ahmed_Said
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid