Hi Dr. WPF,
I have a Window which is filled with multiple images shown on it side-by-side and I have a need to show a popup window when somebody hover overs an image element. Please note that it is not really a new window but somewhat like a tooltip (but not exactly that). The popup will contain a bigger version of the image they hovered over originally and if they move their mouse over another image, the popup will contain that image at that time and will move over the image the user last hovered over.
Can you please help me with this? I have tried playing with the “Popup” element and the “Tooltip” element but have not found a workable solution yet – I was not able to place the tooltip at the location I wanted (it always appeared a little below the mouse cursor).
Paras
Hi Paras,
I couldn’t resist the opportunity to answer your question online, since the sample I came up with fits so nicely with the ItemsControl series I just started, “ItemsControl: A to Z“. (Yeah, I know thats not the point of your question, but still…)
Here are the key properties to use when you are positioning a Popup:
- Placement
- PlacementTarget
- PlacementRectangle
- VerticalOffset
- HorizontalOffset
These are explained fairly well in this article in the docs. There are also a couple of application samples in the docs you can download here and here. But since you just want something quick…
Below you will find a very simple sample that implements the scenario you describe above using a ToolTip. You should be able to paste the XAML directly into XamlPad. Note that the popups may be slow since the images are being pulled across the web. For a more performant version, you can update the strings in the Items collection to point at local files on your hard drive.
This example uses the Placement property on the ToolTip with a value of “Bottom” combined with the HorizontalOffset and VerticalOffset properties to further displace the ToolTip. You can play with the values in XamlPad until you find what you like.
<Grid xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:sys="clr-namespace:System;assembly=mscorlib"> <Grid.Resources> <ControlTemplate x:Key="ICWithScrollingWrapPanel" TargetType="{x:Type ItemsControl}"> <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"> <ScrollViewer Margin="{TemplateBinding Padding}"> <WrapPanel IsItemsHost="True" /> </ScrollViewer> </Border> </ControlTemplate> <ToolTip x:Key="ImageToolTip" Placement="Bottom" HorizontalOffset="20" VerticalOffset="5"> <Grid Background="Gray"> <Image Source="{Binding}" /> </Grid> </ToolTip> <DataTemplate x:Key="ImageTemplate"> <Image Width="100" MaxHeight="100" Margin="5" ToolTip="{StaticResource ImageToolTip}" Source="{Binding}" /> </DataTemplate> </Grid.Resources> <ItemsControl Width="355" Height="200" Background="LightGray" BorderBrush="Black" BorderThickness="1" Padding="2" Template="{StaticResource ICWithScrollingWrapPanel}" ItemTemplate="{StaticResource ImageTemplate}"> <sys:String>http://www.microsoft.com/presspass/images/gallery/campus/bldg10_flags_web.jpg</sys:String> <sys:String>http://techfreep.com/images/googleplex.jpg</sys:String> <sys:String>http://www.sfgate.com/c/pictures/2006/12/24/bu_earns_yahoo_ny.jpg</sys:String> <sys:String>http://img.groundspeak.com/waymarking/b696fde2-62b8-426c-81dd-4e3ae6836402.jpg</sys:String> <sys:String>http://www.svdaily.com/applehq.jpg</sys:String> <sys:String>http://www.nextcomputers.org/NeXTfiles/Images/History/NeXT_Buildings/redwood02.jpg</sys:String> <sys:String>http://explorer.altopix.com/uploads/hz166e.jpg</sys:String> <sys:String>http://www.ti.com/corp/graphics/press/image/on_line/co1772.jpg</sys:String> <sys:String>http://www.freefotoexchange.netsons.org/data/510/61121758627-1.jpg</sys:String> </ItemsControl> </Grid>
Hope this helps!
Best regards,
Dr. WPF
