Pour faire joli

**androz** · 26/10/2009, 16h31

Bonjour !

J'ai développé une petite application sans prétention, et je voudrais la rendre toute mimi tout plein. Le design des boutons, de la fiche, des onglets etc laisse quand même à désirer avec BCB6.
Je voudrais donc savoir s'il existait une méthode simple pour rendre tout ça plus mieux beau ? J'ai déjà commencé par utiliser des images plutôt que des boutons, c'est un début, mais pour le reste.... genre utiliser un panel avec une image de fond pour faire des jolis tableaux arrondis ce genre de chose.

**Crayon** · 28/10/2009, 15h57

Il suffit de créer des nouveaux composants dans lesquels la méthode virtuelle Paint est redéfinie.

Par exemple tu peux te créer un composant TColoredPanel qui hérite de TCustomPanel.

Présentement voici ce que fait la méthode Paint d'un TCustomPanel si elle n'est pas redéfinie. Sert toi s'en comme point de départ. Le code est en Pascal:

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
procedure TCustomPanel.Paint;
const
  Alignments: array[TAlignment] of Longint = (DT_LEFT, DT_RIGHT, DT_CENTER);
  VerticalAlignments: array[TVerticalAlignment] of Longint = (DT_TOP, DT_BOTTOM, DT_VCENTER);
var
  Rect: TRect;
  TopColor, BottomColor: TColor;
  //FontHeight: Integer;
  Flags: Longint;
 
  procedure AdjustColors(Bevel: TPanelBevel);
  begin
    TopColor := clBtnHighlight;
    if Bevel = bvLowered then TopColor := clBtnShadow;
    BottomColor := clBtnShadow;
    if Bevel = bvLowered then BottomColor := clBtnHighlight;
  end;
 
begin
  Rect := GetClientRect;
  if BevelOuter <> bvNone then
  begin
    AdjustColors(BevelOuter);
    Frame3D(Canvas, Rect, TopColor, BottomColor, BevelWidth);
  end;
  if not (ThemeServices.ThemesEnabled and (csParentBackground in ControlStyle)) then
    Frame3D(Canvas, Rect, Color, Color, BorderWidth)
  else
    InflateRect(Rect, -Integer(BorderWidth), -Integer(BorderWidth));
  if BevelInner <> bvNone then
  begin
    AdjustColors(BevelInner);
    Frame3D(Canvas, Rect, TopColor, BottomColor, BevelWidth);
  end;
  with Canvas do
  begin
    if not ThemeServices.ThemesEnabled or not ParentBackground then
    begin
      Brush.Color := Color;
      FillRect(Rect);
    end;
 
    if FShowCaption and (Caption <> '') then
    begin
      Brush.Style := bsClear;
      Font := Self.Font;
      Flags := DT_EXPANDTABS or DT_SINGLELINE or
        VerticalAlignments[FVerticalAlignment] or Alignments[FAlignment];
      Flags := DrawTextBiDiModeFlags(Flags);
      DrawText(Handle, Caption, -1, Rect, Flags);
    end;
  end;
end;

Dans ton cas, le code devrais être beacoup plus simple car tu n'a pas besoin de géré les Thèmes de Windows. Sans doute que tu n'as pas besoin d'afficher du texte aussi. Modifie le code pour faire ce que tu veux.

Bonne chance...

**henderson** · 29/10/2009, 11h33

Salut !

En matière d'audio, par exemple, voici quatre boutons réalisés à l'aide de 4 TPaintBox :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
//REM :
TPaintBox *PlayButton;
TPaintBox *StopButton;
TPaintBox *RecordButton;
TPaintBox *PauseButton;
//Pour donner vie, ne pas oublier de fixer Stop à true !!!!
bool Stop;     //=true
bool Play;     //=false
bool Record;   //=false
bool Pause;    //=false

La hauteur des boutons est fixée à 32 et leur largeur à 64; et à chacun de les positionner sur la fiche.
L'apparence globale va dépendre de la couleur de la fiche (clSilver ou clBlack ce qui est le plus intéressant)

Les OnPaint des 4 TPaintBox :

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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
 
