none
C# tip – Dessiner un bouton avec une forme customisée RRS feed

  • Discussion générale

  • Les boutons standard dans les applications Windows Forms de .NET sont rectangulaires. Mais il est possible de créer de contrôles avec les formes de votre choix.

     

    Pour commencer, créez une application de type Windows Forms et ajoutez un nouveau composant de type UserControl. Nous allons appeler ce composant ‘Triangle’. Et je suis sûr que vous devinez déjà la forme de notre nouveau contrôle !

     

    Dans la fenêtre de code de ce contrôle, changez la classe parent et remplacez UserControl par Button :

    public partial class Triangle : Button

     

    Nous allons ajouter deux propriétés de la classe, de type GraphicsPath, pour délimiter la limite intérieure et la limite extérieure de notre contrôle :

    private GraphicsPath limite;

    private GraphicsPath limiteInterieure;

     

     

    La plus importante méthode dans cette application est la méthode OnPaint :

    protected override void OnPaint(PaintEventArgs pevent)

            {

                Graphics g = pevent.Graphics;

                g.SmoothingMode = SmoothingMode.AntiAlias;

     

                Rectangle rect = new Rectangle(0, 0, 150, 150);           

     

                Brush extBrush = new SolidBrush(Color.Gray);

     

                limite = new GraphicsPath();

                limite.AddLine(75, 1, 150, 150);

                limite.AddLine(150, 150, 1, 150);

                limite.AddLine(1, 150, 75, 1);

                g.FillPath(extBrush, limite);

     

     

                Brush intBrush = new SolidBrush(Color.DarkGoldenrod);

                limiteInterieure = new GraphicsPath();

                limiteInterieure.AddLine(75, 10, 140, 140);

                limiteInterieure.AddLine(140, 140, 10, 140);

                limiteInterieure.AddLine(10, 140, 75, 10);

                g.FillPath(intBrush, limiteInterieure);

     

                this.Region = new Region(limite);

     

                Brush clickBrush = new SolidBrush(Color.DarkGray);

               

     

                if (_clicked == false)

                {

                   

                    g.FillPath(extBrush, limite);

                    g.FillPath(intBrush, limiteInterieure);

                }

                else

                {

                    g.FillPath(clickBrush, limite);

                    g.FillPath(intBrush, limiteInterieure);

                }

     

                extBrush.Dispose();

                clickBrush.Dispose();

                intBrush.Dispose();

            }

     

     

    Voyons ce que se passe dans cette méthode. Premièrement, on récupère l’objet Graphics du paramètre, on définit la propriété SmoothingMode pour ne pas avoir des bords dentelés et on définit la surface du contrôle :

     

    Graphics g = pevent.Graphics;

    g.SmoothingMode = SmoothingMode.AntiAlias;

    Rectangle rect = new Rectangle(0, 0, 150, 150);

     

     

    Ensuite, on definit la forme de notre contrôle et on choisit le couleur pour la forme principale et pour la bordure du contrôle :

                Brush extBrush = new SolidBrush(Color.Gray);

     

                limite = new GraphicsPath();

                limite.AddLine(75, 1, 150, 150);

                limite.AddLine(150, 150, 1, 150);

                limite.AddLine(1, 150, 75, 1);

                g.FillPath(extBrush, limite);

     

     

                Brush intBrush = new SolidBrush(Color.DarkGoldenrod);

                limiteInterieure = new GraphicsPath();

                limiteInterieure.AddLine(75, 10, 140, 140);

                limiteInterieure.AddLine(140, 140, 10, 140);

                limiteInterieure.AddLine(10, 140, 75, 10);

                g.FillPath(intBrush, limiteInterieure);

     

     

    Pour definir la limite visible, on utilise la commande :

                this.Region = new Region(limite);

     

    Enfin, on vérifie si l’utilisateur a clique sur le bouton ou pas et on change la couleur:

                Brush clickBrush = new SolidBrush(Color.DarkGray);

               

     

                if (_clicked == false)

                {

                   

                    g.FillPath(extBrush, limite);

                    g.FillPath(intBrush, limiteInterieure);

                }

                else

                {

                    g.FillPath(clickBrush, limite);

                    g.FillPath(intBrush, limiteInterieure);

                }

     

                extBrush.Dispose();

                clickBrush.Dispose();

                intBrush.Dispose();

     

     

    Nous allons ajouter aussi des évènements pour le déplacement du curseur sur le bouton et des éléments pour les actions de clic venant de l’utilisateur :


     

    protected override void OnMouseEnter(EventArgs e)

            {

                this.Cursor = Cursors.Hand;

                base.OnMouseEnter(e);

            }

     

            protected override void OnMouseLeave(EventArgs e)

            {

                this.Cursor = Cursors.Arrow;

                base.OnMouseLeave(e);

            }

     

            private bool _clicked = false;

            public bool Clicked

            {

                get { return _clicked; }

                set

                {

                    _clicked = value;

                    Invalidate();

                }

            }

     

            protected override void OnMouseDown(MouseEventArgs mevent)

            {

                _clicked = true;

                base.OnMouseDown(mevent);

            }

     

            protected override void OnMouseUp(MouseEventArgs mevent)

            {

                _clicked = false;

                base.OnMouseUp(mevent);

            }

     

     

    Maintenant, vous pouvez compiler votre application et vous allez voir le contrôle créé dans la boite à outils. Vous pouvez l’ajouter sur un formulaire et l’utiliser comme tout autre contrôle.

     

     

     

     

     

    Pour plusieurs questions sur Visual Basic .NET, visitez Foire aux Questions – C# FAQ et Tutoriels

     

     

     

     

     

     

    jeudi 5 août 2010 14:55

Toutes les réponses

  • Salut,

    Merci pour ce poste détaillé et préci, je cherchais depuis un bout de temps à faire des boutons non carré, ça va me servir.

    jeudi 5 août 2010 16:51
  • Salut !

    Merci pour cette méthode ! ça manquait cruellement sur le net...

    J’ajouterai qu'il manquait une info, à mon avis essentielle : pour utiliser GraphicsPath et SmoothingMode n'existe pas quand on crée le userControl (je travail sur visual studio 2010). Il faut ajouter la directive :

    using System.Drawing.Drawing2D;

     

    Merci encore !

    Mad Keyboard

    vendredi 2 décembre 2011 10:53