Nous allons voir grâce à ce petit exemple, comment réaliser une ombre portée d'un composant.
J’ai réalisé cet exemple sur un TextBox, mais le principe reste le même si vous souhaitez l’appliquer à un autre type de composant comme le montre la capture d'écran ci-dessus avec un Button.
Pour ce faire, nous allons utiliser les objets GDI+ suivants :
System.Drawing.Graphics
System.Drawing.Color
System.Drawing.Drawing2D.PathGradientBrush
System.Drawing.Drawing2D.GraphicsPath
Procédure à suivre:
1- Créer notre objet Graphics à partir duquel nous allons appeler les méthodes de dessin.
Graphics g = this.CreateGraphics();
L’ombre dessinée sera un dégradé noir->noir avec une composante alpha variante. (Rappel : la composante alpha d’une couleur varie de 0 à 255 et représente la transparence de la couleur, 0=transparence complète, 255=couleur véritable).
Si , lors d’un rafraîchissement, nous redessinions notre ombre sans l’avoir effacer, elle deviendrait de plus en plus sombre jusqu’à devenir d’un noir total.
L’appel à la méthode Clear permet d’effacer la surface du conteneur.
g.Clear(this.BackColor);
2- Définir la zone de dessin.
Tout d’abord, repérons notre composant dans le conteneur. On utilisera donc la structure Rectangle :
Rectangle rect = new Rectangle(textBox1.Location, textBox1.Size);
Passons au tracé des contours de l’ombre. Nous allons là utiliser la classe GraphicsPath qui représente un ensemble de points. Ces points peuvent être disposés par des lignes, des arcs, des lignes curves, et de nombreuses autres formes géométriques.
GraphicsPath gPath = new GraphicsPath();
gPath.StartFigure();
gPath.AddLine(new Point(rect.Left, rect.Top), new Point(rect.Right, rect.Top));
gPath.AddArc(new Rectangle(new Point(rect.Right-5, rect.Top), new Size(10, 10)), 270f, 90f);
gPath.AddArc(new Rectangle(new Point(rect.Right-5, rect.Bottom-5), new Size(10, 10)), 0f, 90f);
gPath.AddArc(new Rectangle(new Point(rect.Left, rect.Bottom-5), new Size(10, 10)), 90f, 90f);
gPath.CloseFigure();
Voici la représentation du rectangle rect (en bleu), et du contour de son ombre (en rouge) que nous venons de définir :
3- Création de la « brush » qui va nous permettre de remplir la surface représentée ci-dessus par la ligne rouge avec le dégradé de l’ombre portée.
L’objet utilisé sera un PathGradientBrush qui permet de dessiner un dégradé radial du centre (CenterColor) d’un polygone vers ses extrémités (SurroundColors) définis par le GraphicsPath que nous venons de créer.
PathGradientBrush pgBrush = new PathGradientBrush(gPath);
pgBrush.CenterPoint = new Point(rect.Left + rect.Width / 2, rect.Top + rect.Height / 2);
pgBrush.CenterColor = Color.Black;
Color blackLowAlpha = Color.FromArgb(0, Color.Black);
pgBrush.SurroundColors = new Color[]{blackLowAlpha};
La clé de la réussite pour ce travail réside dans cette ligne :
pgBrush.FocusScales = new PointF(0.8f, 0.8f);
Explication : Le dégradé radial se compose de dégradés verticaux et horizontaux. La propriété FocusScales permet de définir la portion sur la longueur du dégradé qui ne sera pas soumis au dit effet.
La composante X du PointF représente la portion sur le dégradé horizontal, et Y celle sur le dégradé vertical.
Ainsi, nous aurons un dégradé que sur 20% (traduit de 0.8 en pourcentage) de la longueur horizontal et 20% sur la verticale.
4- Nous appelons alors la primitive de dessin FillPath afin de remplir notre surface d’ombre avec le dégradé qui va dessus :
g.FillPath(pgBrush, gPath);
Ceci est l’ombre si on enlève le TextBox :
On constate bien que le dégradé en représente qu’une faible portion de la longueur aussi bien verticalement qu’horizontalement. (ref 3-)
5- Ne pas oublier d’appeler la méthode Dispose de notre objet Graphics. Ce qui est valable pour les « brushes » et autres objets de GDI+ :
gPath.Dispose();
pgBrush.Dispose();
g.Dispose();
Le résultat final :
Afin de mieux apprécier cet effet, j’ai mis la propriété BorderStyle du TextBox à None.
En conclusion, j’aime à croire qu’un article plus complet verra le jour de ma part sur le site du Laboratoire .NET (http://www.labo-dotnet.com).
N’hésitez pas à poster vos commentaires et questions, j’y répondrais avec plaisir ;)