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

This entry was posted on Tuesday, October 16th, 2007 at 1:01 pm and is filed under ItemsControl, Tool Tips, WPF. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.