Flotante de control sobre otros controles en WPF

Question

Me está costando trabajo redactar esta pregunta.

Estoy mostrando imágenes de vista previa a los usuarios en mi UI dentro de un ListBox. Cuando un usuario pasa el mouse sobre la imagen, me gustaría expandirla para que el usuario pueda ver más detalles.

He llegado al punto en el que puedo "abrir" la imagen, pero por supuesto todavía está dentro de su posición normal en el diseño, lo que significa que la imagen no se muestra encima de los otros controles cerca solo aparece encima de los controles que se le han dado y debajo de los que se muestran después. También está siendo recortado por los límites de ListBox.

¿Existe un modo simple (es decir, sin desarrollo de control personalizado) de eliminar temporalmente esa imagen del diseño visual y colocarla encima de todos los demás elementos?

Aquí hay una aplicación de demostración de mierda que muestra lo que estoy hablando:

Aviso la imagen ampliada se recorta por los límites del cuadro de lista (fuera del cuadro de lista es de color rojo). Además, observe que los elementos de la interfaz de usuario representados después de la imagen ampliada se superponen: ambos iconos que aparecen más adelante y los nombres de los elementos ("Artículo 5" y otros que se ven en la esquina inferior izquierda).

Answer 1

La solución que mejor funcionaba para mí era usar la primitiva Popup. No proporciona mucho control en lo que respecta a la animación (viene con animaciones de stock) pero puede animar sus contenidos de la forma que desee.

<Image 
    Name="icon" 
    Source="{Binding MaiImaeg}"> 
    <Image.Triggers> 
    <EventTrigger 
     RoutedEvent="Image.MouseEnter"> 
     <BeginStoryboard> 
     <Storyboard> 
      <DoubleAnimation 
       Storyboard.TargetName="tranny" 
       Storyboard.TargetProperty="ScaleX" 
       To="6" 
       Duration="0:0:1"> 
      <DoubleAnimation.EasingFunction> 
       <ElasticEase 
        Oscillations="1" 
        Springiness="8" /> 
      </DoubleAnimation.EasingFunction> 
      </DoubleAnimation> 
      <DoubleAnimation 
       Storyboard.TargetName="tranny" 
       Storyboard.TargetProperty="ScaleY" 
       To="6" 
       Duration="0:0:1"> 
      <DoubleAnimation.EasingFunction> 
       <ElasticEase 
        Oscillations="1" 
        Springiness="8" /> 
      </DoubleAnimation.EasingFunction> 
      </DoubleAnimation> 
     </Storyboard> 
     </BeginStoryboard> 
    </EventTrigger> 
    <EventTrigger 
     RoutedEvent="Image.MouseLeave"> 
     <BeginStoryboard> 
     <Storyboard> 
      <DoubleAnimation 
       Storyboard.TargetName="tranny" 
       Storyboard.TargetProperty="ScaleX" 
       To="0" 
       Duration="0:0:0" /> 
      <DoubleAnimation 
       Storyboard.TargetName="tranny" 
       Storyboard.TargetProperty="ScaleY" 
       To="0" 
       Duration="0:0:0" /> 
     </Storyboard> 
     </BeginStoryboard> 
    </EventTrigger> 
    </Image.Triggers> 
</Image> 
<Popup 
    Name="popup" 
    IsOpen="{Binding IsMouseOver, ElementName=icon, Mode=OneWay}" 
    PlacementTarget="{Binding ElementName=icon}" 
    Placement="Left" 
    Width="640" 
    Height="640" 
    StaysOpen="true" 
    AllowsTransparency="True"> 
    <Image 
     Width="48" 
     Height="48" 
     Source="{Binding MaiImaeg}"> 
     <Image.RenderTransform> 
      <ScaleTransform 
       x:Name="tranny" 
       CenterX="48" 
       CenterY="24" 
       ScaleX="1" 
       ScaleY="1" /> 
     </Image.RenderTransform> 
    </Image> 
</Popup> 

En este fragmento, la ventana emergente no está abierto hasta IsMouseOver es cierto para su imagen (llamado "icono"). Cuando el mouse entra en la imagen, suceden dos cosas. Se abre la ventana emergente (a 640x640) y se muestra una imagen (48px por 48px). Esta imagen tiene una transformación de escala en ella. La imagen "icono" también tiene un guión gráfico para MouseEnter y MouseLeave. Este guión gráfico utiliza una animación doble, dirigida a ScaleTransform de la imagen emergente. Este guión gráfico amplía la imagen cuando el mouse entra y la contrae cuando sale con una agradable función de relajación.

El caso de uso sería: "El usuario presenta un cuadro de lista con imágenes pequeñas para cada elemento de la lista. Cuando el usuario pasa sobre la imagen pequeña (icono), se extiende y se agranda, proporcionando al usuario una mejor vista de la imagen. Cuando el mouse sale de la imagen, se reduce a su tamaño original ".

Answer 2

Este efecto se denomina con frecuencia ojo de pez. Puede que tenga más suerte buscando recursos usando ese término. Aquí hay una muestra. http://www.codeproject.com/KB/menus/FishEyeMenu.aspx

Answer 3

Si está buscando algo simple, también puede crear una información sobre herramientas para la imagen (o ListBoxItem) que contiene la versión más grande de la imagen. Se mostrará como una información sobre herramientas normal cuando el usuario pase el ratón sobre la versión más pequeña de la imagen. He aquí un ejemplo:

<Image Width="100"> 
    <Image.Source> 
     <BitmapImage UriSource="pack://application:,,/smiley.jpg"/> 
    </Image.Source> 
    <Image.ToolTip> 
     <Image Width="500"> 
      <Image.Source> 
       <BitmapImage UriSource="pack://application:,,/smiley.jpg"/> 
      </Image.Source> 
     </Image> 
    </Image.ToolTip> 
</Image> 

El efecto es similar a lo que usted describe, a excepción de la opción de menú está todavía allí, pero también hay una versión más grande de la que se muestra, así:

alt text http://img695.imageshack.us/img695/4525/tooltipenlarge.png