Non-rectangular Buttons

The purpose of CVtxButton is to create custom-shaped buttons that mimic the
standard Windows user-interface. As the user of this class, you define the shape
of the button using a set of simple polygons. CVtxButton then calculates the
angle at which light is hitting each side of the button and uses this in
combination with the current system colors to shade each side properly. The
CVtxButton class provides both the functionality of Chris Maunder’s
CRoundButton and Phileppe Dykmans’ stretched
CRoundButton in a more efficient and
abstract manner. In addition to their implementations, it also has predefined
behavior for drawing a standard rectangle, a vertically stretched round button,
and a diamond.

Below is a screen shot of the demo application‘s
main dialog. The CVtxButton is shown normal, ODS_DISABLED, and BS_FLAT, using the
predefined polygon shapes VTX_RECT, VTX_DIAMOND, VTX_CIRCLE, and VTX_STRETCHEDCIRCLE.

Download Source Code and
Example project.

Environment: Microsoft Developer Studio: Visual C++ 5.0 – SP3, Windows95

Using CVtxButton

Implementing the CVtxButton class is surprisingly easy:

1. Include Vtx.h, Vtx.ccp, VtxButton.h, and VtxButton.cpp in your project.
2. Drop a button on your dialog in Developer Studio.
3. Add #include "VtxButton.h" immediately
   before #include "MyDlg.h" in MyDlg.cpp and
   MyApp.cpp.
4. For each button on the dialog that you want to be a CVtxButton, add
   CVtxButton m_cButton1; immediately
   after //{{AFX_DATA(CMyDlg) in the public
   section of your dialog class’ specification.
5. Also add DDX_Control(pDX, IDC_BUTTON1, m_cButton1);
   immediately after //{{AFX_DATA_MAP(CMyDlg)
   in DoDataExchange() for each button.

This is enough to create a default CVtxButton. The button is drawn as a rectangle
that takes up the entire client area. The sides will not be shaded the same as CButton
because they are colored according to the difference of their angle and the angle of
light source. If you use at least one CVtxButton on a dialog, it is suggested that
you change all your CButton’s to CVtxButton’s to maintain a coordinated look. If you
want to change the look of the CVtxBuUtton, there are two ways of doing so:

1. Use a predefined shape by adding
   m_cButton1.SetVtx(VTX_RECT); to OnInitDialog()
   in MyDlg.cpp. There are four predefined shapes which can be passed as an argument to
   SetVtx():

   VTX_RECT
   VTX_DIAMOND
   VTX_CIRCLE
   VTX_STRETCHEDCIRCLE
   

2. Create a CVtxPolygons object and pass it as an argument to SetVtx():
   

   CRect rect;
   m_cButton1.GetClientRect(&rect);            // Get the button’s original dimensions
   CVtxPolygons vtxPolygons;
   int offset[4] = {0, 1, 2, 4};
   for (int i = 0; i < 4; i++)                 // Iterate through each of the polygons
   {
       // Add the corners
       vtxPolygons.Add(i, CVertex(rect.left + offset[i], rect.top + offset[i]));
       vtxPolygons.Add(i, CVertex(rect.right – offset[i] – 1, rect.top + offset[i]));
       vtxPolygons.Add(i, CVertex(rect.right – offset[i] – 1, rect.bottom – offset[i] – 1));
       vtxPolygons.Add(i, CVertex(rect.left + offset[i], rect.bottom – offset[i] – 1));
   }
   vtxPolygons.ClosePolygons();                // Close the polygons off
   m_cButton1.SetVtxPolygons(&vtxPolygons);    // Set the button’s polygons
   

Technical Information

CVtxButton is implemented through the use of three classes: CVtxButton itself,
CVtxPolygons, and CVertex. To understand how CVtxButton works it is crucial to
understand each of these classes.

CVertex is essentially a CPoint; however, it is an object derived from CObject,
not a structure. It has two member variables, x and y, and has just enough
constructors and operators to work with CVtxPolygons. It is not a full-featured
storage class.

CVtxPolygons is a storage class specifically designed for use with CVtxButton.
It contains a private array of four CObArray’s called m_oaPolygons. Each CObArray
is a list of CVertex’s which defines a polygon. These polygons can be tweaked
through the use of member functions such as GetSize(), SetAt(), and RemoveAll().

CVtxButton is the button itself, derived from CButton. It draws itself using the
m_vtxBtnPolygons member variable, which is of type CVtxPolygons. Each CObArray in a
CVtxPolygons object represents a different part of the button. The CObArray at
index 0 is the outer border of the button. At index 1 the CObArray is the middle
border of the button. Index 2 is the inner border, and index 3 is the focus polygon.
If the button is not selected, only the outer and middle polygons are drawn. If the
button is focused or selected, all the polygons are drawn.

Here is another example of using CVtxButton:

CRect rect;
m_cButton1.GetClientRect(&rect);
CVtxPolygons vtxPolygons;
int offset[4] = {0, 1, 2, 4};
for (int i = 0; i < 4; i++)
{
    vtxPolygons.Add(i, CVertex(rect.left + rect.bottom / 4 + offset[i], rect.top + offset[i]));
    vtxPolygons.Add(i, CVertex(rect.right – offset[i] * 7 / 4 – 1, rect.top + offset[i]));
    vtxPolygons.Add(i, CVertex(rect.right – rect.bottom / 4 – offset[i] – 1, rect.bottom – offset[i] – 1));
    vtxPolygons.Add(i, CVertex(rect.left + offset[i] * 7 / 4, rect.bottom – offset[i] – 1));
}
vtxPolygons.ClosePolygons();
m_cButton1.SetVtxPolygons(&vtxPolygons);

This example creates a button that looks something like this:

The code is rather straight-forward. For further implementation details your best
source of information will be to snoop around the code. If there are any questions
feel free to send me e-mail at
hiltonc@softhome.net.

Last updated: 4 July 1998