Discussion :

[pepito62]

Bonjour à tous,

Sur Delphi XE2 ou XE3, je souhaite que mon application prenne la forme de mon image arrière plan, sans bordure... (Exemple : image triangle avec transparence autour)

Apparemment cette fonctionnalité est native dans XE2/XE3 (en modifiant les propriété du TForm) car je l'ai vu en formation par Embarcadero

Comment faire ?

Merci

[Andnotor]

Il faut jouer avec TransparentColor et TransparentColorValue.

[ShaiLeTroll]

Pas que XE, mais déjà en 2007 (peut-être même depuis D6), c'est depuis windows 2K (5.0) que cela gère la transparence sans devoir soit même manipulé les Régions.

Tout ce passe sur la TForm
Passe BorderStyle à bsNone pour retirer les bords et le titre
Comme le propose Andnotor affecte TransparentColor à true et TransparentColorValue à clFuchsia (une couleur rare dans une image) !

Avec un TShape en stRoundRect, tu peux avoir une fenêtre avec des coins arrondis, moi j'ai fait ainsi une info bulle avec bouton, mon TShape est en Color clInfoBk

Avec d'autre TShape ou TPanel, tu peux ajouter des zones transparentes à l'intérieur de la TForme et choisissant Color clFuchsia

Avec un TImage\TPaintBox, je ne l'ai pas testé mais en théorie, tout pixel en clFuchsia seront transparents en fait, cela sera même un "trou" dans la fenêtre, donc tu pourras cliquer "à travers" et accéder à la fenêtre derrière celle de ton appli

[tarekk73]

oui mai le probleme c qon ton click sur la zone transparente la forme prend la focalisation dans D5 D6 et D7

[pepito62]

Merci beaucoup, c'est bien ça !

oui mai le probleme c qon ton click sur la zone transparente la forme prend la focalisation

En tout cas, pas avec XE2 ou XE3.

[pepito62]

Est-ce que c'est le meilleur moyen pour faire une popup de ce style ?
Avec un Timage déposer sur la form ?

[Andnotor]

Est-ce que c'est le meilleur moyen pour faire une popup de ce style ?

Non, parce que la transparence par couleur est un mode tout-ou-rien. Pour avoir des effets d'ombré (et de l'anticrénage en général), il faut de la transparence partielle. C'est l'autre mode utilisable des fenêtres en mode Layered mais ça demande de gérer soi-même un bitmap 32 bits et ce mode n'est pas compatible avec des champs d'édition.
Cela implique donc d'utiliser deux fiches superposées. L'une transparente par couleur (comme actuel) en premier plan qui ne laisse visible que les champs et une deuxième en fond gérée par bitmap 32 bits.

On peut bien sûr aussi générer le bitmap en fonction du contenu des champs (ils sont invisibles, mais fonctionnelles) et n'afficher qu'une fiche avec ce bitmap dynamique, mais dans tous les cas,... y'a du boulot

C'est plus ou moins ce que j'avais fait ici.

[pepito62]

Et il n'existe pas de composant Delphi pour faire des popup ?

Et si je n'utilise pas d'effet ombragé ni d'anticrénage...juste une image blanche avec un triangle comme fleche.

C'est la bonne méthode ? Comment ferez-vous autrement sinon sans être usine à gaz.

Autre question :
Comment avoir une fleche toujours à la même position et qui ne s'agrandi pas lorsque j’agrandis/rétrécis la forme ?

Merci !

[Andnotor]

Et si je n'utilise pas d'effet ombragé ni d'anticrénage...juste une image blanche avec un triangle comme fleche.

C'est la bonne méthode ?

N'était-ce pas ta question originale sur TransparentColor ?

Comment avoir une fleche toujours à la même position et qui ne s'agrandi pas lorsque j’agrandis/rétrécis la forme ?

Si tu utilises un composant et que tu n'as pas modifié sa propriété Anchors, il ne sera ni déplacé, ni redimensionné.

[pepito62]