void __fastcall TForm1::StopButtonPaint(TObject *Sender)
{
TPaintBox *PaintBox = (TPaintBox*)Sender;
TCanvas *C = PaintBox->Canvas;
Byte g;
if(Stop)
    {
    for(int y = 0; y < 32; y++)
        {
        g = (Byte)(y * 8);
        C->Pen->Color = (TColor)RGB(g, g, g);
        C->MoveTo(0,y); C->LineTo(Width, y);
        }
    }
else
    {
    for(int y = 0; y < 32; y++)
        {
        g = (Byte)((31 - y) * 8);
        C->Pen->Color = (TColor)RGB(g, g, g);
        C->MoveTo(0,y); C->LineTo(Width, y);
        }
    }
int cx = PaintBox->Width / 2;
int cy = PaintBox->Height / 2;
TColor Color = clMaroon;
if(Stop) Color = clRed;
C->Pen->Color = Color;
C->Brush->Color = Color;
C->Rectangle(cx-6, cy-6, cx + 6, cy + 6);
}
//----------
void __fastcall TForm1::PlayButtonPaint(TObject *Sender)
{
TPaintBox *PaintBox = (TPaintBox*)Sender;
TCanvas *C = PaintBox->Canvas;
Byte g;
if(Play)
    {
    for(int y = 0; y < 32; y++)
        {
        g = (Byte)(y * 8);
        C->Pen->Color = (TColor)RGB(g, g, g);
        C->MoveTo(0,y); C->LineTo(Width, y);
        }
    }
else
    {
    for(int y = 0; y < 32; y++)
        {
        g = (Byte)((31 - y) * 8);
        C->Pen->Color = (TColor)RGB(g, g, g);
        C->MoveTo(0,y); C->LineTo(Width, y);
        }
    }
int cx = PaintBox->Width / 2;
int cy = PaintBox->Height / 2;
TColor Color = clGreen;
if(Play) Color = clLime;
C->Pen->Color = Color;
C->Brush->Color = Color;
C->MoveTo(cx-6, cy-6);
C->LineTo(cx + 6, cy);
C->LineTo(cx-6, cy + 6);
C->LineTo(cx-6, cy - 6);
C->FloodFill(cx,cy, Color, fsBorder);
}
//----------
void __fastcall TForm1::RecordButtonPaint(TObject *Sender)
{
TPaintBox *PaintBox = (TPaintBox*)Sender;
TCanvas *C = PaintBox->Canvas;
Byte g;
if(Record)
    {
    for(int y = 0; y < 32; y++)
        {
        g = (Byte)(y * 8);
        C->Pen->Color = (TColor)RGB(g, g, g);
        C->MoveTo(0,y); C->LineTo(Width, y);
        }
    }
else
    {
    for(int y = 0; y < 32; y++)
        {
        g = (Byte)((31 - y) * 8);
        C->Pen->Color = (TColor)RGB(g, g, g);
        C->MoveTo(0,y); C->LineTo(Width, y);
        }
    }
int cx = PaintBox->Width / 2;
int cy = PaintBox->Height / 2;
TColor Color = clMaroon;
if(Record) Color = clRed;
C->Pen->Color = Color;
C->Brush->Color = Color;
C->Ellipse(cx-6, cy-6, cx + 6, cy + 6);
}
//----------
void __fastcall TForm1::PauseButtonPaint(TObject *Sender)
{
TPaintBox *PaintBox = (TPaintBox*)Sender;
TCanvas *C = PaintBox->Canvas;
Byte g;
if(Pause)
    {
    for(int y = 0; y < 32; y++)
        {
        g = (Byte)(y * 8);
        C->Pen->Color = (TColor)RGB(g, g, g);
        C->MoveTo(0,y); C->LineTo(Width, y);
        }
    }
else
    {
    for(int y = 0; y < 32; y++)
        {
        g = (Byte)((31 - y) * 8);
        C->Pen->Color = (TColor)RGB(g, g, g);
        C->MoveTo(0,y); C->LineTo(Width, y);
        }
    }
int cx = PaintBox->Width / 2;
int cy = PaintBox->Height / 2;
TColor Color = clMaroon;
if(Pause) Color = clRed;
C->Pen->Color = Color;
C->Brush->Color = Color;
C->Rectangle(cx-6, cy-6, cx - 2, cy+6);
C->Rectangle(cx + 2, cy-6, cx +6, cy+6);
}
//----------

Les OnMouseDown des 4 TPaintBox, que je donne ici pour donner vie... donc à chacun de faire comme bon lui semble !

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
 
void __fastcall TForm1::StopButtonMouseDown(TObject *Sender,
      TMouseButton Button, TShiftState Shift, int X, int Y)
{
if(!Stop)
    {
    Stop = true; StopButton->Repaint();
    if(Play)
        {
        Play = false; PlayButton->Repaint();
        }
    if(Record)
        {
        Record = false; RecordButton->Repaint();
        }
    if(Pause)
        {
        Pause = false; PauseButton->Repaint();
        }
    //...
    }
}
//----------
void __fastcall TForm1::PlayButtonMouseDown(TObject *Sender,
      TMouseButton Button, TShiftState Shift, int X, int Y)
{
if(Stop)
    {
    Stop = false; StopButton->Repaint();
    Play = true; PlayButton->Repaint();
    //...
    }
}
//----------
void __fastcall TForm1::RecordButtonMouseDown(TObject *Sender,
      TMouseButton Button, TShiftState Shift, int X, int Y)
{
if(Stop)
    {
    Stop = false; StopButton->Repaint();
    Record = true; RecordButton->Repaint();
    //...
    }
}
//----------
void __fastcall TForm1::PauseButtonMouseDown(TObject *Sender,
      TMouseButton Button, TShiftState Shift, int X, int Y)
{
Pause = !Pause; PauseButton->Repaint();
}

Bien entendu, ça se simplifie... et on peut même très facilement dessiner sur un bitmap et sauvegarder les huit images ... pour ne pas avoir à les redessiner à chaque fois !

A plus !

**henderson** · 29/10/2009, 14h01

Salut !

