logo标签列表

Delphi中的Google Chrome风格标签页玻璃效果

delphidwmaero-glasstabbed-interface
16

我正在尝试在Delphi应用程序中实现类似Google Chrome的标签在Windows 7上的样式。

这其中的要素包括：

  • 标签可能会延伸到非客户端区域（就像Google Chrome本身一样）。
  • 当启用玻璃特效时，在Vista和Windows 7上绘制正确。
  • 在玻璃特效下，标签的功能和外观都与Google Chrome相似。

enter image description here

我发现需要克服的挑战有：

  • 如何使控件（VCL控件）延伸到非客户端区域？（VCL源代码中包含了一个执行此操作的良好示例：Ribbon控件，但我没有看到其他人这样做过，并且需要某些疯狂的黑客攻击才能使Ribbon功能正常）
  • 如何在玻璃特效下正确绘制位图？（DWM API）。相关问题已经回答了这个方面，该问题也是由我提出的。
缩小问题范围应该会有所帮助。现在，这个问题太宽泛了。 - Ruan Mendes
1
可能与直接相关性不大，但是在分发使用 Fluent UI（Microsoft 对于功能区 UI 的命名）的应用程序时，请注意许可证强制要求您遵循某些 Microsoft 强制实施的 UI 规则。如果您打算重新分发您的应用程序，我建议您首先检查是否有合法权利将 Fluent UI 与 Chrome 样式选项卡结合使用，然后再尝试找出代码解决方案。 - Mihai Limbășan
1
你可能会对http://delphihaven.wordpress.com/感兴趣。 - Andreas Rejbrand
这个问题已经有人在https://dev59.com/T2865IYBdhLWcg3wa980上提过，他想知道如何复制Chrome的选项卡。基本上，你需要自己画它们。 - David
自从我问了另一个问题，这个问题特别涉及到Google Chrome标签页，而不是关于一般的Paint On Glass资源。 - Warren P
4个回答
20

我刚刚完成了一个非常完整的Delphi Chrome Tab实现。

显示图片描述

它的功能包括：

  • 完全可配置的外观，包括渐变、透明度和自定义选项卡形状
  • 在使用Aero时，标签可以绘制在标题栏中
  • 适用于Vista玻璃效果
  • 选项卡移动动画
  • 选项卡转换样式特效(淡入淡出颜色和透明度)
  • 容器内和容器之间的拖放
  • 拖动图像显示选项卡和任何TWinControl
  • 智能选项卡缩放，当用户单击关闭按钮
  • 流畅的选项卡缩放，具有最小和最大选项卡大小
  • 添加选项卡按钮可以位于左侧、右侧或右侧浮动位置
  • 完善的滚动功能，包括拖动自动滚动
  • 智能选项卡内容显示，根据选项卡宽度隐藏/显示项目
  • 所有项目均可自定义
  • 从右到左文本
  • 固定选项卡
  • 选项卡旋转器-可呈现和位图。
  • 具有动画发光效果的修改后的标签
  • 选项卡图像和叠加图像
  • 鼠标悬停效果
  • 许多事件
  • 加载/保存外观和选项流/文件
  • 生成查看和编辑Delphi代码

您可以在此处下载源代码和完整演示/编辑器：http://code.google.com/p/delphi-chrome-tabs/

3
太好了。我将尝试构建一个帮助组件，将选项卡集成到非客户区域，就像Google Chrome那样。 - Warren P
1
听起来很有前途。您能否上传已编译的EXE文件呢？;) - kobik
3
@kobik - 完成了。您可以在此处找到它 http://code.google.com/p/delphi-chrome-tabs/downloads/list - norgepaul
2
哇，刚刚开始运行exe演示，我印象深刻！非常精致，而且运行流畅。当你拖动选项卡时，选项卡内容透明地显示出来并且可以将其放置在另一个表单上，这非常棒。 - Wouter van Nifterick
1
我认为你应该因此获得了“死灵法师”徽章 :-) - Wouter van Nifterick
显示剩余2条评论
7
您不想要一个完整的玻璃窗口，但您将不得不自己绘制选项卡，因为我不知道有什么控件可以给您所需的确切外观。如果使用当前表单的GlassFrame属性，启用它并将顶部设置为选项卡所需的高度，在此区域放置一个paintbox，并使用GDI+调用手动绘制选项卡。可用于此的一个很好的库在EDN上可用(http://cc.embarcadero.com/Download.aspx?id=26950)。如果不使用GDI+，您将能够绘制到paint box中，但黑色将变成透明。使用GDI+，您可以以任何颜色自由绘制到玻璃上。例如:

running example

来源：

unit Unit6;

interface

uses
  Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms,
  Dialogs, GdiPlusHelpers, GdiPlus, StdCtrls, ExtCtrls;

type
  TForm6 = class(TForm)
    pb1: TPaintBox;
    procedure pb1Paint(Sender: TObject);
  private
    { Private declarations }
   public
    { Public declarations }
  end;

var
  Form6: TForm6;

implementation

{$R *.dfm}

procedure TForm6.pb1Paint(Sender: TObject);
var
  Graphics : IGPGraphics;
  Brush: IGPSolidBrush;
  FontFamily: IGPFontFamily;
  Font: IGPFont;
  Point: TGPPointF;
  Pen: IGPPen;
begin
  Graphics := Pb1.ToGPGraphics;
  Brush := TGPSolidBrush.Create(TGPColor.Create(255, 0, 0, 0));
  FontFamily := TGPFontFamily.Create('Consolas');
  Font := TGPFont.Create(FontFamily, 12, FontStyleRegular, UnitPoint);
  Point.Initialize(1, 0);
  Graphics.TextRenderingHint := TextRenderingHintAntiAlias;
  Graphics.DrawString('GDI+ Black Text', Font, Point, Brush);
  Pen := TGPPen.Create(TGPColor.Create(255, 0, 0, 0));
  Graphics.DrawLine(Pen, 0, 0, 200, 100);
end;

end.

表单：

object Form6: TForm6
  Left = 0
  Top = 0
  Caption = 'Form6'
  ClientHeight = 282
  ClientWidth = 418
  Color = clBtnFace
  Font.Charset = DEFAULT_CHARSET
  Font.Color = clWindowText
  Font.Height = -11
  Font.Name = 'Tahoma'
  Font.Style = []
  GlassFrame.Enabled = True
  GlassFrame.Top = 22
  OldCreateOrder = False
  PixelsPerInch = 96
  TextHeight = 13
  object pb1: TPaintBox
    Left = 0
    Top = 0
    Width = 313
    Height = 105
    OnPaint = pb1Paint
  end
end

编辑：已更新文本反锯齿处理，使其看起来更好。

忘了提一下——GDI+已经随XP系统自带，因此即使玻璃效果不可用，它也可以使用。您只是无法使用后来的GDI+ 1.1附加功能，这些功能主要涉及额外的抗锯齿和一些图像变换。 - skamradt
7
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接