Galleggia un controllo su altri controlli in WPF

Question

Sto attraversando un periodo difficile anche in questa domanda.

Sto visualizzando le immagini di anteprima agli utenti nell'interfaccia utente all'interno di un ListBox. Quando un utente passa sopra l'immagine, mi piacerebbe espanderlo in modo che l'utente possa vedere più dettagli.

Sono arrivato al punto in cui posso "far apparire" l'immagine, ma ovviamente è ancora nella sua posizione normale nel layout, il che significa che piuttosto che l'immagine visualizzata sopra gli altri controlli vicino esso appare solo sopra i controlli renderizzati prima di esso e sotto quelli sottoposti a rendering dopo di esso. Viene anche ritagliato dai limiti del ListBox.

C'è un modo semplice (vale a dire, nessun sviluppo di controllo personalizzato) per, temporaneamente, rimuovere quell'immagine dal layout visivo e metterla sopra tutti gli altri elementi?

Ecco una demo app schifosa che mostra di cosa sto parlando:

Avviso l'immagine ingrandita è ritagliato dai limiti della ListBox (al di fuori della casella di riepilogo è rosso). Inoltre, noti che gli elementi dell'interfaccia utente sono stati renderizzati dopo che l'immagine ingrandita era ancora presente: entrambe le icone che verranno dopo e i nomi degli oggetti ("Elemento 5" e altri visti nell'angolo in basso a sinistra).

Answer 1

La soluzione che ha funzionato meglio era usare la primitiva Popup. Non fornisce molto controllo in termini di animazione (viene fornito con animazioni di serie), ma puoi animarne il contenuto in qualsiasi modo desideri.

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

In questo frammento di codice, il pop-up non è aperto fino IsMouseOver vale per la sua immagine (denominato "icona"). Quando il mouse entra nell'immagine, accadono due cose. Il Popup si apre (a 640x640) e viene mostrata un'immagine (48px per 48px). Questa immagine ha una trasformazione in scala su di essa. L'immagine "icona" ha anche uno storyboard per MouseEnter e MouseLeave. Questo storyboard utilizza una doppia animazione, mirata alla scala ScaleTransform dell'immagine. Questo storyboard ingrandisce l'immagine quando il mouse entra e si riduce quando esce con una bella funzione di andamento.

Il caso di utilizzo sarebbe: "All'utente viene presentata una casella di riepilogo con piccole immagini per ciascuna voce nell'elenco. Quando l'utente passa sopra l'immagine piccola (icona), si solleva e si ingrandisce, offrendo all'utente una vista migliore dell'immagine Quando il mouse lascia l'immagine, si rimpicciolisce fino alla sua dimensione originale. "

Answer 2

Questo effetto viene spesso definito come Fisheye. Potresti avere più fortuna a cercare risorse usando quel termine. Ecco un esempio. http://www.codeproject.com/KB/menus/FishEyeMenu.aspx

Answer 3

Se stai cercando qualcosa di semplice, potresti anche creare un suggerimento per l'immagine (o ListBoxItem) che contiene la versione più grande dell'immagine. Verrà visualizzato proprio come un normale suggerimento quando l'utente passa sopra la versione più piccola dell'immagine. Ecco un esempio:

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

L'effetto è simile a ciò che si descrive, tranne la voce di menu è ancora lì, ma c'è anche una versione più grande di esso indicato, in questo modo:

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