2017­5­10 Writing your Custom Control: step by step ­ CodeProject

12,923,765 members ﴾68,458 online﴿ asderel 276   Sign out

Search for articles, questions, tips
articles Q&A forums lounge

Writing your Custom Control: step by step

Alexandr_K, 31 Mar 2002 Rate:
   4.70 ﴾188 votes﴿

Making a cute button of two semi‐transparent user‐changeble colors

Is your email address OK? You are signed up for our newsletters but your email address is either unconfirmed, or has not been reconfirmed in a long
time. Please click here to have a confirmation email sent so we can confirm your email address and start sending you newsletters again.
Alternatively, you can update your subscriptions.

<!‐‐ Download Links ‐‐>

Download source files ‐ 7 Kb

Download compiled dll ‐ 2 Kb

<!‐‐ Article image ‐‐>

<!‐‐ Add the rest of your HTML here ‐‐>

Introduction
This is a short and simple demonstration of .NET framework's capability of creating custom controls.

Here I'm going to make a custom control and then, test my control in a Windows application. I have implemented some custom properties for my control, so you can
learn how it is done in C#.

Building the Control

1. Open the Visual Studio and start a new project. Your project must be based on the Windows Control Library template. Call your project ctlCuteButton and click
OK.

2. Once you have your project open, delete the UserControl from the project. Just remove it because the 'User Control' is not exactly what we need here.

3. Now go to the 'Project' menu: Project‐>Add User Control... and select the Custom Control template there. 'Custom Control' is what we need in this case. You
may call it cuteButton. Now click OK. A new Custom control has been added to your project.

4. The first thing we must do here is to change the base class of the cuteButton:

Override the following line:

Hide   Copy Code

https://www.codeproject.com/Articles/2016/Writing­your­Custom­Control­step­by­step 1/5
2017­5­10 Writing your Custom Control: step by step ­ CodeProject

public class cuteButton : System.Windows.Forms.Control

by this one:

Hide   Copy Code

public class cuteButton : System.Windows.Forms.Button

Now your control is based on the System.Windows.Forms.Button class.

5. Now let's create some custom properties for our control. This is done by inserting the following code inside the cuteButton class:

Hide   Shrink   Copy Code

private Color m_color1 = Color.LightGreen;  //first color 
private Color m_color2 = Color.DarkBlue;   // second color 
private int m_color1Transparent = 64; // transparency degree  
                                      // (applies to the 1st color) 
private int m_color2Transparent = 64; // transparency degree  
                                      //  (applies to the 2nd color) 

public Color cuteColor1 
{ 
    get { return m_color1; } 
    set { m_color1 = value; Invalidate(); } 
} 

public Color cuteColor2 
{ 
    get { return m_color2; } 
    set { m_color2 = value; Invalidate(); } 
} 

public int cuteTransparent1 
{ 
    get { return m_color1Transparent; } 
    set { m_color1Transparent = value; Invalidate(); } 
} 

public int cuteTransparent2 
{ 
    get { return m_color2Transparent; } 
    set { m_color2Transparent = value; Invalidate(); } 
}

The Invalidate() methoid is used to refresh the design view and all controls inside ﴾the tip from Tom Welch﴿.

6. And the last thing to do before compiling our control is to override the Paint event. So let's do it:

Hide   Copy Code

// Calling the base class OnPaint 
base.OnPaint(pe); 
// Create two semi‐transparent colors 
Color c1 = Color.FromArgb(m_color1Transparent , m_color1); 
Color c2 = Color.FromArgb(m_color2Transparent , m_color2); 
Brush b = new System.Drawing.Drawing2D.LinearGradientBrush(ClientRectangle,  
                                                           c1, c2, 10); 
pe.Graphics.FillRectangle (b, ClientRectangle); 
b.Dispose();

7. Now you may compile the control by pressing <Ctrl>+<Shift>+<B>.

Here is the complete contents of cuteButton.cs file ﴾just in case…﴿:

COMPLETE CODE:

Hide   Shrink   Copy Code

using System; 
using System.Collections; 
using System.ComponentModel; 
using System.Drawing; 
using System.Data; 
using System.Windows.Forms; 

namespace ctlCuteButton 
{ 
    /// <summary> 
    /// Summary description for cuteButton. 
    /// </summary> 

    public class cuteButton : System.Windows.Forms.Button 
    { 

https://www.codeproject.com/Articles/2016/Writing­your­Custom­Control­step­by­step 2/5
2017­5­10 Writing your Custom Control: step by step ­ CodeProject
    private Color m_color1 = Color.LightGreen; // first color 
    private Color m_color2 = Color.DarkBlue;  // second color 
    private int m_color1Transparent = 64; // transparency degree  
                                             // (applies to the 1st color) 
    private int m_color2Transparent = 64; // transparency degree  
                                          //  (applies to the 2nd color) 

    public Color cuteColor1 
    { 
        get { return m_color1; } 
        set { m_color1 = value; Invalidate(); } 
    } 

    public Color cuteColor2 
    { 
        get { return m_color2; } 
        set { m_color2 = value; Invalidate(); } 
    } 

