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. |
|
|
|
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 :
|
|
|
|
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 |
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.
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.
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.
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.
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 :
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.
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.
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 :
Si l'utilisateur clique, en étant sur le séparateur, l'événement MouseDown de l'image splitV est déclenché.
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.
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.
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 :
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 .