Discussion :

[Gluups]

Bonjour tout le monde,

Microsoft ayant depuis longtemps abandonné le terrain pour ce qui est de proposer une case à cocher décente, j'essaie de m'y coller.

Je vais donc avoir besoin d'une croix dans un carré, pour ça j'ai pensé à insérer un panel, puis tracer ses diagonales :

Code :

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

1
2
3
4
5
6
//C#
        private void panel1_Paint(object sender, PaintEventArgs e)
        {
            Panel p = (Panel)sender;
            e.Graphics.DrawLine(Pens.Black, p.Left, p.Top, p.Right, p.Bottom);
        }

Apparemment, j'ai chopé un bonnet d'âne au passage, peut-être allez-vous pouvoir m'aider à trouver où.

Pour commencer, par rapport à quoi sont exprimées les coordonnées reçues ?

J'ai fait comme si c'était des coordonnées absolues par rapport au coin supérieur gauche du contrôle que je suis en train de développer, mais dans la mesure où à l'exécution les deux carrés, Label et Panel, apparaissent vides, soit les coordonnées ne sont pas bonnes, soit j'ai un problème de surface opaque quelque part.

Quelqu'un a-t-il des billes là-dessus ?

C'est vrai qu'il y a la solution de facilité, qui consiste à tracer ça dans Paint (l'application), et insérer le résultat dans un contrôle image.

Mais si il y a moyen de faire les choses proprement, autant essayer ...

Nous avons affaire à un UserControl, dans un projet bibliothèque de contrôles Windows Forms .Net Framework.
Si ça marche j'aimerais bien mettre mon contrôle dans la boîte à outils de Visual Studio 2022 Community.

N.B. : J'ai le souvenir d'un contrôle Line, mais dans la mesure où je n'ai pas trouvé ça dans la boîte à outils, j'ai dû confondre avec la bureautique.

Autre question : comment rédigez-vous la requête pour trouver l'aide du Panel, et celle de son événement Paint ?

***
Histoire de ne pas rester en plan, j'ai mis un deuxième Label, sur le Panel. Puis, j'ai écrit un X dedans. Finalement, ça ne paraît pas absurde.

Après ça, à l'exécution, j'ai été intrigué par une petite fioriture dans l'angle du Panel.
Après avoir agrandi le Panel, il s'est avéré que c'était mon trait, dont l'angle supérieur gauche se trouvait juste là où je m'attendais à trouver son coin inférieur droit. Tiens, j'ai un doute au sujet de l'unité utilisée.

[popo]

Pour gérer une case à cocher, tu dessines sur un panel !
Forcément c'est plus compliqué car un panel ce n'est pas un case à cocher.

Si tu veux redessiner la case à cocher, il faut partir d'une case à cocher.
Ceci est loin d'être parfait mais c'est un début de piste :

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
public class DrawedColorCheckBox : CheckBox
    {
        public DrawedColorCheckBox()
        {
            CheckMarkColor = Color.Black;
            CheckMarkBackColor = Color.White;
        }
 
        public Color CheckMarkColor { get; set; }
        public Color CheckMarkBackColor { get; set; }
 
        protected override void OnPaint(PaintEventArgs pevent)
        {
            pevent.Graphics.FillRectangle(new SolidBrush(BackColor), 0, 0, Width, Height);
 
            Int32 y = Convert.ToInt32((Height - side) / 2M);
 
            if (Checked)
            {
                pevent.Graphics.FillRectangle(new SolidBrush(CheckMarkBackColor), new Rectangle(0, y, side, side));
                pevent.Graphics.DrawString("ü", new Font("Wingdings", 11, Font.Style), new SolidBrush(CheckMarkColor), 0, y + 2);
 
            }
            else
            {
                pevent.Graphics.FillRectangle(new SolidBrush(BackColor), new Rectangle(0, y, side, side));
                pevent.Graphics.DrawRectangle(new Pen(ForeColor), new Rectangle(0, y, side - 1, side - 1));
            }
 
 
            pevent.Graphics.DrawString(Text, Font, new SolidBrush(ForeColor), side, 0);
        }
 
        private const Int32 side = 16;
    }

[Gluups]

Si tu veux redessiner la case à cocher, il faut partir d'une case à cocher.

Oui, dans la pub on fait ça, aussi.
"Pour faire un bon riz, il faut ... un bon riz."
Pour que ça porte bien il faut des minettes qui font un sourire entendu.

Ceci est loin d'être parfait mais c'est un début de piste :

Code :

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

1
2
 
pevent.Graphics.FillRectangle(new SolidBrush(CheckMarkBackColor), new Rectangle(0, y, side, side));

C'est vrai qu'après tout c'est plus simple de remplir le rectangle, plutôt que s'embêter à calibrer deux diagonales.
Il y a quoi dans side ?
Mais alors est-ce que ce n'est pas plus simple

Code :

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

1
2
 
label1.BackColor = Color.black;

Autrement le coup du X, comme je disais, ça marche bien et c'est vite fait pour une taille fixe, là où ça se complique c'est pour rendre la taille réglable.

[popo]

C'est vrai qu'après tout c'est plus simple de remplir le rectangle, plutôt que s'embêter à calibrer deux diagonales.

A la différence que ce rectangle se concentre sur la zone limitée à la case de la case à cocher.

Il y a quoi dans side ?.

Un entier, il correspond à la longueur du coté du carré correspondant à la case de la case à cocher.

Autrement le coup du X, comme je disais, ça marche bien et c'est vite fait pour une taille fixe, là où ça se complique c'est pour rendre la taille réglable

Je ne l'ai pas caché, je l'ai dit ouvertement, c'est loin d'être parfait.
Si la taille fixe t'embête, ce que je comprends car ça m'a embêté moi aussi, il faut gérer une corrélation avec la taille globale (en tenant compte également de la taille de la fonte).

Moi j'ai procédé autrement en générant une image vectorielle en SVG à l'intérieur du composant.
Malheureusement, mon contrat m'interdit d'en divulguer les sources.
Mais le principe fonctionne à merveille et s'adapte automatiquement à la taille du composant.

[umfred]

Comme p.Left et p.Top donne la position du panel par rapport à son parent et que p.Right et p.Bottom donne la distance entre les bords (gauche-droite et haut-bas) du controle; on voit que ce ne sont pas eux qu'il faut utiliser.
Si tu veux la diagonale du panel, le plus logique est de partir de la coordonnée (0,0) du panel et que tu ailles à (p.Width, p.Height) , vu que e.Graphics fait référence à la zone graphique du contrôle concerné par l'événement.
donc

Code :

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

e.Graphics.DrawLine(Pens.Black, p.Left, p.Top, p.Right, p.Bottom)

permet d'avoir une ligne sur la diagonale haut-gauche <=> bas-droit
les 4 coordonnées des coins sont donc
(0,0) -------------(0,Width)
| |
| |
| |
(Height,0)---------(Heigth,Width)
L'alternative c'est d'utiliser e.ClipRectangle.Left, e.ClipRectangle.Top, e.ClipRectangle.Right et e.ClipRectangle.Bottom qui donnent la position des 4 points du rectangle https://learn.microsoft.com/fr-fr/do...tframework-4.8

[Gluups]

Si la taille fixe t'embête, ce que je comprends car ça m'a embêté moi aussi, il faut gérer une corrélation avec la taille globale (en tenant compte également de la taille de la fonte).

Bah, ce n'est pas tellement que ça m'embête, mais c'est que pour une taille fixe, en une heure j'ai créé deux Label, dont un avec un X dedans, et en fonction des clics je rends l'un visible ou l'autre.
Si je dois rendre la taille variable je crée une énumération, pour proposer un certain nombre de tailles, et pour chacune j'évalue quelle taille de police il faut pour le X.

Je trouve que tracer la diagonale du carré ça aurait plus de classe, et ça s'adapterait à la taille demandée avec une granularité plus fine.

Moi j'ai procédé autrement en générant une image vectorielle en SVG à l'intérieur du composant.
Malheureusement, mon contrat m'interdit d'en divulguer les sources.
Mais le principe fonctionne à merveille et s'adapte automatiquement à la taille du composant.

Oui, en gros, la réponse à la question posée au début, quoi ...

[Gluups]

Comme p.Left et p.Top donne la position du panel par rapport à son parent et que p.Right et p.Bottom donne la distance entre les bords (gauche-droite et haut-bas) du controle; on voit que ce ne sont pas eux qu'il faut utiliser.
Si tu veux la diagonale du panel, le plus logique est de partir de la coordonnée (0,0) du panel et que tu ailles à (p.Width, p.Height) , vu que e.Graphics fait référence à la zone graphique du contrôle concerné par l'événement.
donc

Code :

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

e.Graphics.DrawLine(Pens.Black, p.Left, p.Top, p.Right, p.Bottom)

permet d'avoir une ligne sur la diagonale haut-gauche <=> bas-droit
les 4 coordonnées des coins sont donc
(0,0) -------------(0,Width)
| |
| |
| |
(Height,0)---------(Heigth,Width)
L'alternative c'est d'utiliser e.ClipRectangle.Left, e.ClipRectangle.Top, e.ClipRectangle.Right et e.ClipRectangle.Bottom qui donnent la position des 4 points du rectangle https://learn.microsoft.com/fr-fr/do...tframework-4.8

Bon, de mémoire, je dirais que c'est ce que j'ai fait, mais si tu dis que ça marche, c'est que je n'ai pas dû bien m'y prendre.
Alors, il faudra y revenir.
J'ai quelques trucs dans les tuyaux, mais peut-être bien que Dimanche ça peut cadrer.

[popo]

Oui, en gros, la réponse à la question posée au début, quoi ...

Absolument rien à voir.
Je génère une image vectorielle.
Toi tu veux juste tracer un trait en diagonale.
Ce que tu peux faire avec un simple DrawLine comme l'a suggéré umfred.

[Gluups]

Ben ... C'est expliqué là :
https://fr.wikipedia.org/wiki/Image_vectorielle

[popo]

C'est bien tu as trouvé la définition d'une image vectorielle.. La trouver est une chose, la comprendre en est une autre. Ce n'est pas parce que le mot "trait" est écrit qu'il s'agit de la même chose.

Maintenant cherche ce que fait la méthode Paint sur un contrôle graphique.et tu verras la différence.

Petit indice, Paint change l'affichage des pixels.
Tu dois connaître la taille du composant pour dessiner dessus. Bref, si tu parviens à créer une image à coup de DrawLine, etc., tu auras une image matricielle, et il faudra la retracer si ton composant change de taille.

Une image vectorielle, c'est l'inverse.
Elle est créée sans se soucier de la taille du composant et ensuite redimenssionnée.

[Gluups]

Ah, bon, une image vectorielle, c'est plus fastoche, alors ?

[popo]

C'est plus facile lorsque ton image vectorielle est déjà prête, moins quand dois générer un tracé complexe à faire tenir dans la case.

Dans ton cas, cela revient au même puisque ton problème est justement que tu ne parviens pas à obtenir cette fameuse taille malgré qu'on t'a déjà donné la solution. Donc tu ne saurais pas la placer et n'a dimensionner correctement.

[Gluups]

Je devais faire une séance dessus ce week-end, et ... il y a eu quelque chose de plus urgent. Il y a aussi une bête histoire d'accès au registre qui attend, comme ça.
Note bien, en posant la question j'ai évoqué la solution du contrôle image, comme solution de facilité. Je me suis dit qu'il y avait l'occasion de travailler une autre solution.

[popo]

Ce que je note, c'est que tu n'as toujours pas compris de quoi je parle.

Ta solution envisagée au départ :

C'est vrai qu'il y a la solution de facilité, qui consiste à tracer ça dans Paint (l'application), et insérer le résultat dans un contrôle image.

.
C'est une image MATRICIELLE qui va donc pixéliser lorsque tu va l'agrandir pour l'adapter à un composant plus grand. Et en plus tu voulais gérer ça avec contrôle image. Ce qui implique que tu va avoir un panel avec un label et une image. Il va te falloir gérer le clic, le redimensionnement, etc. sur 3 composants.

La solution que je te suggère est basée sur une image VECTORIELLE qui, elle, va s'adapter sans se dégrader directement à la checkbox.

[Gluups]

On trouve ça directement dans la boîte à outils, où il faut déclarer une référence avant ?

[popo]

Il y a tout ce qu'il faut en standard.

Mais générer une image vectorielle est très complexe en standard.
Il doit cependant exister des librairie pour te simplifier la vie.

[umfred]

Il serait plus facile de la créer par un logiciel externe (inkscape (gratuit) ou Illustrator (payant) voire d'autres en lignes)
ou encore le récupérer sur des librairies existantes comme https://www.svgviewer.dev/ (en cherchant "cross", on tombe sur plusieurs design)

[umfred]

après, installation du package Svg (par exemple)
et pour le mettre dans une picturebox à la dimension de celle-ci:

Code :

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

1
2
var svgdoc = SvgDocument.Open(@"c:/temp/cross.svg");
pictureBox1.Image = svgdoc.Draw(pictureBox1.Width,pictureBox1.Height);

[Gluups]

Dès que je peux passer un petit peu de temps dessus j'exploite ce qui a été dit ici.
Du coup, ça risque de me mener à faire le boulot plusieurs fois, pour comparer et savoir ce qui m'a pris le plus de temps.
Ah oui et puis il faut comparer les différentes solutions sur différentes échelles ...
Dire que je pensais arriver au bout en une heure ou deux ...

[popo]

Je pense toujours que passer par plusieurs composant pour fabriquer une case à cocher est une mauvaise idée.
J'ai donc une dernière suggestion à te proposer pour rester sur un seul composant héritant de CheckBox.

En effet, la case à cocher standard peux totalement être transformée radicalement en jouant simplement sur ces propriétés.
Par exemple :
Appearance positionné sur Button
TextImageRelation positionné sur ImageBeforeText
FlatStyle positionné sur Flat
FlatButtonAppearance sans bordure et en jouant potentiellement sur différentes couleurs
Et bien sûr avec une image pour "cochée" et une image pour "décochée" (jouer sur ImageIndex), ça peut faire le job.