    public int cuteTransparent1 
    { 
        get { return m_color1Transparent; } 
        set { m_color1Transparent = value; Invalidate(); } 
    } 

    public int cuteTransparent2 
    { 
        get { return m_color2Transparent; } 
        set { m_color2Transparent = value; Invalidate(); } 
    } 

    public cuteButton() 
    { 
    } 

    protected override void OnPaint(PaintEventArgs pe) 
    { 
        // Calling the base class OnPaint 
        base.OnPaint(pe); 
        // Create two semi‐transparent colors 
        Color c1 = Color.FromArgb 
            (m_color1Transparent , m_color1); 
        Color c2 = Color.FromArgb 
            (m_color2Transparent , m_color2); 
        Brush b = new System.Drawing.Drawing2D.LinearGradientBrush 
            (ClientRectangle, c1, c2, 10); 
        pe.Graphics.FillRectangle (b, ClientRectangle); 
        b.Dispose(); 
    } 
} 
}

Testing the Control

1. Open a new instance of the VS .NET. Create a new project choosing the Windows Application template.

2. From a new Windows Forms project, we can add the compiled custom control to the toolbox. I do this by right‐clicking the toolbox, selecting Customize
Toolbox, and from the .NET Framework Components tab, clicking Browse and locating the Control Library DLL # ﴾in our case,
ctlCuteButton\bin\debug\cuteButton.dll﴿. The component cuteButton will then appear in the Toolbox.

You can play a bit changing it’s properties ﴾cuteColor1, cuteColor2, cuteTransparent1, cuteTransparent2﴿.

That’s all so far about building and using custom controls.

Good Luck.

License
This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author
via the discussion board below.

A list of licenses authors might use can be found here

Share
https://www.codeproject.com/Articles/2016/Writing­your­Custom­Control­step­by­step 3/5
2017­5­10 Writing your Custom Control: step by step ­ CodeProject

EMAIL TWITTER

About the Author

Alexandr_K No Biography provided
Software Developer ﴾Senior﴿
Canada

You may also be interested in...

Learn MVC ﴾Model View Controller﴿ step by step in 7 days – Day SAPrefs ‐ Netscape‐like Preferences Dialog
1

Learn MVC ﴾Model view controller﴿ Step by Step in 7 days – Day Generate and add keyword variations using AdWords API
2

10 Ways to Boost COBOL Application Development Window Tabs ﴾WndTabs﴿ Add‐In for DevStudio

Comments and Discussions

 

  Search Comments   Go
Add a Comment or Question 

First Prev Next

CustomControlFor Listbox
namrata kongutte 20‐May‐15 2:11

Can not drag and drop Custom Control in window form VS2010
SaurabhSoni 29‐Mar‐14 10:06

Custom Control in C#.Net

Ammar alzubairy 11‐Jun‐13 9:50

My vote of 2
Lagkip 4‐Jun‐13 14:22

My vote of 5
batime 3‐Dec‐12 5:07

Just a question
Grumbscut 28‐Nov‐12 3:12

https://www.codeproject.com/Articles/2016/Writing­your­Custom­Control­step­by­step 4/5
2017­5­10 Writing your Custom Control: step by step ­ CodeProject

Re: Just a question

Grumbscut 28‐Nov‐12 7:26

5 stars
Isuru Nanayakkara 21‐Nov‐12 5:38

My vote of 5
amish kumar 3‐Nov‐12 2:03

My vote of 5
avidela 17‐Oct‐12 16:48

A very useful easy to understand step by step guide to create custom control in visual studio with snap‐shots
KrishanGahlot 30‐Sep‐12 23:37

excellence
daghune 4‐Sep‐12 4:30

My vote of 2
daghune 4‐Sep‐12 4:14

Re: My vote of 2
amirmohamad 4‐Sep‐12 4:30

Re: My vote of 2
daghune 4‐Sep‐12 4:32

Re: My vote of 2
amirmohamad 4‐Sep‐12 4:33

Re: My vote of 2
daghune 4‐Sep‐12 4:34

Arsefuckr
bartjuh10 27‐Dec‐12 15:03

great article
Wrangly 11‐Jan‐12 3:15

Super
Member 8471309 9‐Dec‐11 7:48

My vote of 5
GuyThiebaut 29‐Oct‐11 11:21

My vote of 4
Member 7721350 16‐Apr‐11 5:50

Good Job
RockingDownTheHighway 9‐Feb‐11 21:36

Is it PRO version required?

BogdanJankowski 1‐Mar‐10 9:27

How to anchor a custom control?

ChanHwiHwang 10‐Nov‐09 22:01

Refresh 1 2 3 Next »

General    News    Suggestion    Question    Bug    Answer    Joke    Praise    Rant    Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile Layout: fixed | Article Copyright 2002 by Alexandr_K
Seleccionar idioma ▼
Web02 | 2.8.170510.2 | Last Updated 1 Apr 2002 fluid Everything else Copyright © CodeProject, 1999‐2017

https://www.codeproject.com/Articles/2016/Writing­your­Custom­Control­step­by­step 5/5