Saturday, April 12, 2008

Colorful Microsoft windows forms Controls

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:

///
/// 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(); }
}

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

No comments: