[Débutant] personnaliser un Button

personnaliser un Button

Bonsoir,
J'essaye sans succes de personnaliser les buttons de mon petit log en vb
je charche a avoir des boutons a l'apparence "glossy" avec un effet de relief

J'ai bien tente de mettre un fong glossy dans les proprietes du bouton mais ce n'est pas beau du tout :?:?

Je recherche un peu ce genre d'effet avec une couleur differente selon que le bouton est clique ou non et un effet gloss

http://img714.imageshack.us/img714/651/capture2wz.jpg

Merci beaucoup pour vos suggestions :):)

wpf est plus à même de faire ca, surtout si c'est après coup
sinon soit mettre une image en background, soit peindre un dégradé dans l'event paint

je n'avais pas du tout pense a ces 2 solutions :?:? et c'est effectivement apres coup
je teste cela des lundi
en tout cas merci de tes lumieres :):D

ceci pose, je ne saisis pas tres bien le lien entre WPF et VB.NET
Je pose peut être une question stupide mais dois je créer juste mes boutons en WPF ou tout passer creer un nouveau projet WPF et masser mon code dedans ????
desole de mon ignorance mais j'ai du mal entre XAML et VB .... :cry::cry:

glossy button

bonjour Attila
"La ou Attila passe l'herbe ne repousse plus .L'invasion des Huns".Cours d'histoire de 4eme Elementaire.
Il faut creer un custom button derive de Button et "overrider" la methode Paint.
De plus comme l'as dit Pol63 tu dois :
1/ dessiner le background normalement
2/ dessiner 2 rectangles et le texte:
-un 1er rectangle "outer" legerement plus petit que client.rectangle
fille avec un brushe "lineargradientbrush" de 2 teintes en bleu
-un 2eme rectangle "inner" qui est un demi-rectangle de transparence superpose au precedent à partir du haut fille avec un brushe "lineargradientbrush" d'une seule teinte white mais dans la transparence (canal alpha) varie de 255(opaque) à transparent(0).
-le texte du bouton (prop texte ).

La vraie difficulte est ailleurs dans ton cas:
-c'est trapper le "state" du bouton quand il est clique ou pas .
Ce qui fait que le 2eme cas va subdiviser en 2 cas de dessin:

-state clique: un 1er rectangle "outer" decrit ci-dessus de teinte bleu + 1/2 rectangle "inner" decrit ci-dessus de transparence.

-state normal: un 1er rectangle "outer" decrit ci-dessus mais change de teinte -mettons silver + 1/2 rectangle "inner" decrit ci-dessus de transparence.
voici un bout de code custom button que tu pourras ameliorer (le faire pulser si tu ajoute un timer qui fait la varier valeur du canal aplha de transparence quand il est hovered par exemple):

Code:

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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
 
 
Imports System.ComponentModel
Imports System.Drawing.Drawing2D
 
Public Class CustomGlossyButton
	Inherits Button
	'gradient outerRect: 2 teintes(state pushed ou clicked)
	Private mGradientTopPush As Color = Color.Blue
	Private mGradientBottomPush As Color = Color.LightSteelBlue
 
	'gradient outerRect: 2 teintes(state normal) 
	Private mGradientTopNormal As Color = Color.Silver
	Private mGradientBottomNormal As Color = Color.White
	Public Sub New()
 
		' Cet appel est requis par le Concepteur Windows Form.
		InitializeComponent()
 
		' Ajoutez une initialisation quelconque après l'appel InitializeComponent().
		'Gere le redimmensionnemnt
		SetStyle(ControlStyles.ResizeRedraw, True)
 
	End Sub
	Protected Overrides Sub OnPaint(ByVal e As System.Windows.Forms.PaintEventArgs)
 
		'Ajoutez ici votre code de dessin personnalisé
		Dim g As Graphics = e.Graphics
		'Fill the background (background normal du bouton)
		Using backgroundBrush As SolidBrush = New SolidBrush(Me.BackColor)
			g.FillRectangle(backgroundBrush, Me.ClientRectangle)
		End Using
		'un rectangle exterieur 
		Dim outerRect As Rectangle
		If State = States.Pushed Then  'bouton clicke
			'Paint the outer rounded rectangle
			g.SmoothingMode = SmoothingMode.AntiAlias
 
			outerRect = New Rectangle( _
			ClientRectangle.X, ClientRectangle.Y, _
			ClientRectangle.Width - 1, ClientRectangle.Height - 1)
 
			Using outerPath As GraphicsPath = RoundedRectangle(outerRect, 5, 0)
				Using outerBrush As LinearGradientBrush = New LinearGradientBrush( _
				 outerRect, _
				 GradientTopPush, GradientBottomPush, _
				 LinearGradientMode.Vertical)
					g.FillPath(outerBrush, outerPath)
				End Using
				Using outlinePen As Pen = New Pen(GradientTopPush)
					g.DrawPath(outlinePen, outerPath)
				End Using
			End Using
			'Paint the highlight rounded rectangle
			Dim innerRect As Rectangle = New Rectangle( _
			  ClientRectangle.X, ClientRectangle.Y, _
			  ClientRectangle.Width - 1, ClientRectangle.Height / 2 - 1)
			Using innerPath As GraphicsPath = RoundedRectangle(innerRect, 5, 2)
				Using innerBrush As LinearGradientBrush = New LinearGradientBrush( _
				 innerRect, _
				 Color.FromArgb(255, Color.White), Color.FromArgb(0, Color.White), _
				 LinearGradientMode.Vertical)
					g.FillPath(innerBrush, innerPath)
				End Using
			End Using
			'Paint the text(meme couleur que gradient GradientBottomNormal)
			TextRenderer.DrawText(g, Me.Text, Me.Font, outerRect, Me.GradientBottomNormal, Color.Transparent, TextFormatFlags.HorizontalCenter Or TextFormatFlags.VerticalCenter Or TextFormatFlags.EndEllipsis)
 
		ElseIf State = States.Normal Then 'bouton etat normal
			'Paint the outer rounded rectangle
			g.SmoothingMode = SmoothingMode.AntiAlias
 
			outerRect = New Rectangle( _
			ClientRectangle.X, ClientRectangle.Y, _
			ClientRectangle.Width - 1, ClientRectangle.Height - 1)
			Using outerPath As GraphicsPath = RoundedRectangle(outerRect, 5, 0)
				Using outerBrush As LinearGradientBrush = New LinearGradientBrush( _
				 outerRect, _
				 Me.mGradientTopNormal, Me.mGradientBottomNormal, _
				 LinearGradientMode.Vertical)
					g.FillPath(outerBrush, outerPath)
				End Using
				Using outlinePen As Pen = New Pen(GradientTopPush)
					g.DrawPath(outlinePen, outerPath)
				End Using
			End Using
			'Paint the highlight rounded rectangle
			Dim innerRect As Rectangle = New Rectangle( _
			  ClientRectangle.X, ClientRectangle.Y, _
			  ClientRectangle.Width - 1, ClientRectangle.Height / 2 - 1)
			Using innerPath As GraphicsPath = RoundedRectangle(innerRect, 5, 2)
				Using innerBrush As LinearGradientBrush = New LinearGradientBrush( _
				 innerRect, _
				 Color.FromArgb(255, Color.White), Color.FromArgb(0, Color.White), _
				 LinearGradientMode.Vertical)
					g.FillPath(innerBrush, innerPath)
				End Using
 
			End Using
			'Paint the text (meme couleur que gradient GradientTop)
			TextRenderer.DrawText(g, Me.Text, Me.Font, outerRect, Me.GradientTopPush, Color.Transparent, TextFormatFlags.HorizontalCenter Or TextFormatFlags.VerticalCenter Or TextFormatFlags.EndEllipsis)
 
		End If
 
		''Paint the text
		'TextRenderer.DrawText(g, Me.Text, Me.Font, outerRect, Me.ForeColor, Color.Transparent, TextFormatFlags.HorizontalCenter Or TextFormatFlags.VerticalCenter Or TextFormatFlags.EndEllipsis)
	End Sub
	'4 proprietes couleurs des gradient pour l'user
	<Category("Appearance"), Description("State Pushed:The color to use for the top portion of the gradient fill of the component.")> _
	 <Browsable(True)> _
	 Public Property GradientTopPush() As Color
		Get
			Return mGradientTopPush
		End Get
		Set(ByVal value As Color)
			mGradientTopPush = value
		End Set
	End Property
	<Category("Appearance"), Description("State Pushed:The color to use for the bottom portion of the gradient fill of the component.")> _
	<Browsable(True)> _
	Public Property GradientBottomPush() As Color
		Get
			Return mGradientBottomPush
		End Get
		Set(ByVal value As Color)
			mGradientBottomPush = value
		End Set
	End Property
	<Category("Appearance"), Description("State normal:The color to use for the top portion of the gradient fill of the component.")> _
  <Browsable(True)> _
  Public Property GradientTopNormal() As Color
		Get
			Return mGradientTopNormal
		End Get
		Set(ByVal value As Color)
			mGradientTopNormal = value
		End Set
	End Property
	<Category("Appearance"), Description("State normal:The color to use for the bottom portion of the gradient fill of the component.")> _
 <Browsable(True)> _
 Public Property GradientBottomNormal() As Color
		Get
			Return mGradientBottomNormal
		End Get
		Set(ByVal value As Color)
			mGradientBottomNormal = value
		End Set
	End Property
 
	' Begin in normal state.
	Private _state As States = States.Normal
	' This property procedure ensures the control is
	' invalidated only when the state changes.
	Public Property State() As States
		Get
			Return _state
		End Get
		Set(ByVal value As States)
			If _state <> value Then
				_state = value
				Invalidate()
			End If
		End Set
	End Property
	Protected Overrides Sub OnEnabledChanged(ByVal e As System.EventArgs)
		If Not Enabled Then
			State = States.Disabled
		ElseIf Enabled And State = States.Disabled Then
			State = States.Normal
		End If
		MyBase.OnEnabledChanged(e)
	End Sub
	Protected Overrides Sub OnMouseDown(ByVal mevent As System.Windows.Forms.MouseEventArgs)
		State = States.Pushed
		MyBase.OnMouseDown(mevent)
 
	End Sub
	Protected Overrides Sub OnMouseup(ByVal mevent As System.Windows.Forms.MouseEventArgs)
		State = States.Normal
		MyBase.OnMouseUp(mevent)
 
	End Sub
	'Le rectangle outer a des coins arrondis dans cet exemple
	Private Function RoundedRectangle(ByVal boundingRect As Rectangle, ByVal cornerRadius As Integer, ByVal margin As Integer) As GraphicsPath
		Dim roundedRect As GraphicsPath = New GraphicsPath()
		roundedRect.AddArc( _
		boundingRect.X + margin, boundingRect.Y + margin, cornerRadius * 2, cornerRadius * 2, 180, 90)
		roundedRect.AddArc( _
		boundingRect.X + boundingRect.Width - margin - cornerRadius * 2, boundingRect.Y + margin, cornerRadius * 2, cornerRadius * 2, 270, 90)
		roundedRect.AddArc( _
		boundingRect.X + boundingRect.Width - margin - cornerRadius * 2, _
		boundingRect.Y + boundingRect.Height - margin - cornerRadius * 2, cornerRadius * 2, cornerRadius * 2, _
		0, 90)
		roundedRect.AddArc( _
		boundingRect.X + margin, boundingRect.Y + boundingRect.Height - margin - cornerRadius * 2, _
		cornerRadius * 2, cornerRadius * 2, 90, 90)
		roundedRect.CloseFigure()
		Return roundedRect
	End Function
 
