Swim control over other controls in WPF

Question

It’s hard for me to even formulate this question.

I display preview images to users in my user interface in a ListBox. When a user hovers over an image, I would like to expand it so that the user can see in more detail.

I reached the point where I can "pop up" the image, but of course it is still in the normal position in the layout, which means that instead of the image displayed on top of other controls next to it, it appears only on top of the controls rendered in front of him and under those that appear after him. It is also trimmed by the borders of the ListBox.

Is there an easy way (i.e. non-customizable control) to temporarily remove this image from the visual layout and put it above all other elements?

Here is a crappy demo app that shows what I'm talking about:

Note that the enlarged image is cropped by the borders of the ListBox (outside the list box is red). Also note that the user interface elements displayed after the scaled image are superimposed on it - the icons that appear later and the names of the elements ("Position 5" and others that are visible in the lower left corner).

Answer 1

The solution that works best for me is to use the Popup primitive. It does not provide much control over the animation (it comes with stock animation), but you can animate its contents in any way you like.

<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 this fragment, the pop-up window is not open until IsMouseOver is true for its image (with the name "icon"). When a mouse enters an image, two things happen. A popup window opens (at 640x640) and an image is displayed (48px at 48px). This image has a large scale conversion. The image "icon" also has a storyboard for MouseEnter and MouseLeave. This storyboard uses dual animation designed for a ScaleTransform popup. This storyboard enlarges the image when the mouse enters and squeezes it when it leaves with a good attenuation function.

Use case: “The user presents a list with small images for each item in the list. When the user hovers over a small image (icon), it appears forward and enlarged, giving the user a better view of the image. When the mouse leaves the image, it shrinks to its original size. "

Answer 2

If you are looking for something simple, you can also create a tooltip for an image (or ListBoxItem) containing a larger version of the image. It will be displayed in the same way as a normal tooltip when the user hovers over a smaller version of the image. Here is an example:

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

The effect is similar to what you describe, with the exception of the menu item that still exists, but there is also a large version of it, for example:

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

Answer 3

This effect is often called fisheye. You may be able to find resources using this term. Here is one example. http://www.codeproject.com/KB/menus/FishEyeMenu.aspx