Click here to Skip to main content
11,924,487 members (54,217 online)
Click here to Skip to main content
Add your own
alternative version


90 bookmarked

Custom Arrow Button

, 13 Sep 2005 CPOL
Rate this:
Please Sign up or sign in to vote.
A button that looks like an arrow.

Testform with several ArrowButtons


In an earlier VC++ (MFC) project, I designed a GUI with which the assistance robots in a machine could be positioned. For that I changed the rectangular button shape into an arrow shape. I have taken up the idea to program such arrows also in C# (.NET Framework). For that I read the most, very helpful, article about shaped forms on CodeProject. So with that information and the goal to deepen my knowledge in C# (GDI+, .NET Framework), I started the project. Here is the result.

Using the code

The project is designed as a custom control. In my article "PictureBox with zooming and scrolling", I described how to install and use such a control, or have a look at the different articles about that topic in CodeProject, for example "Writing your Custom Control: step by step" by Alexandr Khilov.

Methods / Properties

The control provides six designer related properties:

Designer properties

  • NormalStartColor, NormalEndColor -> Start- and End color for the LinearGradientBrush in normal state.
  • HoverStartColor, HoverEndColor -> Start- and End color for the LinearGradientBrush if the mouse cursor is over the arrow.
  • Rotation -> The pointing direction of the arrow in degrees. Starting with 0° at 12 O' clock raising clockwise to 360°.
  • ArrowEnabled -> Enable or disable the button. Act like the enable/disable in other controls.


There is one public event in the class OnClickEvent. The event is fired if the mouse button is over the arrow and pressed.

Helper classes

The class BitArray is a simple helper class that I used to hold different button states (and to play a little bit with indexer). In the code you can see how to work with it.

ArrowButtonDesigner is derived from System.Windows.Forms.Design.ControlDesigner. A base designer class for extending the design mode behavior of a control. I used it only to hide properties.

A suggestion about the demo

Apart from the buttons -X and +X the other buttons have no function. If you click the x-value lower than 0 or make it bigger than 50, the HoverColor of the special ArrowButton will change to red.

Known restrictions

  • If you make the arrow too big, sometimes the calculation to prevent clipping doesn't work correct.
  • There is no test to check if the button text is correct in length and size.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Alexander Kloep
Software Developer
Germany Germany
Working as software engineer since 2001. I started with c, c++ came up to c# and wpf today.

You may also be interested in...

Comments and Discussions

GeneralMy vote of 5 Pin
rrossenbg27-Aug-13 22:48
memberrrossenbg27-Aug-13 22:48 
GeneralIt's a little pity... Pin
supernorb20-Feb-13 9:18
membersupernorb20-Feb-13 9:18 
GeneralMy vote of 5 Pin
pcs04145-Nov-11 5:07
memberpcs04145-Nov-11 5:07 
GeneralLike your Control [modified] Pin
thlorenz13-Jul-09 10:48
memberthlorenz13-Jul-09 10:48 
I like you buttons a lot, exactly what I was going to design myself. Fortunately I came here first and found your solution.
Saves me a lot of time.
I am going to use it in my application and will let you know where you can download a free release, once I'm there, so you can see your buttons in action Wink | ;)
Schoenen Gruss ...

I also added some Utility functions to quickly Create your buttons:
public static ArrowButton AddTo(Control control, int rotation)
        { return AddTo(control, rotation, false); }
        public static ArrowButton AddTo(Control control, int rotation, bool reSize)
            ArrowButton button = CreateArrowButton(rotation);
            if (reSize) {
                control.Size = new Size(control.Size.Width + button.Width, control.Size.Height);
            int y;
            if ((rotation > 45 && rotation < 135) || (rotation > 225 && rotation < 315)) {
                y = (int) (control.Size.Height / 2.0) - (int) (button.Size.Height / 2.0);
            else {
                y = rotation < 180 ? 0 : control.Size.Height - button.Height;
            button.Location = new Point(control.Size.Width - button.Width, y);
            return button;
        static ArrowButton CreateArrowButton(int rotation)
            var button = new ArrowButton { 
                HoverStartColor = Color.LightBlue, HoverEndColor = Color.Blue,
                NormalStartColor = Color.Orange, NormalEndColor =  Color.Red,
                Visible = true, Size = new Size(24, 24), Rotation = rotation};
            return button;

And in case you want to do something like:
Panel pnlTest = new Panel();
pnlTest.AddArrowButton(0, true).Click +=
                delegate { Console.WriteLine("You clicked the Button"); };

you can use these Extension Methods. I actually keep them in the same namespace as the ArrowButton class.

public static class ButtonExtensions
      public static ArrowButton AddArrowButton<T>(this T control) where T : Control
          return ArrowButton.AddTo(control, 0);
      public static ArrowButton AddArrowButton<T>(this T control, int rotation) where T : Control
          return ArrowButton.AddTo(control, rotation);
      public static ArrowButton AddArrowButton<T>(this T control, int rotation, bool reSize) where T : Control
          return ArrowButton.AddTo(control, rotation, reSize);

These are especially useful when you employ these buttons to allow users to close a panel, I use it in conjunction with some animation. For instance pressing the upArrow slides my Panel out to the top until it disappears.

modified on Monday, July 13, 2009 5:33 PM

AnswerRe: Like your Control Pin
Alexander Kloep13-Jul-09 21:11
memberAlexander Kloep13-Jul-09 21:11 
QuestionCan I use Arrow Drawing Code in my App? Pin
Sukhjinder_K8-Nov-07 18:21
memberSukhjinder_K8-Nov-07 18:21 
GeneralGood control Pin
Bill Seddon7-Jan-07 2:21
memberBill Seddon7-Jan-07 2:21 
GeneralChange control shape from square to an arrow Pin
andrea@gmi20-Sep-06 4:37
memberandrea@gmi20-Sep-06 4:37 
GeneralRe: Change control shape from square to an arrow Pin
Alexander Kloep1-Oct-06 22:06
memberAlexander Kloep1-Oct-06 22:06 
GeneralBitArray Indexer Pin
smason52-Nov-05 9:43
membersmason52-Nov-05 9:43 
GeneralRe: BitArray Indexer Pin
Alexander Kloep2-Nov-05 19:57
memberAlexander Kloep2-Nov-05 19:57 
GeneralIn an earlier VC++ (MFC) project... Pin
Kacee Giger14-Sep-05 9:15
memberKacee Giger14-Sep-05 9:15 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    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 | Terms of Use | Mobile
Web02 | 2.8.151125.3 | Last Updated 13 Sep 2005
Article Copyright 2005 by Alexander Kloep
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid