Le premier site francophone dédié au développement Pocket PC

Comment créer une fenêtre scrollable ?

Nous allons apprendre dans cet article à créer une fenêtre plus haute que l'écran de votre Pocket PC et à ajouter les méchanismes pour pouvoir scroller verticalement son contenu.

Scrolling, kézako ?

Le scrolling est l'action de déplacer le contenu d'une zone de l'écran horizontalement ou verticalement. On parle de scrolling vertical ou horizontal. Lorsque vous utilisez votre Pocket PC, vous utilisez très souvent cette fonctionnalité :

Un exemple simple de scrolling vertical. Lorsque vous utilisez l'explorateur de fichiers et que le nombre de fichiers est trop grand pour tenir dans la hauteur de l'écran, un Scrollbar verticale permet de faire défiler l'écran de bas en haut et de haut en bas pour visualiser toute la liste de fichiers.

Les outils dont nous avons besoin

Pour réaliser notre fenêtre scrollable nous avons besoin de 3 contrôles. Le premier est le contrôle "Scrollbar vertical", le second est le contrôle "Timer" et le troisième un contrôle "Frame" :

Principe général

Le principe général consiste à utiliser une zone cliente plus haute que la fenêtre qui la contient. Il suffit ensuite de faire glisser cette zone cliente vers le haut ou vers le bas pour "scroller" verticalement son contenu :

La zone client doit être capable de se comporter comme un conteneur, c'est à dire où l'on peut y placer des contrôles qui vont se déplacer avec elle si on modifie ses coordonnées.

Sous eVB, créer le conteneur, le scrollbar et le timer

La première étape de la conception d'une fenêtre scrollable consiste à placer dans la fenêtre nos trois contrôles :

Notre contrôle Frame (1) est bien plus haut qu'une fenêtre Pocket PC classique, nous plaçons aussi le contrôle Scrollbar vertical et aussi le Timer. Vous pouvez placer le Frame et le Scrollbar n'importe où dans la fenêtre car nous allons les placer correctement par programme. Tous les contrôles qui doivent être utilisés dans cette fenêtre pour l'interface utilisateur classique doivent être placés dans le conteneur, c'est à dire le contrôle Frame (1). Pour notre exemple, nous y placons des TextBox, des CommandButton, et des ComboBox.

Le code de placement

Nous allons par programme placer les contrôles Frame et Scrollbar correctement dans la fenêtre. Pour faire cela au bon moment, l'événement "Resize" de la fenêtre est le candidat idéal.

Nous avons nomé le conteneur "FormConteneur", le scrollbar "FormScroller", et le Timer "TimerRefreshConteneur".

Voici le code placé dans l'événement " Resize" :

Private Sub Form_Resize()


 'On place le scrollbar au bon endroit avec la bonne hauteur
 FormScroller.Width = ScaleX(13, vbPixels, vbTwips)
 FormScroller.Left = Width - FormScroller.Width
 FormScroller.Top = 0
 FormScroller.Height = Height + ScaleY(1, vbPixels, vbTwips)
 
 'On place le conteneur
 FormConteneur.Left = 0
 FormConteneur.Top = 0
 FormConteneur.Width = FormScroller.Left
 If FormConteneur.Height < Height Then FormConteneur.Height = Height
 
 'On met à jour le scrollbar
 FormScroller.Min = 0
 FormScroller.Max = FormConteneur.Height - (Height / 2)
 FormScroller.SmallChange = FormScroller.Max / 20
 FormScroller.LargeChange = FormScroller.Max / 5
 
End Sub
	  

Ce code place le scrollbar à l'extrême droite de la fenêtre, sur toute la hauteur. Le conteneur remplit toute la place restante. Les paramètres du scrollbar (Min, Max, SmallChange et LargeChange) sont calculés pour que, en position maxi, le scrollbar affiche la partie inférieure (haute comme la fenêtre) du conteneur, pour permettre un déplacement de 1/20 du max par les flèches du scrollbar (SmallChange), et de 1/5 du max pour les déplacements effectués par les zones sensibles de l'ascenceur (LargeChange).

Le code de déplacement

A chaque fois que l'utilisateur modifie la position du scrollbar, il faut répercuter celà au niveau du conteneur et modifier en conscéquence son "glissement" vers le haut ou vers le bas. La formule est simple, de la manière dont nous avons paramétré les propriétés Min et Max du scrollbar, on peut dire que le "Top" du conteneur est égal à - la valeur du scrollbar :

FormConteneur.Top = -FormScroller.Value

Il faut réagir à 2 événements du Scrollbar, l'événemenent "Scroll" et l'événement "Change". Mais nous ne devons pas appliquer la formule vue plus haut directement dans ces événements, car nous aurions un glissement très saccadé, disgracieux. Pour éviter celà nous allons utiliser un Timer que l'on déclenchera dans les événements du Scrollbar. Ainsi nous obtiendrons un mouvement fluide.

Voici le code à placer dans les 2 événements du Scrollbar et du Timer :

Private Sub FormScroller_Change()
 TimerRefreshConteneur.Enabled = True
End Sub


Private Sub FormScroller_Scroll()
 TimerRefreshConteneur.Enabled = True
End Sub


Private Sub TimerRefreshConteneur_Timer()
 TimerRefreshConteneur.Enabled = False
 FormConteneur.Top = -FormScroller.Value
End Sub

Avec tous ces ingrédients nous obtenons une feuille scrollable. Son fonctionnement est très simple, donc fiable.

Et ensuite ...

Nous étudierons dans un prochain article un problème lié à cette technique. Comment faire pour que les contrôles à qui nous donnons le focus et qui ne sont pas dans la zone visible du conteneur fassent déplacer le conteneur pour qu'ils deviennent à leur tour visible ? Si vous avez la réponse, écrivez-moi, je me ferais un plaisir de publier vos solutions.

Vous pouvez télécharger les sources de cet article

Stéphane Sibué