Essayez ! Créer une fenêtre non rectangulaire

Dans les applications Microsoft Expression Blend, vous souhaiterez éventuellement créer une fenêtre qui prend une forme non rectangulaire au moment de l’exécution. Les applets, les widgets et les lecteurs multimédias en sont des exemples. Pour créer une fenêtre non rectangulaire, vous modifiez quelques propriétés sur l’élément Window de votre application, puis créez une méthode de gestionnaire d’événements permettant de déplacer la fenêtre sans recourir à une barre de titre.

Rendre une fenêtre rectangulaire transparente

1. Créez un nouveau document fenêtre nommé Window1.xaml en cliquant sur Nouvel élément dans le menu Fichier. Dans la fenêtre Ajouter un nouvel élément, vérifiez que la case à cocher Inclure le fichier de code est activée de manière à générer un fichier code-behind correspondant pour Window1.xaml.

2. Sous Objetsetchronologie dans le panneau Interaction, sélectionnez l’élément Window, puis, sous Apparence dans le panneau Propriétés, définissez la propriété WindowStyle sur Aucun pour supprimer la barre de titre de la fenêtre. Appuyez sur F5 pour voir l’apparence de la fenêtre en l’absence du shell par défaut. Notez que les boutons standard Réduire, Agrandir, Restaurer et Fermer ne sont plus visibles. Notez également qu’il n’est plus possible de faire glisser la fenêtre. Appuyez sur Alt+F4 pour fermer la fenêtre.

   Remarque :
   Pour plus d’informations sur les autres options WindowStyle, voir « WindowStyle » dans la rubrique donnant une vue d’ensemble des fenêtres dans WPF (Windows Presentation Foundation) sur le site MSDN.

3. Sous Apparence dans le panneau Propriétés, activez la case à cocher AllowsTransparency. Notez que la bordure de la fenêtre n’est plus visible.

4. Pour ajouter la transparence à la fenêtre, vous pouvez définir la propriété Background de l’élément Window sur Aucun pinceau, sous Pinceaux dans le panneau Propriétés. D’une autre manière, si l’utilisateur doit pouvoir cliquer sur la zone invisible de la fenêtre, vous pouvez définir la propriété Background sur Pinceau de couleur unie, puis définir la propriété Alpha pour le pinceau d’arrière plan sur 1. Cela maintient la zone interactive de la fenêtre, tout en rendant cette zone invisible.

5. Enfin, sous Objets et chronologie, double-cliquez sur LayoutRoot pour activer l’élément, puis ajoutez des éléments de la Boîte à outils sur la planche graphique. Vous pouvez créer différents effets en définissant un pinceau OpacityMask sur un élément (pour plus d’informations sur la façon de procéder, voir Créer un masque d’opacité). Vous pouvez également ajouter des formes et dessiner des tracés à l’aide d’outils de dessin tels que Ellipse et Plume, puis déplacer les éléments derrière d’autres éléments (cliquez avec le bouton droit sur un élément et cliquez sur Trier). Le contenu de LayoutRoot va effectivement définir le contour de votre application.

6. Appuyez de nouveau sur F5 pour voir comment la fenêtre se présente maintenant. Notez qu’il n’est toujours pas possible de la faire glisser. Appuyez sur Alt+F4 pour fermer la fenêtre.

Ajouter du code pour pouvoir faire glisser la fenêtre au moment de l’exécution

Lorsque vous rendez la fenêtre transparente, vous perdez en fait la possibilité de repositionner la fenêtre en l’absence d’une barre de titre. Pour que la fenêtre soit de nouveau déplaçable, vous devez ajouter un gestionnaire d’événements à la fenêtre, puis quelques lignes de code au fichier code-behind associé.

1. Enregistrez votre projet sur le disque dur en cliquant sur Enregistrer tout dans le menu Fichier. (Vous ne pouvez pas ajouter de méthode de gestionnaire d’événements à un projet qui n’a jamais été enregistré.)

2. L’élément Window étant sélectionné sous Objets et chronologie, cliquez sur le bouton Événements dans le panneau Propriétés.

3. En regard de MouseLeftButtonDown, tapez OnMouseLeftButtonDown, puis appuyez sur la touche Entrée.

   • Si Microsoft Visual Studio 2008 Standard Edition ou une version ultérieure est installé, le code du gestionnaire d’événements généré après avoir appuyé sur la touche Entrée est automatiquement ajouté au fichier code-behind (Window1.xaml.cs), lequel s’ouvre dans Visual Studio pour y être modifié.

   • Si Visual Studio n’est pas installé, le code de la méthode du gestionnaire d’événements est copié dans le Presse-papiers pour que vous puissiez le coller dans le fichier code-behind. Double-cliquez sur le fichier code-behind dans le panneau Projet pour l’ouvrir. Collez le code de la méthode de gestionnaire d’événements générée dans le fichier code-behind juste avant l’avant dernière accolade fermante (si votre fichier code-behind utilise C#) ou juste avant l’instruction End Class (si votre fichier code-behind utilise VB.NET).

     Remarque :

     Si vous ne pouvez pas ouvrir le fichier code-behind en double-cliquant dessus dans le panneau Projet d’Expression Blend, il n’y a probablement pas d’application associée à l’extension du nom de fichier de votre fichier code-behind (.cs ou .vb), et Windows ne sait donc pas comment ouvrir le fichier. Pour obtenir des informations sur l’association des fichiers .cs et .vb avec un éditeur tel que le Bloc-notes, voir Modifier un fichier code-behind.

4. Modifiez la méthode de gestionnaire d’événements générée dans votre fichier code-behind afin que votre gestionnaire d’événements ressemble à ceci :

   private void OnMouseLeftButtonDown(object sender,
            System.Windows.Input.MouseButtonEventArgs e)
   {
     this.DragMove();
   }
   

   Private Sub OnMouseLeftButtonDown(ByVal sender As System.Object,
            ByVal e As System.Windows.Input.MouseButtonEventArgs)
     Me.DragMove()
   End Sub
   

5. Appuyez sur la touche F5 pour exécuter l’application.

6. Vous pouvez ajouter d’autres méthodes de gestionnaire d’événements, telles qu’une méthode pour l’événement Click d’un bouton qui appelle la méthode Close() dans votre fichier code-behind. Pour plus d’informations sur la création de méthodes de gestionnaire d’événements, voir Vue d’ensemble de la gestion des événements.