Il convient en matière de graphisme d’aborder l’idée de "belle interface". Lors de l’élaboration d’un programme, restez dans les limites du développement professionnel, traditionnellement beaucoup de gris, très peu de fantaisie, etc. Vous pouvez cependant essayer de faire la différence avec les autres programmes gris à l’aide d’effets de transparence, jouer sur l’opacité, les formes, la couleur, sans toutefois tomber dans l’excès d’une application à fond rose aves des boutons verts. La fenêtre de propriétés des contrôles Windows propose un lot de propriétés destinées à ces effets. Vous allez les mettre à profit dès maintenant.
La transparence
Un bon moyen de surprendre les utilisateurs est de jouer sur la forme de l’application. Pour cela, ne changez pas directement la forme du formulaire dans le designer. Rusez. Vous allez en fait déclarer au formulaire qu’une couleur est utilisée comme couleur de transparence puis afficher une image en arrière-plan pour rendre le formulaire transparent. Ouvrez un éditeur d’image, comme Microsoft Paint et appliquez quelques touches de bleu primaire au formulaire.
Si vous êtes en manque d’inspiration, vous pouvez reprendre ce modèle :
Penser à l’utilisateur Chapitre 6
Une fois que vous avez fini de modeler l’image de fond, enregistrez-la au format Bitmap, (extension.bmp).
1 Créez un nouveau projet dans Visual Basic et sélectionnez le formulaire dans le designer en cliquant dessus. Dans la fenêtre des propriétés, cherchez la propriétéBackgroundImage. Cliquez sur la case à droite de celle-ci puis sur Importer dans le gestionnaire d’images.
Figure 6.19: Le futur fond de l’application
Figure 6.20: Gestionnaire d’images
Créer un lien homme-machine Chapitre 6
107 LE GUIDE COMPLET
2 Sélectionnez l’image que vous venez d’enregistrer puis cliquez sur OK.
Normalement l’image s’affiche sur la forme, mais peut-être pas correctement du fait de sa taille trop élevée. Juste en dessous de la propriétéBackgroundImage, se situe la propriétéBackgroundImageLayout. Elle permet de modifier la manière dont l’image est affichée sur le formulaire. Changez la valeur en cliquant sur la case d’édition de la propriété, puis sélectionnez Stretch ou Étirer. L’image s’adapte au formulaire. Il reste à rendre le carré bleu transparent.
3 Pour cela, descendez dans la fenêtre des propriétés et cherchez la propriété TransparencyKey.
TransparencyKey
La clé de transparence est un code qui permet de définir sur le formulaire une couleur qui ne s’affichera pas, ou plutôt qui sera complètement transparente.
Modifiez sa valeur pour obtenir un bleu primaire utilisé pour l’image de fond. Pour cela, cliquez et modifiez le texte par Bleu. Lancez maintenant le programme en appuyant sur la touche [F5]. Déplacez la fenêtre un peu partout sur votre écran. Vous pouvez voir à travers le formulaire à l’endroit où il est bleu.
Figure 6.21:
Une partie de la fenêtre est transparente
Penser à l’utilisateur Chapitre 6
L’opacité
La transparence pose ici un problème. En effet, il n’existe aucune graduation. Ou bien une partie du formulaire est transparent, ou bien elle ne l’est pas. Pour avoir une graduation, il faut recourir à la propriété Opacitydu formulaire. Dans cet exemple, vous allez ajouter un contrôle TrackBar pour modifier l’opacité du formulaire principal. Avec la propriété Opacity, l’intégralité du formulaire devient plus transparent.
Dans l’exemple précédent, si un bouton avait été placé sur le formulaire à l’endroit où ce dernier est transparent, il aurait été visible pleinement sans aucun effet. Avec une modification de l’opacité, tous les contrôles deviennent moins opaques.
1 Créez un nouveau projet dans Visual Studio.
2 Cliquez sur le formulaire. Dans la boîte des propriétés, cherchez la valeur Opacityà droite de la propriété.
3 Modifiez la valeur en inscrivant50 dans la case prévue.
Cela aura pour effet de réduire de moitié la transparence de la fenêtre.
Lancez le programme en appuyant sur la touche [F5] et admirez le résultat.
Figure 6.22:
Modification de l’option Opacity Créer un lien homme-machine Chapitre 6
109 LE GUIDE COMPLET
Vous allez maintenant graduer cette opacité. Revenez au designer en fermant le test de l’application.
4 Ajoutez un contrôleTrackBarvia la barre d’outils de Visual Basic Express.
La TrackBar est une barre de recherche qui permet de récupérer une valeur dans un intervalle donné. Une fois qu’elle est ajoutée au formulaire, allez dans la fenêtre des propriétés de laTrackBaret cherchez la propriété Minimum. Il s’agit de la borne inférieure de l’intervalle représenté par la barre. Inscrivez la valeur1. Cette valeur va représenter la valeur minimale de visibilité de la fenêtre. Une valeur de 0 ferait disparaître totalement le formulaire et vous ne pourriez plus cliquer dessus.
De la même manière, cherchez la propriété Maximum de la TrackBar et changez sa valeur en10. C’est la valeur maximale que peut atteindre l’opacité de la fenêtre. 100 % rend la fenêtre complètement opaque.
Lancez le programme en appuyant sur la touche [F5]. Cliquez sur le curseur de laTrackbar puis faites-le glisser de gauche à droite. Il ne se passe rien car à aucun moment vous n’avez fait le lien entre la valeur du curseur sur la barre et l’opacité de la fenêtre. Remédiez à cela. Revenez
Figure 6.23: Une fenêtre à moitié transparente Penser à l’utilisateur
Chapitre 6
au designer de Visual Studio et cliquez sur la TrackBar. Dans la fenêtre des propriétés, affichez les événements en cliquant sur l’icône en forme d’éclair, puis dans la liste, cherchez l’événement nomméValueChanged. Double-cliquez sur la case à droite du nom, ce qui vous place dans l’éditeur de code, à l’endroit des instructions effectuées lors de cet événement. Recopiez cette ligne :
Me.Opacity = TrackBar1.Value/10
Lancez ensuite le programme en appuyant sur [F5]. Bougez maintenant le curseur de laTrackBar: l’opacité de la fenêtre est modifiée en temps réel.
La ligne de code entrée dans l’événement est facile à comprendre : chaque fois que la valeur de l’opacité de la TrackBar change, elle est enregistrée dans la variable définissant l’opacité de la fenêtre et de ses contrôles. Elle est divisée par 10 car elle doit être comprise en 0 et 1, la propriété Opacityattendant une variable de type Double.