End Class
Public Enum States
	Normal
	MouseOver
	Pushed
	Disabled
End Enum

bon code.................

Salut MABROUKI
eh bien magnifique cours de graphisme pour VB
Je te remercie de tes conseils avises et teste cela des lundi matin sur un form vierge et 1 button ;);)
cordialement

je pense qu'il y a une petite erreur dans le code de mabrouki, si le bouton est enabled = false, l'event mouseDown n'est pas désactive, et tu changeras donc le dessin alors qu'il ne faudrait pas

@attila, en vb.net il y a plusieurs moyens de faire un exe
appli console : pas d'interface graphique si ce n'est la console
windows forms : interfacage hérite de windows 95 (gdi) légèrement amélioré dans le temps (gdi+)
wpf : depuis 2008, interfacage basé sur directX, permet l'utilisation automatique de la carte graphique, des dégradés et autres transparences plus complexes et plus rapide que les winforms
(il y a aussi les services qui n'ont pas d'interface graphique)

il est certes possible de mixer du windows forms et du wpf, mais ce n'est pas spécialement conseillé pour un controle simple
wpf a au passage une tout nouvelle structure de conception d'interface, codable en xaml

en windows forms tu peux faire comme l'exemple de mabrouki un control héritant de button avec le essin que tu veux, néanmoins tous les boutons que tu as déjà posé resteront des boutons normaux, et il te faudra alors les modifier (un ctrl+H peut surement aider)

Fort de tous ces conseils ....... j'hésite maintenant.
Le projet est quand même un peu "évolué" et comporte plusieurs forms et quelque 3000 lignes de code.

Je me demande si je dois tout modifier pour 12 boutons en tout et pour tout sachant que tous les buttons seront sur le même modèle, c'est a dire aspect glossy

au niveau couleur :
sur un form : j'ai 5 boutons colorés en rouge glossy; si je clique sur 1 button, celui ci devient vert glossy et les autres restent rouge et ainsi de suite si je clique sur un autre button

Dilemme sur la methode donc ........... :?:?:?

c'est le problème de windows forms, il faut penser à ce genre de détails avant de développer :D

en wpf on peut modifier les boutons de tout l'appli après avoir codé, avec quelques lignes de xaml seulement