Exemple de création d'un contrôle : le splitter

Le 08 juillet 2002

Gestion des actions de l'utilisateur

Dans cette partie, nous allons implémenter le déplacement du PictureBox et du séparateur. Nous aurons besoin de 2 nouvelles variables à ajouter dans la partie Déclarations :

Private Deplacement As Boolean
Private XDepart As Single

Si l'utilisateur clique, en étant sur le séparateur, l'évènement MouseDown de l'image splitV est déclenché.

Private Sub splitV_MouseDown(Button As Integer, Shift As Integer, x As Single, y As Single)

'Passe en phase Déplacement
Deplacement = True

'Sauvegarde la position horizontale de la souris dans l'image
'(servira à calculer le déplacement)
XDepart = x

'Fait apparaître le PictureBox
picSplitv.Left = m_Position

'ZOrder 0 fait passer le PictureBox au premier plan et nous assure
'qu'il n'est pas caché par un autre contrôle qui serait éventuellement superposé
picSplitv.ZOrder 0
picSplitv.Visible = True

End Sub

Quand l'utilisateur déplace la souris après avoir cliqué sur l'image splitV, l'évènement MouseMove de l'image est appelé, et nous déplaçons le PictureBox. Quand il relache la souris après avoir cliqué sur l'image, l'événement MouseUp est déclenché. Nous rendons alors le PictureBox invisible, changeons la position du séparateur et faisons passer la variable Deplacement à False.

Private Sub splitV_MouseMove(Button As Integer, Shift As Integer, x As Single, y As Single)
If Deplacement Then picSplitv.Left = x - XDepart + m_Position
End Sub

Private Sub splitV_MouseUp(Button As Integer, Shift As Integer, x As Single, y As Single)
If Deplacement Then
    picSplitv.Visible = False
    Position = picSplitv.Left
    Deplacement = False
End If
End Sub

Enregistrer la valeur d'une propriété

Si vous modifiez la valeur de la propriété Position en mode création, avec la fenêtre des propriétés, puis fermez le projet, et l'ouvrez à nouveau, vous constaterez que la valeur spécifiée pour la propriété n'a pas été conservée. Pour gérer ceci, vous disposez des évènements ReadProperties et WriteProperties qui ont lieu lors de la lecture et de l'écriture des valeurs des propriétés de votre contrôle.

Private Sub UserControl_WriteProperties(PropBag As PropertyBag)

'Associe la valeur de m_Position au nom "Position"
PropBag.WriteProperty "Position", m_Position

End Sub

Private Sub UserControl_ReadProperties(PropBag As PropertyBag)

'Renvoie la valeur liée au nom "Position" si elle existe, ou
'Int((Width - LargeurSeparateur) / 2) sinon.
m_Position = PropBag.ReadProperty("Position", Int((Width - LargeurSeparateur) / 2))
ResizePanes

End Sub

Tester le splitter

Pour tester votre nouveau contrôle, posez sur Form1 un contrôle Splitter, ainsi que deux TextBox nommés respectivement text1 et text2. Attention, si la fenêtre du contrôle utilisateur est ouverte, l'icône du splitter dans la boîte à outils est désactivée. Dans le module de Form1, il nous suffit de ces quelques lignes de code :

Private Sub Form_Load()
Splitter1.AddControl Text1, False
Splitter1.AddControl Text2, True
End Sub

Private Sub Splitter1_PositionChanged(PanneauGauche As Integer, PanneauDroit As Integer)
Text1.Width = PanneauGauche
Text2.Width = PanneauDroit
Text2.Left = Splitter1.Width - Text2.Width
End Sub

Voilà, ce tutoriel est maintenant terminé. Mais vous pouvez encore améliorer le splitter, par exemple en empêchant le PictureBox de franchir les limites gauche et droite lors de son déplacement, et en donnant la possibilité au programmeur de paramétrer les valeurs de ces limites, au lieu de les fixer à 800 comme je l'ai fait. Pour toute remarque ou erreur à signaler, n'hésitez pas à m'envoyer un mail.

Page précédente