Oui moi je fais ma popup avec cette solution mais je demande s'il y avait mieux comme solution pour faire une popup.

Pour mon cas, j'ai fait une form sans bordure, avec un Panel et un shape triangle. En mettant la transparence sur la forme, ça fonctionne.

Il me manque plus cas mettre un trait (cadre) autour du panel.
J'ai fait un petit test mais j'ai un autre "souci", j'ai le trait sous le triangle...

Un peu comme ça :

__/_\__


Et il me faudrait ça :

__/ \__


Désolé pour l'exemple

[Andnotor]

Dessine-le à la main dans OnPaint:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
procedure TForm1.FormPaint(Sender: TObject);
const
  Pts :array[0..2] of TPoint = ((X:40; Y:20), (X:60; Y:0), (X:80; Y:20));
 
begin
  with Canvas do
  begin
    Brush.Color := clWhite;
    Pen.Color   := clPurple;
 
    //Rectangle arrondi
    RoundRect(0, Pts[0].Y, ClientWidth -1, ClientHeight -1, 10, 10);
 
    //Flèche
    Polygon(Pts);
 
    //Efface le trait entre triangle et rectangle
    Pen.Color := clWhite;
    MoveTo(Pts[0].X +1, Pts[0].Y);
    LineTo(Pts[2].X, Pts[2].Y);
  end;
end;

[ShaiLeTroll]

Pour ton écran, sans l'effet d'ombre, le TImage comme dans mes zip, c'est un peu lourd, la solution de AndNotOr est plus élégante !

c'est très simple et correspond justement à ce que j'évoquais avec une "info bulle avec bouton" avec des TShape

oui mai le probleme c qon ton click sur la zone transparente la forme prend la focalisation

quelle forme ?
Celle qui est transparent : non
Celle qui est en dessous : oui

Si tu veux essayé tarekk73, voici en gros ce que fait pepito64

Sans aucun code pour gérer la transparance, voir le DFM fourni, il contient une image avec 16 couleurs dont seules 4 sont exploitées :
Blanc et Noir sont affichées
Fuchsia comme transparence de la fenêtre => Trou
Green comme transparence de l'image (ce qui revient au même que mettre du Fuchsia) => Trou

Et j'ai mis des trous, si l'on clique, cela clique sur la fenêtre en dessous !

J'ai pas Delphi mais C++Builder 6 sur XP3 !
J'ai mis cette fenêtre comme fenêtre principale d'un projet, clic droit pour quitter, clic gauche maintenu pour déplacer l'image (petite astuce au passage car par défaut, on ne pas déplacer le popup),

EDIT :
Merci AndNotOr, j'ai repris ton code en C++ au lieu de mon Shape pour mon info bulle, c'est bien plus joli juste avec ce petit triangle, cela fait tout le charme

Code c++ :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
void __fastcall TShaiDVRDahuaTechnology_DAVFileFormatNoticeForm::FormPaint(TObject *Sender)
{
    const TPoint TrianglePoints[3] = {TPoint(40,10), TPoint(50, 0), TPoint(60, 10)};
 
    this->Canvas->Brush->Color = clInfoBk;
    this->Canvas->Pen->Color   = clBlack;
 
    // Rectangle arrondi
    this->Canvas->RoundRect(0, TrianglePoints[0].Y, ClientWidth - 1, ClientHeight - 1, 30, 30);
 
    // Flèche
    this->Canvas->Polygon(TrianglePoints, 2);
 
    // Efface le trait entre triangle et rectangle
    this->Canvas->Pen->Color = clInfoBk;
    this->Canvas->MoveTo(TrianglePoints[0].X +1, TrianglePoints[0].Y);
    this->Canvas->LineTo(TrianglePoints[2].X, TrianglePoints[2].Y);}

[pepito62]

J'avais complètement oublié qu'on pouvait faire comme ceci...

Merci beaucoup, ça fonctionne très bien.

[cincap]

Bonjour à toutes et à tous,

@ Andnotor, génial cette astuce, j'ai testé sous D6 et Seven 64bits.