Donc avec un petit programme qui ne servira qu'a génerer les bitmaps !
On va savoir faire ceci (en reprenant l'exemple des boutons audio) :

Code :

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

1
2
 
enum{as_stop=0, as_play, as_record, as_pause};

Une simple fonction pour créer nos 8 bitmaps :

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
 
void CreateBitmaps1(AnsiString Filename, bool On, int Type)
{
Graphics::TBitmap *Temp = new Graphics::TBitmap;
Temp->PixelFormat = pf24bit;
Temp->Width = 64;
Temp->Height = 32;
TCanvas *C = Temp->Canvas;
 
int cx = Temp->Width / 2;
int cy = Temp->Height / 2;
TColor Color;
Byte g;
if(On)
    {
    for(int y = 0; y < 32; y++)
        {
        g = (Byte)(y * 8);
        C->Pen->Color = (TColor)RGB(g, g, g);
        C->MoveTo(0,y); C->LineTo(Temp->Width, y);
        }
    if(Type == as_play) Color = clLime;
    else Color = clRed;
    }
else
    {
    for(int y = 0; y < 32; y++)
        {
        g = (Byte)((31 - y) * 8);
        C->Pen->Color = (TColor)RGB(g, g, g);
        C->MoveTo(0,y); C->LineTo(Temp->Width, y);
        }
    if(Type == as_play) Color = clGreen;
    else Color = clMaroon;
    }
C->Pen->Color = Color;
C->Brush->Color = Color;
switch(Type)
    {
    case as_stop :
    C->Rectangle(cx-6, cy-6, cx + 6, cy + 6);
    break;
    case as_play :
    C->MoveTo(cx-6, cy-6);
    C->LineTo(cx + 6, cy);
    C->LineTo(cx-6, cy + 6);
    C->LineTo(cx-6, cy - 6);
    C->FloodFill(cx,cy, Color, fsBorder);
    break;
    case as_record :
    C->Ellipse(cx-6, cy-6, cx + 6, cy + 6);
    break;
    case as_pause :
    C->Rectangle(cx-6, cy-6, cx - 2, cy+6);
    C->Rectangle(cx + 2, cy-6, cx +6, cy+6);
    break;
    }
Temp->SaveToFile(Filename);
delete Temp;
}

Qui sera sollicitée dans le constructeur de la form :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
AnsiString f = ExtractFilePath(Application->ExeName);
 
CreateBitmaps1(f + "StopOff1.BMP", false, as_stop);
CreateBitmaps1(f + "StopOn1.BMP", true, as_stop);
 
CreateBitmaps1(f + "PlayOff1.BMP", false, as_play);
CreateBitmaps1(f + "PlayOn1.BMP", true, as_play);
 
CreateBitmaps1(f + "RecordOff1.BMP", false, as_record);
CreateBitmaps1(f + "RecordOn1.BMP", true, as_record);
 
CreateBitmaps1(f + "PauseOff1.BMP", false, as_pause);
CreateBitmaps1(f + "PauseOn1.BMP", true, as_pause);

On peut donc tout faire :

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
 
void CreateBitmaps2(AnsiString Filename, bool On, int Type)
{
Graphics::TBitmap *Temp = new Graphics::TBitmap;
Temp->PixelFormat = pf24bit;
Temp->Width = 64;
Temp->Height = 32;
TCanvas *C = Temp->Canvas;
 
int cx = Temp->Width / 2;
int cy = Temp->Height / 2;
TColor Color;
Byte g;
if(On)
    {
    for(int x = 0; x < 32; x++)
        {
        g = (Byte)((31 - x) * 8);
        C->Pen->Color = (TColor)RGB(g, g, g);
        C->MoveTo(x,0); C->LineTo(x, Temp->Height);
        C->MoveTo(63-x,0); C->LineTo(63-x, Temp->Height);
        }
    if(Type == as_play) Color = clLime;
    else Color = clRed;
    }
else
    {
    for(int x = 0; x < 32; x++)
        {
        g = (Byte)(x * 8);
        C->Pen->Color = (TColor)RGB(g, g, g);
        C->MoveTo(x, 0); C->LineTo(x, Temp->Height);
        C->MoveTo(63-x, 0); C->LineTo(63-x, Temp->Height);
        }
    if(Type == as_play) Color = clGreen;
    else Color = clMaroon;
    }
C->Pen->Color = Color;
C->Brush->Color = Color;
switch(Type)
    {
    case as_stop :
    C->Rectangle(cx-6, cy-6, cx + 6, cy + 6);
    break;
    case as_play :
    C->MoveTo(cx-6, cy-6);
    C->LineTo(cx + 6, cy);
    C->LineTo(cx-6, cy + 6);
    C->LineTo(cx-6, cy - 6);
    C->FloodFill(cx,cy, Color, fsBorder);
    break;
    case as_record :
    C->Ellipse(cx-6, cy-6, cx + 6, cy + 6);
    break;
    case as_pause :
    C->Rectangle(cx-6, cy-6, cx - 2, cy+6);
    C->Rectangle(cx + 2, cy-6, cx +6, cy+6);
    break;
    }
Temp->SaveToFile(Filename);
delete Temp;
}

Et donc :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
CreateBitmaps2(f + "StopOff2.BMP", false, as_stop);
CreateBitmaps2(f + "StopOn2.BMP", true, as_stop);
 
CreateBitmaps2(f + "PlayOff2.BMP", false, as_play);
CreateBitmaps2(f + "PlayOn2.BMP", true, as_play);
 
CreateBitmaps2(f + "RecordOff2.BMP", false, as_record);
CreateBitmaps2(f + "RecordOn2.BMP", true, as_record);
 
CreateBitmaps2(f + "PauseOff2.BMP", false, as_pause);
CreateBitmaps2(f + "PauseOn2.BMP", true, as_pause);

Il vaudra mieux utiliser ces images sur un fond noir !

Au fond ... la seule limite est la compréhension par l'utilisateur de ce qu'on lui propose (en terme de graphisme) !

A plus !

**androz** · 29/10/2009, 15h57

Hey hey

merci beaucoup à vous deux ! Je vais regarder ça de plus près quand j'aurai 5 minutes pis si j'ai d'autres questions je vous fais signe

@+

Pour faire joli

C++Builder

Discussions similaires

Partager

Partager