Delphipage

Pourquoi créer ses propres boutons ?

Pour q'une application rencontre aujourd'hui du succès, il faut quelques choses que les autres non pas. L'interface d'une application prend donc une part importante dans ce jugement.
C'est pour cela qu'avoir des boutons personnalisés, que l'on ne rencontre pas dans les autres applications, devient alors en plus.
Lors de création de jeux vidéos, les boutons standard de delphi ne sont plus utilsés et font place alors àdes autres types de bouton plus visuels.

Je vous propose trois solutions de création différentes de boutons.
- Transformer un composant TButton
- Utiliser un composant TPanel
- Utiliser deux composants TImage

Transformer un composant TButton

Ici, il s'agit de changer l'aspect du composant TButton.
Voici ce que vous obtiendrez :

Il est très facile d'obtenir ce résultat.

Tout d'abord, glissez dans la fiche un composant TButton qui se touve dans l'onglet standard de la palette de composants de delphi. Ensuite, il faut changer la forme du bouton. Pour cela cliquez dans la propiété OnCreate de la form et ajoutez ceci :

procedure TForm1.FormCreate(Sender: TObject);
var rgn : hrgn;
begin
//Changement de forme du bouton (carré avec bord arrondi)
with Form1.Button1 do
begin
rgn:=CreateRoundRectRgn(0,0,width,height,20,20);
SetWindowRgn(handle, rgn, true);
end;
end;

Pour entourée le bouton d'une couleur, il suffit de cliquez dans la propriété OnPaint de la form et ajoutez ceci:

procedure TForm1.FormPaint(Sender: TObject);
begin
Canvas.Pen.Width:=4; //Choix de la taille du crayon
Canvas.Pen.Color:=clRed; //Choix de la couleur (rouge)
//Utilise le bouton
with Form1.Button1 do
Canvas.RoundRect(left,top,width+left,height+top,20,20); //Choix d'un rectangle arrondi
end;

Pour créer un bouton rectangle avec un bord coloré, commencez par glisser dans la fiche un composant TButton qui se touve dans l'onglet standard de la palette de composants de delphi.
Ici, il n'y a pas besoin de changer la forme du bouton puisque le composant TButton est déjà rectangulaire.

Pour entourée le bouton d'une couleur, il suffit de cliquez dans la propriété OnPaint de la form et ajoutez ceci

procedure TForm1.FormPaint(Sender: TObject);
begin
Canvas.Pen.Width:=4; //Choix de la taille du crayon
Canvas.Pen.Color:=clBlue; //Choix de la couleur
Utilise le bouton
with Form1.Button1 do
Canvas.Rectangle(left,top,width+left,height+top); //Choix d'un rectangle arrondi
end;

TButton avec des autres styles	[ 02-10-2001 ]
Deux styles de bouton à partir d'un simple composant TButton. Télécharger : [4 Ko] [ boutonstyle.zip] Auteur : Yoann Site internet : http://delphipage.free.fr/

Utiliser un composant TPanel

Il s'agit de transformer grâce à ses propriétés un composant TPanel en bouton.
Voici ce que vous obtiendrez :

Pourquoi utiliser un composant TPanel ?

Tout simplement, parce qu'il offre des propriétés visuels(BevelInner, BevelOuter, BevelWidht)en plus mais à l'inconvénient de ne pas avoir de modalresult. Il sera donc plutôt utiliser pour un aspect visuel. Grâce à la propriété BevelWidth, on pourra changer la taille du bord du bouton.

Faites glisser dans la fiche un composant TPanel qui se trouve dans l'onglet Standard de la palette de composants de dephi. Puis, mettez les propriétés BevelInner à bvNone, BevelOuter à bvRaised et BevelWidth à 5.
On utilsera les propriétés OnMousDown et OnMOuseUp du panel. Cliquez sur ces deux propriétés du composant et ajoutez ces lignes.

procedure TForm1.Panel1MouseDown(Sender: TObject; Button: TMouseButton; Shift: TShiftState; X, Y: Integer);
begin
Panel1.BevelInner:=bvNone;
Panel1.BevelOuter:=bvLowered;
end;

procedure TForm1.Panel1MouseUp(Sender: TObject; Button: TMouseButton; Shift: TShiftState; X, Y: Integer);
begin
Panel1.BevelInner:=bvNone;
Panel1.BevelOuter:=bvRaised;
end;

Un bouton avec un TPanel	[ 02-10-2001 ]
Petit programme montrant un composant TPanel transformé en bouton. Télécharger : [5 Ko] [ btnpanel.zip] Auteur : Yoann Site internet : http://delphipage.free.fr/

Utiliser deux composants TImage

L'utilisation de deux composants TImage pour créer un bouton, permet d'obtenir un rendu visuel très beau.

Pour commencer, Insérer deux composants TImage dans la fiche. Chargez les deux images que vous voulez. La première image sera celle qui sera visible quand on cliquera. La deuxième sera celle qui sera toujours visible.
On utilsera les propriétés "OnMousDown" et "OnMOuseUp" de la deuxième image. Cliquez sur ces deux propriétés du composant et ajoutez ces lignes.

procedure TForm1.Image2MouseDown(Sender: TObject; Button: TMouseButton; Shift: TShiftState; X, Y: Integer);
begin
Image1.Visible:=True; //Image1 visible
Image2.Visible:=False; //Image1 invisible
end;

procedure TForm1.Image2MouseUp(Sender: TObject; Button: TMouseButton; Shift: TShiftState; X, Y: Integer);
begin
Image1.Visible:=False; //Image1invisible
Image2.Visible:=True; //Image2 visible
//Opération à effectuer
end;

Un bouton avec deux TImage	[ 02-10-2001 ]
Petit programme qui montre l'utilisation de deux images pour réaliser un bouton. Télécharger : [14 Ko] [ btnimage.zip] Auteur : Yoann Site internet : http://delphipage.free.fr/