Nicht-modale schwebende Dialog in WPF

Question

Ich möchte eine UI-Sequenz erstellen, wo der Benutzer auf eine Schaltfläche klickt und es öffnet ein kleines Feld darunter mit einer Schaltfläche und einem Textfeld und möglicherweise eine kleine Liste von Elementen. Der Dialog ist nichtmodal und noch wichtiger, er verschwindet nur, wenn Sie irgendwo im Hauptfenster auf etwas anderes klicken.

Wenn Sie beispielsweise in Internet Explorer 7 auf das Startsymbol "Favoriten" klicken oder in Firefox zweimal auf den Stern in der Adressleiste klicken, wird das Dialogfeld für den Lesezeicheneditor geöffnet.

Was ist der sauberste Weg, dies zu erreichen?

Sollte ich ein UserControl verwenden und den Speicherort der Schaltfläche beim Klicken auf eine Schaltfläche unbedingt korrigieren? Wenn ja, wie verstecke ich es, wenn der Benutzer woanders klickt?

Answer 1

Ich würde sagen, der sauberste Weg zu tun, was Sie suchen, ist eine Popup zu verwenden. Die Popup-Klasse zeigt ein Element an, das über dem Rest der Elemente auf dem Bildschirm schwebt, aber nicht modal ist und so konfiguriert werden kann, dass es verschwindet, wenn der Benutzer wegklickt - perfekt für Ihren nicht-modalen Dialog. Die Popup-Klasse verfügt über Eigenschaften, mit denen Sie steuern können, wo sie relativ zu einem anderen Steuerelement angezeigt werden (in Ihrem Fall die Schaltfläche, die der Benutzer drücken soll, um das Popup zu öffnen).

Hier ist ein All-XAML Beispiel:

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

Sie auch Befehle oder Event-Handler verwenden können/öffnen Sie das Popup aus dem Code zu schließen.

Die Placement- und PlacementTarget-Eigenschaften legen fest, wo das Popup angezeigt wird und für welches Steuerelement es relativ erscheint (es gibt andere Optionen, mit denen es relativ zu seiner aktuellen Position und relativ zur Maus angezeigt werden kann). Wenn Sie StaysOpen auf False setzen, wird WPF das Popup automatisch schließen, wenn der Benutzer darauf klickt.

Standardmäßig hat ein Popup keinen eigenen Stil - es ist nur ein Container für fließenden Inhalt - Sie müssen es also so gestalten, dass es wie Ihr Fenster chrome/toolbar/etc aussieht. wie angemessen.