Google Chrome style tabs on glass in Delphi

R

4

16

I am trying to implement Google Chrome style tabs, in Windows 7, in a Delphi application.

The elements of this are:

tabs may extend into the non-client area as they do in google chrome itself.
draws properly on Vista and Windows 7 when glass is enabled
tabs work just like google chrome, and look like google chrome, over glass.

enter image description here

I have found that the challenges I have to overcome are:

How do I get a control (VCL control) to extend into the non-client area? (A good sample of a control that does this is the Ribbon control included in the VCL sources, but I haven't seen anybody else do it, and it takes some wicked hacking to get the Ribbon to function)
How to draw bitmaps properly over glass? (DWM API). A related question already answers that aspect, here, this question was also asked by me.

Rotl answered 13/10, 2010 at 14:24 Comment(5)

Narrowing down the scope of the question should help. Right now, it's too broad a question. – Clifford 13/10, 2010 at 14:45

Probably not directly relevant, but please be careful when distributing applications using the Fluent UI (Microsoft's name for the ribbon UI) - the license forces you to follow certain Microsoft-imposed UI rules. If you intend to redistribute your app, I'd first check whether you're legally allowed to use the Fluent UI combined with Chrome-style tabs at all before trying to figure out a code solution. – Topmast 13/10, 2010 at 16:25

You might be interested in delphihaven.wordpress.com – Herson 13/10, 2010 at 17:25

Close to a duplicate of #3823109 - the questioner there wanted to know how to duplicate Chrome's tabs. Basically, you'll have to draw them yourself. – Educationist 22/10, 2010 at 0:40

Since I asked the other question, this one is specifically about Google Chrome Tabs, not about general Paint On Glass resources. – Rotl 13/12, 2012 at 16:49

U

7

You don't want a full glass window, but you will have to draw the tabs yourself as there isn't a control that I am aware of that will give you the exact look your looking for. If you use the GlassFrame properties of the current form, enable it and set the top to the height you will want for your tabs, drop a paintbox on this area and use GDI+ calls to draw your tabs manually. A good library that should work for this is available on the EDN (http://cc.embarcadero.com/Download.aspx?id=26950). Without using GDI+ you will be able to draw to the paint box, but black will become transparent. With GDI+ you can draw freely to the glass in any color. For example:

running example

Source:

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.

Form:

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

EDIT Updated to anti-alias the text so it looks better.

Urbana answered 13/10, 2010 at 17:3 Comment(1)

Forgot to mention -- GDI+ ships with XP out of the box, so it can be used even if the glass effects are not available. You just can't use the later GDI+ 1.1 additions, which mostly have to do with additional anti-aliasing and some image transformations. – Urbana 14/10, 2010 at 21:8

P

20

I've just completed a pretty much complete implementation of Chrome Tabs for Delphi.

enter image description here

The features include:

Fully configurable Look and Feel including gradients, transparencies and custom tab shapes
Tabs can be painted in the title bar when using Aero
Works on Vista glass
Tab movement animation
Tab transitional style effects (fade between colours and alpha levels)
Drag and Drop within container and between containers
Drag image displays tab and any TWinControl
Smart tab resizing when user clicks close button
Fluid tab resizing with minimum and maximum tab sizes
Add tab button can be positioned on the left, right or floating right
Full featured scrolling including auto scroll when dragging
Smart tab content display hides/shows items depending on the tab width
Owner draw any item
Right to Left text
Pinned tabs
Tab spinners - both rendered and bitmap.
Modified tabs with animated glow
Tab images and overlay images
Mouse over glow
Lots of events
Load/save look and feel and options to stream/file
Generate look and feel/options Delphi code

You can download the source and a full demo/editor here: http://code.google.com/p/delphi-chrome-tabs/

Pathological answered 12/12, 2012 at 15:48 Comment(7)

This is great. I am going to see if I can build a helper component that will integrate the tabs into the non-client area sort of the way Google Chrome does it. – Rotl 12/12, 2012 at 21:27

Sounds promising. can you upload a compiled EXE also? ;) – Lucrece 13/12, 2012 at 14:53

@Lucrece - Done. You can find it here code.google.com/p/delphi-chrome-tabs/downloads/list – Pathological 13/12, 2012 at 16:45

Wow, just started the exe demo and I'm impressed! Very polished, and it works smooth.. Very nice how the content of the tab is shown transparently when you drag it and that you can drop it on another form. – Carlile 14/12, 2012 at 0:5

I think you've deserved your necromancer badge for this one :-) – Carlile 14/12, 2012 at 0:11

I'm very impressed with this, thank you :-) My only struggle is that it does not have a VCL style hook, so I have to manually adjust the colors. Any plans on that? – Exuberance 27/1, 2015 at 0:10

@JerryDodge - Thanks :) I have no plans to implement the style hook as I don't use Delphi Styles. Feel free to implement it yourself though and I'll happily add include functionality. – Pathological 27/1, 2015 at 11:2

U

7

You don't want a full glass window, but you will have to draw the tabs yourself as there isn't a control that I am aware of that will give you the exact look your looking for. If you use the GlassFrame properties of the current form, enable it and set the top to the height you will want for your tabs, drop a paintbox on this area and use GDI+ calls to draw your tabs manually. A good library that should work for this is available on the EDN (http://cc.embarcadero.com/Download.aspx?id=26950). Without using GDI+ you will be able to draw to the paint box, but black will become transparent. With GDI+ you can draw freely to the glass in any color. For example:

running example

Source:

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.

Form:

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

EDIT Updated to anti-alias the text so it looks better.

Urbana answered 13/10, 2010 at 17:3 Comment(1)

Forgot to mention -- GDI+ ships with XP out of the box, so it can be used even if the glass effects are not available. You just can't use the later GDI+ 1.1 additions, which mostly have to do with additional anti-aliasing and some image transformations. – Urbana 14/10, 2010 at 21:8

R

7

Found much later, From Klever Components:

http://rmklever.com/?p=248

enter image description here

Rotl answered 30/6, 2011 at 1:26 Comment(0)

D

0

Painting in the caption of a glassy form explained here: http://delphihaven.wordpress.com/2010/04/22/setting-up-a-custom-title-bar-reprise/ Also you can look in to the sources of delphi's ribbon controls.

Duel answered 13/12, 2012 at 9:52 Comment(0)

Recommended topics

Hot tags