Non-rectangular Buttons

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