Drawing on a TStatusBar Panel: Back Color, Font Color, Graphics

Delphi's TStatusBar control displays a row of panels. The Panels property is a collection of TStatusPanel objects.

By default a string assigned to the Text property of a Panel, gets drawn on the Panel of the status bar.

Beside the Bevel property, a Panel has only a few properties - and none of those let you change the background color or the font color of the text displayed on the Panel.

To have a more eye-caching user friendly interface you might want to decide to add graphics, change the color and the font style of a StatusBar Panel.

In order to accomplish this, you need to change how Status Bar Panels are drawn.

The default setting for the TStatusPanel's Style property is "stText", meaning the string contained in the Text property is displayed in the status panel, using the alignment specified by Alignment.

Styling a Panel on a Status Bar

If Style is set to psOwnerDraw, the content displayed in the status panel is drawn at runtime on the status bar’s canvas by code in an OnDrawPanel event handler.

You can either set the Style for each panel you want to draw using owner drawing in code (as below) at run-time, or by using the Object Inspector at design-time.

//Change drawing style of StatusBar Panels
procedure TStatusForm.FormCreate(Sender: TObject) ;
begin
  StatusBar1.Panels[0].Style := psOwnerDraw;
  StatusBar1.Panels[1].Style := psOwnerDraw;
end;

Owner Drawing of a StatusBar Panel

Owner drawing in Delphi, let's you take over the control of how a control is drawn.

To display an image on the Status Bar Panel, change the back color and even the font color, you need to handle the OnDrawPanel event of a TStatusBar control.

Here's an example, where two Panels are drawn using code, images are being stored in a TImageList control.

1. Drop a TStatusBar (name: "StatusBar1") on a Delphi form.
2. Drop a TImageList (name: "ImageList1").
3. Add 2 bitmap images to the image list
4. Add 3 Panels to the status bar
5. Use the code above to set owner drawing for the first two panels (in the form's OnCreate event)
6. Use the code below to apply custom drawing of the first to panels by adding graphics, applying different font and panel color. Do this inside the OnDrawPanel event of the StatusBar1.

procedure TStatusForm.StatusBar1DrawPanel(
  StatusBar: TStatusBar;
  Panel: TStatusPanel;
  const Rect: TRect) ;
begin
  with StatusBar.Canvas do
  begin
    case Panel.Index of
      0: //fist panel
      begin
        Brush.Color := clRed;
        Font.Color := clNavy;
        Font.Style := [fsBold];
      end;
      1: //second panel
      begin
        Brush.Color := clYellow;
        Font.Color := clTeal;
        Font.Style := [fsItalic];
      end;
    end;
    //Panel background color
    FillRect(Rect) ;

    //Panel Text
    TextRect(Rect,2 + ImageList1.Width + Rect.Left, 2 + Rect.Top,Panel.Text) ;
  end;

  //draw graphics
  ImageList1.Draw(StatusBar1.Canvas, Rect.Left, Rect.Top, Panel.Index) ;
end;

The trick is in the Canvas property. By using the methods of the TCanvas class (TextRect, FillRect) and the Draw method of the TImageList we accomplished full custom drawing of the Panels of a status bar.

That's all. Note: by implementing the OnClick event for a Panel on a TStatusBar you'll provide even more options to the users of your Delphi application.