Float eine Kontrolle über andere Kontrollen in WPF

Question

Ich habe eine harte Zeit, diese Frage sogar zu formulieren.

Ich zeige Vorschaubilder für Benutzer in meiner Benutzeroberfläche in einer ListBox an. Wenn ein Benutzer das Bild überfliegt, möchte ich es erweitern, damit der Benutzer mehr Details sehen kann.

Ich bin an den Punkt gekommen, wo ich das Bild "hochklappen" kann, aber natürlich ist es immer noch in seiner normalen Position im Layout, was bedeutet, dass das Bild über den anderen Kontrollen in der Nähe angezeigt wird Es erscheint nur über den Steuerelementen, die davor gerendert wurden, und unter den darunter gerenderten Steuerelementen. Es wird auch an den Grenzen der ListBox abgeschnitten.

Gibt es eine einfache (d. H. Keine benutzerdefinierte Steuerelement Entwicklung) Möglichkeit, dieses Bild vorübergehend aus dem visuellen Layout zu entfernen und über alle anderen Elemente zu setzen?

Hier ist eine beschissene Demo-Anwendung, die zeigt, was ich spreche:

Hinweis des gezoomte Bild wird durch die Grenzen des ListBox abgeschnitten (außerhalb des Listenfeld ist rot). Beachten Sie auch, dass UI-Elemente, die nach dem gezoomten Bild gerendert werden, diese immer noch überlagern - sowohl die Symbole, die später kommen, als auch die Objektnamen ("Objekt 5" und andere in der unteren linken Ecke).

Answer 1

Die Lösung, die am besten für mich funktionierte, war das Popup-Primitiv. Es bietet nicht viel Kontrolle in Bezug auf Animation (es kommt mit Stock-Animationen), aber Sie können seine Inhalte beliebig animieren.

<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 diesem Snippet ist das Popup nicht geöffnet, bis IsMouseOver für seine Bild wahr ist (mit dem Namen "Symbol"). Wenn die Maus das Bild betritt, passieren zwei Dinge. Das Popup öffnet sich (bei 640x640) und ein Bild wird angezeigt (48px mal 48px). Dieses Bild hat eine Maßstabsumwandlung. Das "icon" Image hat auch ein Storyboard für MouseEnter und MouseLeave. Dieses Storyboard verwendet eine doppelte Animation, die auf die ScaleTransform des Popup-Bildes ausgerichtet ist. Dieses Storyboard vergrößert das Bild, wenn die Maus es betritt und es schrumpft, wenn es mit einer schönen Beschleunigungsfunktion geht. Der Anwendungsfall wäre: "Dem Benutzer wird ein Listenfeld mit kleinen Bildern für jedes Element in der Liste angezeigt. Wenn der Benutzer über das kleine Bild (Symbol) schwebt, springt es nach vorne und vergrößert sich, wodurch der Benutzer eine bessere Ansicht erhält Wenn die Maus das Bild verlässt, schrumpft sie wieder auf ihre ursprüngliche Größe zurück. "

Answer 2

Dieser Effekt wird häufig als Fisheye bezeichnet. Möglicherweise haben Sie mehr Glück beim Suchen nach Ressourcen mit diesem Begriff. Hier ist ein Beispiel. http://www.codeproject.com/KB/menus/FishEyeMenu.aspx

Answer 3

Wenn Sie nach etwas Einfachem suchen, können Sie auch eine QuickInfo für das Bild (oder ListBoxItem) erstellen, das die größere Version des Bildes enthält. Es wird genau wie ein normaler Tooltip angezeigt, wenn der Benutzer die kleinere Version des Bildes überfliegt. Hier ein Beispiel:

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

Der Effekt ist ähnlich dem, was Sie beschreiben, mit Ausnahme der Menüpunkt ist immer noch da, aber es gibt auch eine größere Version davon gezeigt, wie folgt aus:

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