Sample Image - gradbutton.jpg

Introduction

First I'd like to thank David Preece for his rainbow button article. Great job, David and it got me thinking! The control has all the features of a regular button and is fully customizable at design time through the properties editor. It also uses a collection of colors (DLL provided) to store the colors.

Background

Why limit the colors to five? So, here is the results of that! A multi colored (minimum of two) gradient button.

How to use the Code

MTMultiGradiantButton can be used in any C# Windows project.

First, add the MTCollections.dll to your project as a resource. Next add MTControls.dll to the toolbox of your Visual Studio or Sharp Develop (the complier I used to create the control). Select the MTMultiGradiantButton control from the file. Then drag and drop the button from the toolbox onto a form. Or you can instantiate the button yourself like this:

private MTControls.MTButtons.MTMultiGradiantButton mTMultiGradiantButton1;
this.mTMultiGradiantButton1= new MTControls.MTButtons.MTMultiGradiantButton();

this.mTMultiGradiantButton1.Colors.Add(System.Drawing.Color.Black);
this.mTMultiGradiantButton1.Colors.Add(System.Drawing.Color.Lime);

or use a different constructor that takes two colors.

private MTControls.MTButtons.MTMultiGradiantButton mTMultiGradiantButton1;
this.mTMultiGradiantButton1 = new MTControls.MTButtons.MTMultiGradiantButton(
System.Drawing.Color.Black, System.Drawing.Color.Lime);

Next, just add the colors you want in two ways:

Using the properties editor, select the Colors property of the button and add your colors through the interface or programmatically add your colors like this:

// this creates a rainbow button with 6 colors
this.mTMultiGradiantButton3 = 
       new MTControls.MTButtons.MTMultiGradiantButton();
this.mTMultiGradiantButton3.Colors.Add(System.Drawing.Color.Red);
this.mTMultiGradiantButton3.Colors.Add(System.Drawing.Color.FromArgb((
      (System.Byte)(255)), ((System.Byte)(128)), ((System.Byte)(0))));
this.mTMultiGradiantButton3.Colors.Add(System.Drawing.Color.Yellow);
this.mTMultiGradiantButton3.Colors.Add(System.Drawing.Color.Green);
this.mTMultiGradiantButton3.Colors.Add(System.Drawing.Color.Blue);
this.mTMultiGradiantButton3.Colors.Add(System.Drawing.Color.Purple);

Special interest in the code

Activating the ability to use the MTColorCollection in the code was interesting. I needed a dynamic array that would hold color values and be available to set through the property interface at design time. I created the MTColorCollection class that would hold the colors by deriving it from CollectionBase but getting the property interface to use it was as simple as creating a read only property for the MTColorCollection class.

private MTColorCollection m_clrColors = new MTColorCollection();
// This is for the properties interface so you can add colors at design time
// it tells the interface to use the follows MTColorColletion Colors property
// as a template to create the interface for adding colors to the control
[DesignerSerializationVisibility(DesignerSerializationVisibility.Content),
EditorAttribute("typeof(CollectionEditor)",
           "typeof(System.Drawing.Design.UITypeEditor)")]

public MTColorCollection Colors
{
  get
  {
    return m_clrColors;
  }
}

Finishing up

So go ahead and check out the code. I didn't include project files since I used SharpDevelop and they would be useless to you, Visual Studio .NET users.

A Multi Gradient Button