Click here to Skip to main content
13,554,848 members
Click here to Skip to main content
Add your own
alternative version


93 bookmarked
Posted 13 Sep 2005
Licenced CPOL

Custom Arrow Button

, 13 Sep 2005
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 21:48
memberrrossenbg27-Aug-13 21:48 
GeneralIt's a little pity... Pin
supernorb20-Feb-13 8:18
membersupernorb20-Feb-13 8:18 
GeneralMy vote of 5 Pin
pcs04145-Nov-11 4:07
memberpcs04145-Nov-11 4:07 
GeneralLike your Control [modified] Pin
thlorenz13-Jul-09 9:48
memberthlorenz13-Jul-09 9:48 
AnswerRe: Like your Control Pin
Alexander Kloep13-Jul-09 20:11
memberAlexander Kloep13-Jul-09 20:11 
QuestionCan I use Arrow Drawing Code in my App? Pin
Sukhjinder_K8-Nov-07 17:21
memberSukhjinder_K8-Nov-07 17:21 
GeneralGood control Pin
Bill Seddon7-Jan-07 1:21
memberBill Seddon7-Jan-07 1:21 
GeneralChange control shape from square to an arrow Pin
andrea@gmi20-Sep-06 3:37
memberandrea@gmi20-Sep-06 3:37 
GeneralRe: Change control shape from square to an arrow Pin
Alexander Kloep1-Oct-06 21:06
memberAlexander Kloep1-Oct-06 21:06 
thanks for your enhancement.
greets, alex.
GeneralBitArray Indexer Pin
smason52-Nov-05 8:43
membersmason52-Nov-05 8:43 
GeneralRe: BitArray Indexer Pin
Alexander Kloep2-Nov-05 18:57
memberAlexander Kloep2-Nov-05 18:57 
GeneralIn an earlier VC++ (MFC) project... Pin
Kacee Giger14-Sep-05 8:15
memberKacee Giger14-Sep-05 8: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.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web03-2016 | 2.8.180515.1 | Last Updated 13 Sep 2005
Article Copyright 2005 by Alexander Kloep
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid