I. Introduction

Dans de nombreuses applications, comme l'explorateur Windows par exemple, l'espace de travail est divisé en plusieurs volets, redimensionnables grâce à un séparateur nommé "splitter". Aucun contrôle de ce type n'est livré avec Visual Basic 6, mais il est possible de programmer ses propres contrôles.
Nous allons donc créer le contrôle Splitter, afin de pouvoir le réutiliser dans n'importe quel projet.
Vous pouvez télécharger le projet VB ici : Splitter.zip
Image non disponible
Image non disponible Commençons donc en créant un projet Exe Standard. La feuille nommée Form1 est créee. Ajoutons un contrôle utilisateur à notre projet en sélectionnant la commande adéquate dans le menu Projet. Dans la propriété Name, tapons "Splitter", ce sera le nom de notre contrôle.

Notre splitter contiendra les deux contrôles à redimensionner de part et d'autre du séparateur. Donnons donc à sa propriété ControlContainer la valeur True, pour qu'il puisse contenir d'autres contrôles, de la même façon qu'un PictureBox par exemple.

II. Principe de fonctionnement du contrôle Splitter

Lorsque le pointeur de la souris est entre les deux volets redimensionnables, son apparence change pour montrer à l'utilisateur que le séparateur entre les deux volets peut être déplacé sur un côté. Si l'on clique, une barre verticale grise apparaît. Celle-ci se déplacera horizontalement pour suivre le pointeur de la souris et visualiser l'endroit où l'on va placer le séparateur. Pour représenter la barre verticale, nous utilisons un PictureBox. Nous avons également besoin d'un contrôle image. Ceci pour afficher le curseur de souris qui convient quand l'utilisateur survole le séparateur. A l'exécution le contrôle image sera placé en permanence au niveau du séparateur.

Posons donc un PictureBox et un contrôle Image, en donnant à leurs propriétés les valeurs suivantes :

PictureBox  
Name picSplitV
Border Style 0 - None
BackColor gris foncé
Top 0
Width 75
Visible False
Image  
Name splitV
MousePointer 9 - Size W E
Top 0
Image non disponible Nous avons maintenant fini de dessiner notre splitter. Passons donc à l'écriture de son code source.

III. Code source du splitter

III-A. Propriétés, méthodes, et évènements du splitter

Comment va fonctionner notre contrôle du point de vue du programmeur qui l'utilisera ? Voici les propriétés, méthodes, et évènements exposés par le contrôle :

Propriétés  
Position indique ou spécifie la position du séparateur
   
Méthodes  
AddControl (ctl as Control, Droite as Boolean) ajoute au splitter le volet gauche ou droit qui sera redimensionné
   
Evènements  
PositionChanged (PanneauGauche As Integer, PanneauDroit As Integer) A lieu lorsque la position du séparateur a changé. Permet au programmeur d'écrire le code qui redimensionnera les deux volets.

III-B. Déclarations préalables

Pour que la largeur du séparateur soit facilement modifiable, nous allons la déclarer sous la forme d'une constante, dans la partie Déclarations. Ajoutons dès maintenant, dans cette même partie, la variable privée qui contiendra la position du séparateur, c'est-à-dire la distance entre le bord gauche de l'image et le bord gauche du contrôle utilisateur.

Private Const LargeurSeparateur As Integer = 60
Private m_Position As Integer

III-C. L'initialisation du contrôle

La largeur du contrôle image doit être égale à celle du séparateur. Nous devons donc lui donner sa valeur au moment de l'initialisation du contrôle, c'est-à-dire dans la procédure de l'évènement Initialize.

 
TéléchargerCacherSélectionnez

III-D. La méthode privée ResizePanes()

Cette procédure sera exécutée à chaque fois que l'on voudra réactualiser la position du séparateur. Le redimensionnement des 2 volets étant géré par le programmeur, nous n'avons qu'une chose à faire dans cette procédure : modifier la position du contrôle image.

 
TéléchargerCacherSélectionnez

III-E. L'événement PositionChanged

Cet évènement sera accessible au programmeur qui utilisera notre contrôle. Il pourra le sélectionner dans la liste des évènements du splitter, et écrire le code de sa procédure correspondante, ceci afin de redimensionner la largeur des deux volets. Nous ajoutons notre évènement dans la partie Déclarations, avec le mot-clé Public, pour qu'il soit accessible de l'extérieur. Nous verrons bientôt comment le déclencher.

 
TéléchargerCacherSélectionnez

III-F. La propriété Position

Cette propriété donne la possibilité de modifier la position du séparateur, que ce soit en mode création, avec la fenêtre des propriétés, ou à l'exécution.

 
TéléchargerCacherSélectionnez

La procédure Property Get renvoie la position du séparateur. La procédure Property Let permet de la modifier. Détaillons cette dernière. Tout d'abord nous modifions la valeur privée m_Position, en s'assurant que ni la taille du volet gauche, ni celle du volet droit ne soit inférieure à 800 (valeur bien sûr arbitraire). Ensuite nous appelons la procédure ResizePanes pour repositionner l'image splitV. La dernière ligne lance l'évènement PositionChanged, qui avertira le programme utilisant le splitter que la position du séparateur a été modifiée. La procédure de l'événement prend en argument la largeur du volet gauche et celle du volet droit.

III-G. La méthode AddControl()

Cette méthode a pour rôle de positionner et dimensionner les 2 contrôles situés de part et d'autre du séparateur. Pour écrire son code source, nous avons besoin d'une fonction interne de Windows, présente dans le fichier user32.dll : il s'agit de SetParent. Pour pouvoir l'utiliser, nous devons ajouter cette ligne dans la partie Déclarations :

 
TéléchargerCacherSélectionnez

Cette fonction permet de préciser le conteneur d'une fenêtre fille. Les paramètres à lui passer sont respectivement l'identifiant de la fenêtre fille et celui du conteneur. Cet identifiant, nommé handle, est obtenu grâce à la propriété hWnd.

 
TéléchargerCacherSélectionnez

IV. Redimensionnement du splitter

Interessons nous maintenant au comportement de notre splitter lors de son redimensionnement. Cet évènement peut avoir lieu aussi bien en mode création qu'exécution. En mode création, nous allons replacer le séparateur au milieu du contrôle. Mais à l'exécution, nous laisserons au programmeur le soin de gérer cet évènement. Comment pouvons-nous connaître le mode dans lequel nous sommes ? Avec la propriété UserMode, qui nous renvoie True si nous sommes dans la phase d'exécution, et False sinon.

 
TéléchargerCacherSélectionnez

IV-A. 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 :

 
TéléchargerCacherSélectionnez

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

 
TéléchargerCacherSélectionnez

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.

 
TéléchargerCacherSélectionnez

IV-B. 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.

 
TéléchargerCacherSélectionnez

IV-C. 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 :

 
TéléchargerCacherSélectionnez

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.