Petite question on pourrait certainement adapter un effet shadow sur le coté droit et bas.

A ce sujet mes essais ne sont pas concluants en rajoutant ton code au code shadow.

@+,

Cincap

[Andnotor]

Non, tu ne peux pas sur ce principe puisque le canal alpha vaut soit 0 (transparent) soit 255 (opaque).
Pour avoir un effet d'ombré correct (transparence partielle), tu es obligé de travailler sur un bitmap 32 bits en mémoire, de jouer sur le canal alpha et de le reporter manuellement sur la fiche par UpdateLayeredWindow. WM_PAINT n'est même plus envoyé en mode Layered !

[cincap]

@ Andnotor, merci pour les précisions.

A toutes fins, voici un aperçut de mon test avec effet Shadow et déplacement, les composants ne sont pas renommés :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
 
private
    { Déclarations privées }
  protected
    procedure CreateParams(var Params: TCreateParams); override; //Effet Shadow !
  public
    { Déclarations publiques }
  end;
 
var
  Form1: TForm1;
 
implementation
 
{$R *.dfm}
 
//Effet Shadow
procedure TForm1.CreateParams(var Params: TCreateParams);
const
  CS_DROPSHADOW = $00020000;
begin
  inherited;
  Params.WindowClass.Style := Params.WindowClass.Style or CS_DROPSHADOW;
end;
//Fin
 
//Popup Andnotor 2013
procedure TForm1.FormPaint(Sender: TObject);
const
  Pts :array[0..2] of TPoint = ((X:40; Y:20), (X:60; Y:0), (X:80; Y:20));
begin
  with Canvas do
  begin
    Brush.Color := clblue;
    Pen.Color   := clfuchsia;
 
    //Rectangle arrondi
   RoundRect(0, Pts[0].Y, ClientWidth -1, ClientHeight -1, 10, 10);
 
    //Flèche
    Polygon(Pts);
 
    //Efface le trait entre triangle et rectangle
    Pen.Color := clblue;
    MoveTo(Pts[0].X +1, Pts[0].Y);
    LineTo(Pts[2].X, Pts[2].Y);
  end;
end;
 
procedure TForm1.Button1Click(Sender: TObject);
begin
close;
end;
 
//Déplacement de la fiche
procedure TForm1.FormMouseDown(Sender: TObject; Button: TMouseButton;
  Shift: TShiftState; X, Y: Integer);
begin
ReleaseCapture;
        Form1.Perform(WM_SysCommand, $F012, 0);
end;
end.

@+,

Cincap

[Andnotor]

Pour que CS_DROPSHADOW fonctionne, il faut découper la fiche en utilisant des régions, sinon l'ombre sera toujours rectangulaire. Jouer sur TransparentColor ne change pas la forme de la fenêtre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
procedure TForm1.CreateParams(var Params: TCreateParams);
const
  CS_DROPSHADOW = $00020000;
begin
  inherited;
  Params.WindowClass.Style := Params.WindowClass.Style or CS_DROPSHADOW;
end;
 
procedure TForm1.FormCreate(Sender: TObject);
const
  Pts :array[0..2] of TPoint = ((X:40; Y:20), (X:60; Y:0), (X:80; Y:20));
 
var
  Rgn1, Rgn2 :hRgn;
 
begin
  //Rectangle arrondi
  Rgn1 := CreateRoundRectRgn(0, Pts[0].Y, ClientWidth -1, ClientHeight -1, 10, 10);
 
  //Flèche
  Rgn2 := CreatePolygonRgn(Pts, Length(Pts), WINDING);
 
  //Combine les deux régions...
  CombineRgn(Rgn1, Rgn1, Rgn2, RGN_OR);
 
  //...et applique le résultat
  SetWindowRgn(Handle, Rgn1, TRUE);
 
  DeleteObject(Rgn1);
  DeleteObject(Rgn2);
end;

[cincap]

@ Andnotor, génial, merci pour cette leçon, cela servira à beaucoup de monde me semble t'il.

@+,

Cincap