A Pushbutton with an Arrow

Back To Tips Page

Every once in a while it is handy to have a pushbutton that contains an arrow.  This is a handy little class I wrote that creates buttons with arrows, and also can include text:

This class incorporates the following features:

This control uses existing styles and operations on buttons to achieve these capabilities.

Setting the font

The font is selected by using the normal SetFont calls on the control.  However, the text height setting is ignored in all cases, and the font height is recomputed as necessary to cause the text to fit inside the arrow body.  So the face name, italic, boldface, strikeout, and similar features are preserved, but the height is recomputed as needed.

The text area is limited to the rectangular portion of the bar of the arrow, and cannot flow into the head of the arrow.  If no text is supplied, there is no attempt to display it.

Setting the text

The text can be set in the dialog editor as the Caption property or set at runtime using SetWindowText.  If no text is supplied, no text will be displayed.

Text orientation

"Horizontal" orientation is all that is supported.  The alignment is done along the line of the text, whether the text is running vertically or horizontally. 

The alignment can be set at design time in the dialog editor, or at run time.  To set the text alignment at runtime, the following can be used

c_Button.ModifyStyle(BS_LEFT | BS_RIGHT | BS_CENTER, desired_style_here);

Setting the direction

The direction values are defined in DrawArrow.h, which is included by placing the following declaration in the header file for the dialog

#include "ArrowButton.h"

The method is

void CArrowButton::SetDirection(DrawArrow::Direction dir)


DrawArrow::Direction, one of DrawArrow::ARROW_N, ("North", upward pointing arrow), DrawArrow::ARROW_S, ("South", downward pointing arrow), DrawArrow::ARROW_E, ("East", right-pointing arrow) and DrawArrow::ARROW_W, ("West", left-pointing arrow).

Setting and retrieving the colors

void CArrowButton::SetLineColor(COLORREF color)
void CArrowButton::SetBodyColor(COLORREF color)
void CArrowButton::SetTextColor(COLORREF color)

COLORREF CArrowButton::GetLineColor()
COLORREF CArrowButton::GetBodyColor()
COLORREF CArrowButton::GetTextColor()


The usual EnableWindow call will work.  A disabled button will print out with a grayed-out background and ::GetSysColor(COLOR_GRAYTEXT) for the text color.


 Orientation and alignment

DrawArrow::ARROW_E DrawArrow::ARROW_W DrawArrow::ARROW_S DrawArrow::ARROW_N





Enabled Disabled

Dynamic Text Resizing

The text size is adjusted to try to maximize the height, but if the consequence of maximizing the height is that it would be too long for the text area, the size is recomputed

175 70 125 70 100 70
175 50 125 50 100 50
175 35 125 35 high 100 35

I have used variants of this control in several other programs, including my Viewport Explorer, Floating Point Explorer, and Locale Explorer.  However, this code was developed from those original sketches for another purpose, and is much more elaborate.

Using the code

The modules that constitte the drawing are the following

Defines the class CArrowButton
Implements the CArrowButton class.  This includes the logic to draw the button and the dynamic text resizing logic.
Defines the drawing routine interface.  This is included by including ArrowButton.h.
Contains the drawing logic for the arrow.  This logic does not include the font-adjustment logic, which is part of the button control logic.

The Arrow Button Explorer

To debug this class, I wrote a driver program that would allow me to test all the various combinations. 

Arrow Orientation: The N, S, E and W values choose the appropriate DrawArrow::ARROW_x value for CArrowButton::SetDirection.

Button Orientation:  This is just a quick way to exchange the Width and Height values.

Button Size:  This establishes the size in pixels of the width and height.

Button Color: This allows you to set the colors used for CArrowButton::SetLineColor, CArrowButton::SetBodyColor and CArrowButton::SetTextColor.

Text:  This creates a caption for the body, and selects the alignment BS_LEFT, BS_CENTER, or BS_RIGHT.

Enable:  This enables or disables the control.

The sample button itself is shown in the top right quadrant.  It is constrained to not exceed a specific area of the screen.

The tiny unlabeled button on the far right copies the button image to the clipboard, and that was how all the illustrations for this page were created.


download.gif (1234 bytes)

[Dividing Line Image]

The views expressed in these essays are those of the author, and in no way represent, nor are they endorsed by, Microsoft.

Send mail to newcomer@flounder.com with questions or comments about this web site.
Copyright 2007 FlounderCraft, Ltd.,  All Rights Reserved.
Last modified: May 14, 2011