Finestra di dialogo mobile non modale in WPF

Question

Desidero creare una sequenza dell'interfaccia utente in cui l'utente fa clic su un pulsante e visualizza un piccolo riquadro sottostante con un pulsante e una casella di testo e forse un piccolo elenco di elementi. La finestra di dialogo è non-modale e, cosa più importante, scompare quando fai clic da qualche altra parte nella finestra principale.

Ad esempio, quando si fa clic sull'icona stella "Preferiti" in Internet Explorer 7 o si fa clic sulla stella nella barra degli indirizzi in Firefox due volte e si apre la finestra di dialogo dell'editor dei segnalibri.

Qual è il modo più pulito per raggiungere questo obiettivo?

Devo utilizzare un UserControl e correggere assolutamente la posizione di esso quando si fa clic su un pulsante? Se sì, come posso nasconderlo quando l'utente fa clic altrove?

Answer 1

Direi che il modo più semplice per fare ciò che stai cercando è utilizzare lo Popup. La classe Popup mostra un elemento che galleggia sopra il resto degli elementi sullo schermo, ma è non-modale e può essere configurato per scomparire quando l'utente fa clic su di esso - perfetto per la finestra di dialogo non modale. La classe Popup ha proprietà che ti permettono di controllare dove si trova rispetto ad un altro controllo (nel tuo caso, il pulsante che vuoi che l'utente prema per aprire il popup).

Ecco un esempio tutto-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> 

È inoltre possibile utilizzare i comandi o gestori di eventi per aprire/chiudere il popup dal codice.

Le proprietà Placement e PlacementTarget impostano dove apparirà il popup e quale controllo apparirà relativo a (ci sono altre opzioni che consentono di visualizzarlo in relazione alla sua posizione corrente e rispetto al mouse, anche). Impostando StaysOpen su False, WPF chiuderà automaticamente il popup quando l'utente fa clic all'esterno di esso.

Per impostazione predefinita, un Popup non ha uno stile proprio - è solo un contenitore per il contenuto fluttuante - quindi dovrai farlo in modo che assomigli alla finestra di Chrome/toolbar/ecc. come appropriato.