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.

Example image 1
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:

Example image 2

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



Comments

  • How can I use this button in Visual Basic

    Posted by Legacy on 05/16/2003 12:00am

    Originally posted by: Jorge

    I've been looking for a control that can be rotated, and I think that this button is perfect, but, how can I use this button in Visual Basic?

    Reply
  • Non-rectangular Image Buttons

    Posted by Legacy on 06/25/2002 12:00am

    Originally posted by: Peter

    How about create a Non-rectangular Image Button
    I mean a button like a irregular shape window with a bitmap
    as background

    Reply
  • Fix for changing text

    Posted by Legacy on 05/01/2000 12:00am

    Originally posted by: Thibaut VIARD

    I have tried these cool buttons, they are nice.
    
    But when I modify the button text after having press it, the text is the same, because m_bNeedToRegenerateBitmaps is not set to TRUE. I have added a few lines in the function DrawItem. Now, when there is a paint, the function test if the text has changed, and then set the flag high so that the bitmaps are regenerated.

    <PRE><TT><FONT COLOR="#990000">
    // Paint the button with the correct bitmap:
    void CVtxButton::DrawItem( LPDRAWITEMSTRUCT lpDrawItemStruct )
    {
    ASSERT( lpDrawItemStruct != NULL ) ;

    CDC *pDC=CDC::FromHandle( lpDrawItemStruct->hDC ) ;
    CRect rect=lpDrawItemStruct->rcItem ;
    UINT state=lpDrawItemStruct->itemState ;
    CString sText ;

    if ( !m_vtxBtnPolygons.ValidPolygons() )
    SetVtx( VTX_RECT ) ;

    <B>
    GetWindowText( sText ) ;
    if ( m_sText != sText )
    {
    m_bNeedToRegenerateBitmaps=TRUE ;
    m_sText=sText ;
    }
    </B>
    if ( m_bNeedToRegenerateBitmaps || m_dwStyle != GetStyle() )
    {
    GenerateBitmaps( lpDrawItemStruct ) ;
    }

    if ( state & ODS_SELECTED )
    m_pBitmapDC->SelectObject( m_pBtnSelected ) ;
    else
    {
    if ( state & ODS_FOCUS )
    m_pBitmapDC->SelectObject( m_pBtnFocus ) ;
    else
    m_pBitmapDC->SelectObject( m_pBtn ) ;
    }

    pDC->BitBlt( 0, 0, rect.Width(), rect.Height(), m_pBitmapDC, 0, 0, SRCCOPY ) ;
    }
    </FONT></TT></PRE>

    Reply
Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

Most Popular Programming Stories

More for Developers

Latest Developer Headlines

RSS Feeds