C++ Builder: Colored buttons

A button doesn't have a Color property.
But we can simulate a colored button by using a TPanel component.

The third example is not a "colored" button, but we use a similar technique for simulating a button with an image on top of it.

In order to visually simulate a down / up movement, we'll change the panel's BevelOuter to bvLowered when the mouse button goes down, and back to bvRaised when the mouse is released.
In the handler for the OnMouseDown event of each panel, we could write:

   PanelX->BevelOuter = bvLowered; // where X is 1, 2 or 3

But then we would have to write two event handlers for each panel (one for down and one for up), which would become tiresome if we had a lot of these "panel-buttons". Therefore, we'll write the following, meaning "treat the sender Object as a TPanel component":

   ((TPanel*)Sender)->BevelOuter = bvLowered;

Let's give it a try:

1. Drop 3 panels on the form.
   Set their property BevelWidth to 2.
   Add a TImage on top of Panel3 and select a small image for its Picture property.
   Also add a TLabel to Panel3 and set its Caption to "Up!".
2. Write a handler for the OnMouseDown event of Panel1 and one for OnMouseUp:

   void __fastcall TForm1::Panel1MouseDown(TObject *Sender,
     TMouseButton Button, TShiftState Shift, int X, int Y)
   {
     ((TPanel*)Sender)->BevelOuter = bvLowered;
   }
   
   void __fastcall TForm1::Panel1MouseUp(TObject *Sender,
     TMouseButton Button, TShiftState Shift, int X, int Y)
   {
     ((TPanel*)Sender)->BevelOuter = bvLowered;
   }

3. In Design mode, select Panel2.
   In the Object Inspector, select the Events tab.
4. Click next to OnMouseDown, click the downward arrow and select Panel1MouseDown from the list.
5. Click next to OnMouseUp and select Panel1MouseUp from the list.
6. Repeat the 3 previous steps for Panel3.
7. Here's an event handler for the OnClick of Panel1:

   void __fastcall TForm1::Panel1Click(TObject *Sender)
   {
     Panel1->Caption = "Clicked";
   }

8. Deal with the OnClick of Panel2: if the color is not "lime", set it to lime, else set it to blue:

   void __fastcall TForm1::Panel2Click(TObject *Sender)
   {
     if (Panel2->Color != clLime)
       Panel2->Color = clLime;
     else
       Panel2->Color = clBlue;
   }

9. And for the OnClick of Panel3: if the panel is not to close to the top of the form, move it up 20 pixels:
   

   void __fastcall TForm1::Panel3Click(TObject *Sender)
   {
     if (Panel3->Top > 20)
       Panel3->Top = Panel3->Top - 20;
   }

10. In Design mode, select Image1.
    In the Object Inspector, select the Events tab.
    Click next to OnClick, click the downward arrow and select Panel3Click.
11. Finally, add two extra event handlers, one for Image1's OnMouseDown and one for its OnMouseUp:

    void __fastcall TForm1::Image1MouseDown(TObject *Sender,
      TMouseButton Button, TShiftState Shift, int X, int Y)
    {
      Panel3->BevelOuter = bvLowered;
    }
    
    void __fastcall TForm1::Image1MouseUp(TObject *Sender,
      TMouseButton Button, TShiftState Shift, int X, int Y)
    {
      Panel3->BevelOuter = bvRaised;
    }