JvgPageControl Delphi + Vcl Styles Enabled问题上的左对齐选项卡答案

【问题标题】：Left aligned Tabsheets on JvgPageControl Delphi + Vcl Styles Enabled IssueJvgPageControl Delphi + Vcl Styles Enabled问题上的左对齐选项卡
【发布时间】：2014-01-26 17:00:09
【问题描述】：

在 Windows 默认外观上，标签页标题以水平方式显示（从左到右 1），启用 VCL 样式后，它们以垂直方式显示（从下到上 [2]）。我如何在 Delphi XE5 上解决这个问题？详细信息：我正在使用 JEDI-VCL 3.58 中的 JvgPageControl 组件。

我想创建一个类似的DisplayFusion欢迎屏幕界面[3]。欢迎提出建议！

图片：

提前致谢！

【问题讨论】：

我会有一个无边框的页面控件，没有任何可见的选项卡通过图像集控制它（看起来像选项卡）。

标签： delphi vcl-styles pagecontrol

【解决方案1】：

TJvgPageControl 使用与 TPageControl 控件相同的 vcl 样式挂钩 (TTabControlStyleHook)，因此您必须创建一个继承自 TTabControlStyleHook 的新样式挂钩并覆盖 DrawTab 方法。

检查这个基本实现以获取新样式挂钩

type
   TTabControlStyleHookExt = class(TTabControlStyleHook)
   protected
    procedure DrawTab(Canvas: TCanvas; Index: Integer); override;
   end;

   TCustomTabControlClass = class(TCustomTabControl);

{ TTabControlStyleHookExt }

procedure TTabControlStyleHookExt.DrawTab(Canvas: TCanvas; Index: Integer);
var
  R, LayoutR, GlyphR: TRect;
  ImageWidth, ImageHeight, ImageStep : Integer;
  LDrawState: TThemedTab;
  LDetails: TThemedElementDetails;
  ThemeTextColor: TColor;
  FImageIndex: Integer;
begin
  if TabPosition <> tpLeft then
  begin
    inherited ;
    exit;
  end;

  if (Images <> nil) and (Index < Images.Count) then
  begin
    ImageWidth := Images.Width;
    ImageHeight := Images.Height;
    ImageStep := 3;
  end
  else
  begin
    ImageWidth := 0;
    ImageHeight := 0;
    ImageStep := 0;
  end;

  R := TabRect[Index];
  if R.Left < 0 then Exit;

  if Index = TabIndex then
    Dec(R.Left, 2)
  else
    Dec(R.Right, 2);

  Canvas.Font.Assign(TCustomTabControlClass(Control).Font);
  LayoutR := R;

  if Index = TabIndex then
    LDrawState := ttTabItemLeftEdgeSelected
  else if (Index = HotTabIndex) and MouseInControl then
    LDrawState := ttTabItemLeftEdgeHot
  else
    LDrawState := ttTabItemLeftEdgeNormal;

  LDetails := StyleServices.GetElementDetails(LDrawState);
  StyleServices.DrawElement(Canvas.Handle, LDetails, R);

  { Image }
  if Control is TCustomTabControl then
    FImageIndex := TCustomTabControlClass(Control).GetImageIndex(Index)
  else
    FImageIndex := Index;

  if (Images <> nil) and (FImageIndex >= 0) and (FImageIndex < Images.Count) then
  begin
    GlyphR := LayoutR;

    GlyphR.Bottom := GlyphR.Bottom - ImageStep;
    GlyphR.Top := GlyphR.Bottom - ImageHeight;
    LayoutR.Bottom := GlyphR.Top;
    GlyphR.Left := GlyphR.Left + (GlyphR.Right - GlyphR.Left) div 2 - ImageWidth div 2;

    if StyleServices.Available then
      StyleServices.DrawIcon(Canvas.Handle, LDetails, GlyphR, Images.Handle, FImageIndex);
  end;

  { Text }

   if StyleServices.GetElementColor(LDetails, ecTextColor, ThemeTextColor) then
     Canvas.Font.Color := ThemeTextColor;

    //use the top tab style to draw the text
    if Index = TabIndex then
      LDetails := StyleServices.GetElementDetails(ttTabItemSelected)
    else
    if (Index = HotTabIndex) and MouseInControl then
      LDetails := StyleServices.GetElementDetails(ttTabItemHot)
    else
      LDetails := StyleServices.GetElementDetails(ttTabItemNormal);

     DrawControlText(Canvas, LDetails, Tabs[Index], LayoutR, DT_VCENTER or DT_CENTER or DT_SINGLELINE  or DT_NOCLIP);
end;

然后像这样注册新的样式钩子

initialization
  TStyleEngine.RegisterStyleHook(TJvgPageControl, TTabControlStyleHookExt);

【讨论】：