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éée. 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. À 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é

   

Événements

 

PositionChanged (PanneauGauche As Integer, PanneauDroit As Integer)

À 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échargerCacher/Afficher le codeSé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échargerCacher/Afficher le codeSé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échargerCacher/Afficher le codeSé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échargerCacher/Afficher le codeSé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 soient inférieures à 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échargerCacher/Afficher le codeSé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échargerCacher/Afficher le codeSélectionnez

IV. Redimensionnement du splitter

Intéressons-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échargerCacher/Afficher le codeSé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échargerCacher/Afficher le codeSélectionnez

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

 
TéléchargerCacher/Afficher le codeSé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 relâche 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échargerCacher/Afficher le codeSé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échargerCacher/Afficher le codeSé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échargerCacher/Afficher le codeSé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 .