Boîte de dialogue flottante non modale dans WPF

Question

Je souhaite créer une séquence d'interface utilisateur dans laquelle l'utilisateur clique sur un bouton et ouvre un petit panneau en dessous avec un bouton et une zone de texte et éventuellement une petite liste d'éléments. La boîte de dialogue est non-modale et plus important encore, elle disparaît lorsque vous cliquez ailleurs dans la fenêtre principale. Par exemple, lorsque vous cliquez sur l'icône Star 'Favoris' dans Internet Explorer 7 ou que vous cliquez deux fois sur l'étoile dans la barre d'adresse de Firefox, la boîte de dialogue de l'éditeur de signets s'affiche.

Quel est le moyen le plus propre d'y parvenir? Dois-je utiliser un UserControl et en fixer absolument l'emplacement quand on clique sur un bouton?

Si oui, comment le cacher quand l'utilisateur clique ailleurs?

Answer 1

Je dirais que la façon la plus propre de faire ce que vous cherchez est d'utiliser un Popup. La classe Popup affiche un élément qui flotte au-dessus du reste des éléments sur l'écran, mais est non modal et peut être configuré pour disparaître lorsque l'utilisateur clique dessus - parfait pour votre boîte de dialogue non modale. La classe Popup a des propriétés qui vous permettent de contrôler où elle apparaît par rapport à un autre contrôle (dans votre cas, le bouton sur lequel vous voulez que l'utilisateur appuie pour ouvrir le popup).

Voici un exemple tout XAML:

<Grid> 
    <ToggleButton HorizontalAlignment="Center" VerticalAlignment="Top" 
        x:Name="PopButton" Content="Pop"/> 
    <Popup Placement="Bottom" PlacementTarget="{Binding ElementName=PopButton}" StaysOpen="False" 
      IsOpen="{Binding ElementName=PopButton, Path=IsChecked, Mode=TwoWay}"> 
     <Rectangle Height="100" Width="200" Fill="Blue"/> 
    </Popup> 
</Grid> 

Vous pouvez également utiliser des commandes ou des gestionnaires d'événements pour ouvrir/fermer le menu contextuel du code.

Le jeu de propriétés Placement et PlacementTarget où le popup apparaîtra, et sur quel contrôle il apparaîtra relatif (il y a d'autres options qui vous permettent de le faire apparaître par rapport à sa position actuelle et par rapport à la souris aussi). Lorsque vous définissez StaysOpen sur False, WPF ferme automatiquement la fenêtre contextuelle lorsque l'utilisateur clique à l'extérieur de celui-ci.

Par défaut, un Popup n'a pas de style propre - c'est juste un conteneur pour le contenu flottant - vous devrez donc le styler pour ressembler à votre fenêtre chrome/toolbar/etc. le cas échéant.