Diálogo flotante no modal en WPF

Question

Quiero crear una secuencia de IU donde el usuario hace clic en un botón y aparece un pequeño panel debajo de él con un botón y un cuadro de texto y tal vez una pequeña lista de elementos. El diálogo no es modal y, lo que es más importante, simplemente desaparece al hacer clic en otro lugar en la ventana principal.

Por ejemplo, cuando hace clic en el ícono Estrella de 'Favoritos' en Internet Explorer 7 o hace clic en la estrella en la barra de ubicación en Firefox dos veces y aparece el diálogo del editor de marcadores.

¿Cuál es la forma más limpia de lograr esto?

¿Debo usar un UserControl y arreglar absolutamente la ubicación cuando se hace clic en un botón? En caso afirmativo, ¿cómo lo oculto cuando el usuario hace clic en otro lugar?

Answer 1

Yo diría que la manera más limpia de hacer lo que estás buscando es usar un Popup. La clase Popup muestra un elemento que flota sobre el resto de los elementos en la pantalla, pero no es modal y se puede configurar para que desaparezca cuando el usuario hace clic fuera de él, perfecto para su diálogo no modal. La clase Popup tiene propiedades que le permiten controlar dónde se muestra en relación con otro control (en su caso, el botón que desea que el usuario presione para abrir la ventana emergente).

He aquí un ejemplo de todo 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> 

También puede utilizar comandos o controladores de eventos para abrir/cerrar la ventana emergente de código.

Las propiedades Placement y PlacementTarget establecen dónde aparecerá la ventana emergente, y sobre qué control aparecerá (hay otras opciones que le permiten hacer que aparezca en relación con su posición actual y relativa al mouse). Establecer StaysOpen en False hará que WPF cierre automáticamente la ventana emergente cuando el usuario haga clic fuera de ella.

De forma predeterminada, una ventana emergente no tiene su propio estilo, es solo un contenedor para contenido flotante, por lo que tendrá que darle un estilo que se parezca a la ventana chrome/toolbar/etc. según sea apropiado.