Essayez ! Créer une fenêtre non rectangulaire

This page applies to WPF projects only

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. Dans le panneau ObjetsetChronologie, sélectionnez l'élément Fenêtre, 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.

    Cc295119.alert_note(FR-FR,Expression.30).gifRemarque :

    Pour plus d’informations sur les autres options WindowStyle, voir « WindowStyle » dans la rubrique Vue d'ensemble des fenêtres WPF sur le site MSDN.

  2. 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.

  3. Pour ajouter la transparence à la fenêtre, vous pouvez définir la propriété Background de l’élément Window sur Aucun pinceauCc295119.706bbd5c-c0e0-43a1-9604-297f019d0275(FR-FR,Expression.30).png, 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 unieCc295119.3a66ec96-47bb-47fc-8876-6b9456feec3a(FR-FR,Expression.30).png, 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.

  4. Enfin, dans le panneau Objets et chronologie, double-cliquez sur LayoutRoot pour activer l’élément, puis ajoutez des éléments du panneau 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 cette option, 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 EllipseCc295119.8938cfdf-9b75-4a33-bc88-b0636e114a0d(FR-FR,Expression.30).png et PlumeCc295119.894f8612-e0ed-4e00-84cf-a9bc8f38fc54(FR-FR,Expression.30).png, 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.

  5. 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é dans le panneau Objets et chronologie, cliquez sur ÉvénementsCc295119.6c67bb3b-e8a2-4a63-bad5-54d5c15b04dd(FR-FR,Expression.30).png dans le panneau Propriétés.

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

  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 Écriture de code de gestion des événements.