Image in Tooltip in WPF

Introduction

In this article we will see how we can Bind an Image to the Tooltip of an Image.

Crating WPF Application Project

Fire up Visual Studio 2008 and Create a WPF Application and name the project as ImageTooltipInWPF.

ToolTipWPF1.gif

Here is the basic idea about the sample application; we will have a list of images and it would display it's Image (Larger than Thumbnail) in it's
Tooltip on the top as it's preview.

So let's have a ListBox and then we will bind the images onto it.

ToolTipWPF2.gif

The above Class represents the Movie Structure.

ToolTipWPF3.gif

We would have an ItemPanelTemplate and ListBoxItemTemplate to view the images in the ListBox.

ToolTipWPF4.gif

Now run the application to see the images loaded in the ListBox.

ToolTipWPF5.gif

Now our ImageToolTip should display on top of each image, for that to happen I have designed a Border that would contain an Image and it would be bound to Source of Parent Image.

ToolTipWPF6.gif

Include the above inside Image that is defined in the ListBoxItem Style.

Now we are ready to see our Image in Tooltip.

Run the application and mouse hover on any of the Images in the List.

ToolTipWPF7.gif

Hope this article helps.