Question

I am pretty much stuck on this and need some insight. When the user mouseover’s a listboxitem I want to show some details regarding the item on which the mouse is currently over (hope I am making sense 🙁 )

To demonstrate what I am wanting to achieve please see the sample code

public class Customer
{
    public String FirstName { get; set; }
    public Image CustomerPhoto { get; set; }

    public Customer(String firstName, Image customerPhoto)
    {
        this.FirstName = firstName;
        this.CustomerPhoto = customerPhoto;
    }

}

public class Customers : ObservableCollection<Customer>
{
    public Customers()
    {
        Image simpleImage = new Image();    
        BitmapImage bi = new BitmapImage();
        bi.BeginInit();
        bi.UriSource = new Uri(@"c:\image.jpg",UriKind.RelativeOrAbsolute);
        bi.EndInit();
        simpleImage.Source = bi; 
        Add(new Customer("Customer", simpleImage));
    }
}

XAML

<ListBox ItemsSource="{StaticResource customers}">
  <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding FirstName}" />
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

Now when the user hovers over the listbox item, I want to show the customerphoto in a popup.

Many Thanks

P.S: code was “cooked up” while writing this post, so is for demo only. There will be multiple items in the listbox, hovering over each item must show the photo associated with that object.

Answer 1

Why not just use the ToolTip? In WPF, ToolTips don’t have to be text-only

<TextBlock.ToolTip>
    <ToolTip>
        <Image Source="{Binding CustomerPhoto}" />
    </ToolTip>
</TextBlock.ToolTip>