您现在的位置：程式碼之家 >> 編程語言 > >> 更多程式語言 >> Delphi

Delphi 2009 TCategoryPanelGroup 進階：HeaderStyle 樣式切換完全指南

編輯：Delphi

TCategoryPanelGroup 視覺樣式控制

TCategoryPanelGroup 是 Delphi 2009 強化的可摺疊面板容器，其 HeaderStyle 屬性決定標題列渲染方式，提供三種內建樣式：

hsGradient：漸層填充 (預設)
hsImage：自訂圖片背景
hsThemed：跟隨系統主題

執行效果動畫

完整實作程式碼


uses ExtCtrls;

procedure TForm1.FormCreate(Sender: TObject);
begin
  // 初始化三個面板高度與標題
  CategoryPanel1.Height := ClientHeight div 2;
  CategoryPanel2.Height := CategoryPanel1.Height;
  CategoryPanel3.Height := CategoryPanel1.Height;
  CategoryPanel1.Caption := 'CPanel1';
  CategoryPanel2.Caption := 'CPanel2';
  CategoryPanel3.Caption := 'CPanel3';

  Button1.Caption := 'HeaderStyle := hsGradient';
  Button2.Caption := 'HeaderStyle := hsImage';
  Button3.Caption := 'HeaderStyle := hsThemed';
end;

procedure TForm1.Button1Click(Sender: TObject);
begin
  CategoryPanelGroup1.HeaderStyle := hsGradient;
end;

procedure TForm1.Button2Click(Sender: TObject);
begin
  // hsImage 需先載入圖片至 HeaderImage
  CategoryPanelGroup1.HeaderImage.LoadFromFile('c:\temp\hbg.bmp');
  CategoryPanelGroup1.HeaderStyle := hsImage;
end;

procedure TForm1.Button3Click(Sender: TObject);
begin
  CategoryPanelGroup1.HeaderStyle := hsThemed;
end;

三種 HeaderStyle 深度解析

1. hsGradient - 漸層模式 (預設)

由 GradientBaseColor (起始色) 到 GradientColor (結束色) 線性漸層
搭配 GradientDirection (gdHorizontal/gdVertical) 控制方向
效能最佳，無外部資源依賴

2. hsImage - 圖片模式

使用 HeaderImage (TImageList) 中的圖片作為標題背景
圖片會平鋪或拉伸填滿標題區域
需預先載入圖片：HeaderImage.LoadFromFile(...) 或設計期指定
適合品牌化介面、材質質感背景

3. hsThemed - 系統主題模式

完全委託 Windows 視覺樣式 API (UxTheme) 繪製
自動適應使用者選擇的系統主題 (Aero、Classic、高對比度等)
無法自訂顏色，字型由 HeaderFont 控制
最佳原生一致性體驗

進階自訂技巧

1. 動態切換漸層顏色


procedure TForm1.ApplyCustomGradient(BaseColor, EndColor: TColor; Direction: TGradientDirection);
begin
  CategoryPanelGroup1.HeaderStyle := hsGradient;
  CategoryPanelGroup1.GradientBaseColor := BaseColor;
  CategoryPanelGroup1.GradientColor := EndColor;
  CategoryPanelGroup1.GradientDirection := Direction;
end;

// 呼叫範例
ApplyCustomGradient(clNavy, clBlue, gdVertical);

2. 圖片模式九宮格繪製 (避免拉伸變形)


// 需自行繪製 OnPaint 事件或使用 TImageList 九宮格支援
// Delphi 內建不直接支援九宮格，建議 hsGradient + 自繪 或 第三方控件

3. 主題模式下自訂字型


procedure TForm1.SetHeaderFont(const FontName: string; Size: Integer; Color: TColor; Style: TFontStyles);
begin
  CategoryPanelGroup1.HeaderStyle := hsThemed;
  with CategoryPanelGroup1.HeaderFont do
  begin
    Name := FontName;
    Size := Size;
    Color := Color;
    Style := Style;
  end;
  // 強制重繪
  CategoryPanelGroup1.HeaderFont := CategoryPanelGroup1.HeaderFont;
end;

HeaderImage 圖片載入最佳實務

方式	程式碼	優缺點
設計期指定	物件檢視器設定 HeaderImage	✅ 部署簡單，❌ 執行期難動態更換
執行期 LoadFromFile	`HeaderImage.LoadFromFile('path')`	✅ 靈活，❌ 需部署圖片檔，路徑易出錯
資源檔載入	`HeaderImage.LoadFromResourceName(HInstance, 'RES_NAME')`	✅ 內嵌執行檔，✅ 部署無憂，推薦
Base64 解碼	程式碼內嵌 Base64 字串解碼載入	✅ 無外部依賴，❌ 程式碼膨脹

常見問題與解決方案

hsImage 不顯示圖片：確認 HeaderImage 已載入有效圖片，且圖片尺寸適合標題高度
hsThemed 在 Windows 7 Basic/Classic 模式下外觀差異：此為正常行為，hsThemed 正是依賴系統主題引擎
切換樣式後標題文字不見：檢查 HeaderFont.Color 是否與背景衝突，hsGradient 時建議設定對比色
動態切換閃爍：在 BeginUpdate/EndUpdate 或鎖定視窗更新間切換

總結

HeaderStyle 讓 TCategoryPanelGroup 具備從簡潔漸層、品牌圖片到原生主題的完整視覺適應力。掌握三種模式特性與切換技巧，配合 GradientBaseColor/Color、HeaderImage、HeaderFont 微調，即能打造符合產品定位的專業摺疊面板介面。