Round Button in C#

• Download source files - 7 Kb
• Download demo project - 8 Kb

Introduction

The button presented in this example has been developed in stages. I shall walk you through the stages one by one, so that you can create a custom control yourself easily. Round buttons are specific cases of elliptic buttons.

Overview

My motivation for this article started with me trying to imitate the round button of Windows Media Player. I wanted to create a custom control in C# and round button is a control developers popularly try to implement when implementing custom controls. I searched codeproject and google, there was none, and I decided to create one myself.

Custom controls are easier to create in C# than in MFC, thanks to FCL. There was an article by Chris Maunder on how to create an elliptic button using MFC. The code in this sample looks simpler because of some FCL functions that come free.

What�s Special About this Button

The button I developed has the following properties:

• It is elliptical/ round
• HoverColor � color of the button when you hover over it
• TextStartPoint � point at which we start drawing text of the button. Coordinates are relative to upper-hand left corner of the bounding rectangle of the button.
• ColorGradient � This parameter allows you to shade the button. Indicates how sharp a color transition you want.
• ColorStepGradient � Indicates how many every pixels you want color change.
• FadeOut � Indicates if you want darker color outside or inside. Indicate true for darker color along the rim, and false for lighter.

Why should You use Round Buttons?

Why would you create a round button at all? First, if you want nice UI. Second, if a regular rectangular button is not as good as one, for example, that looks like a cigar. Windows Media Player�s play button mimics today�s round buttons on multimedia player stations and conveys the idea more accurately than a rectangular one.

It is easier to create a round button in C#, and you would like to use .Net to create it if you want it to seamlessly integrate with other UI development environments like VB.Net. In order to use it, you�d need an operating system with the .Net framework installed. In order to replace buttons in existing projects with this new one, you want to replace the word Button by RoundButton in the InitializeComponents() function in your forms and add a reference to the dll hosting code for this button.

C# Background

The mother of all controls in C# is the Control class. It has all the features that you�d want out of a control and MSDN describes the features well. If you are authoring a new control and your control is going to be similar to a standard existing control, you will do well to extend that class. In our example, we extend the Button class. To create a listbox having checkboxes and showing images instead of text, you would extend the CheckedListBox class. If you want to create a control from scratch that has no behavioral resemblance to any controls that you know of, you want to extend the UserControl class. You can create a composite control also using UserControl.

Basic Philosophy

The basic philosophy to create a round button is simple � extend the Button class, have a Paint handler, draw your ellipse in the handler. There are other intricacies, however. If you are having your own Paint handler, you will not be calling the default Paint handler, which means more responsibilities:

1. You will have to set the region for the button so that if the user clicks at a point which lies outside the bounding circle but inside the bounding rectangle, that does not translate to a click.
2. You would affect other properties related to drawing like: text, image and backgroundImage. If you are not calling the default Paint handler, you have to draw the text and images, aligned as the user wants them.

La Code

Time to code. In the following, I describe briefly the steps in which I developed this button.

Step 1

Simple round button. Visuals done. Behaviorally similar to a rectangular button. We create one pen and one brush. The pen, to draw the boundary ellipse/ circle; the brush: to fill interior of the ellipse.

constructor:
{
      _pen = new Pen(_color);
      _brush = new SolidBrush(Color.FromKnownColor (KnownColor.Control));
      _brushInside = new SolidBrush(_color);
}

// OnPaint�

protected override void OnPaint(PaintEventArgs pe)
{
      Graphics g = pe.Graphics;
      g.FillRectangle(_brush, 0, 0, ClientSize.Width, ClientSize.Height);
      g.DrawEllipse(_pen, 0, 0, ClientSize.Width, ClientSize.Height);
      g.FillEllipse(_brushInside, 0, 0, ClientSize.Width, ClientSize.Height);
}

Additionally, you want to expose a color property that the end user can populate in design mode.

Step 2

The implementation in Step 1 has a bug: if you click at a point which lies outside the bounding circle but inside the bounding rectangle, that gets interpreted as a click.

To fix that, we add the following code in OnPaint to set the window region correctly:

      GraphicsPath path = new GraphicsPath();
      path.AddEllipse(0, 0, ClientSize.Width, ClientSize.Height);
      this.Region = new Region(path);

Step 3

Rest of the code should be easy to interpret. I have developed functions, step by step, to make the coloring code more appealing and fixing problems because we are avoiding the call to the default Paint handler. I called the function where I do the painting inside the button in OnPaint() as ColorButton, and developed different versions of ColorButton().

Brief overview of the functions:

• ColorButton1 � flat coloring of the button
• ColorButton2 � fills color with color gradient. Color gets darker towards the righthand-bottom corner.
• ColorButton3 - fills color with color gradient. Color gets darker towards the center. Respects the image property set by the user
• ColorButton4 � Adds fade-in/ out property. Color gets lighter (fade out) or darker (fade in) towards the center.
• ColorButton5 � ColorButton4 modified to take in pen and brush arguments. Needed for hover-coloring. I added handlers for MouseEnter and MouseLeave to color the button differently on mouse hover. Draws a focus rectangle when the button has focus.

Using the Button

In a fresh project, go to the Toolbox, add / remove items, browse and point to the dll for the button. In an existing project, change text Systems.Windows.Forms.Button to AdvButton.RoundButton.

Known Issues

These are known issues:

• It disregards TextAlign property
• It disregards ImageAlign property
• Does not give a perfect 3D look, consequently, the property FlatStyle is ignored

Other Considerations

Note that we have taken care of:

• Windows accessibility requirements
• Localization issues. Text written in a right-to-left language will appear fine.

Future improvements

The properties ImageAlign and TextAlign are currently ignored. The image is currently drawn at the center and text coordinates depends on the property TextStartPoint.

References

• Round button - http://www.codeproject.com/buttonctrl/roundbuttons.asp, by Chris Maunder

You must Sign In to use this message board.

FAQ    Noise Tolerance Very HighHighMediumLowVery Low   Layout Expand Posts & RepliesThread ViewNo JavascriptNo JS + Preview   Per page 102550

Msgs 1 to 6 of 6 (Total in Forum: 6) (Refresh) FirstPrevNext

Great Job 5:36 1 Sep '08   Great Job and nice work Sign In·View Thread·PermaLink Good Style Ramzi Abou Rahal 8:47 12 Mar '08   Good Style Sign In·View Thread·PermaLink Antialiasing ujos 7:34 22 Mar '07   To smooth edges set SmoothingMode property of pe.Graphics to SmoothingMode.AntiAlias; Sign In·View Thread·PermaLink 5.00/5 (1 vote) .NET 1.1 version? bnaffas 13:07 22 Oct '06   I'm looking for something like this but for .NET v1.1. Do you have a version that would work with that or can you point in the right direction for where to find this? Sign In·View Thread·PermaLink 2.00/5 (2 votes) Great Job Finally Creamed 3:28 25 May '04   Actually I find it so great cos I was trying to design a Line control and i got the hint of using the Region from this code of yours. Acutally im trying to make a Data Modeling application but Im pretty confused about how to implement the whiteboard area on which all the painting must be done. If you can please tell where I could find some resource that would tell me how to implement the main drawing area. Thanks. Sign In·View Thread·PermaLink 2.00/5 (2 votes) Nice... uuy 20:26 26 Jan '04   It is goog. Help me rob Sign In·View Thread·PermaLink 2.00/5 (1 vote)

Last Visit: 0:52 22 Nov '09     Last Update: 0:52 22 Nov '09 1