Vista-like Tab Preview

John Doe / Saturday, July 11, 2009

Vista Operating System has a TaskBar items preview. A small popup displays the content of that window. Most of the browsers also have that if you install some plug-ins.

I think that is a pretty handy and cool feature to see what's in a Container by hovering over it.

In WPF, this is pretty straightforward by using a Popup and VisualBrush. What the VisualBrush does is paint an area with a Visual Element - the container. Popup is showing up with a simple animation.

In this sample, I am using a XamDockManager with couple of Documents in it. When hovering over the TabItems of the XamDockManager, the Preview will pop up displaying the content of the Document element, monitoring the window's position and displaying on top (if the window is close to the bottom end of the client are of the screen) or decrease its size to the end of the client area of the screen. The original sample was made with a MediaElement and a movie playing. It does work with movies, but I decided to remove it to decrease file size.

To enable the preview of the TabItem (or any ContentControl), create a style and wire the Loaded event for all the elements of that type:

<Style TargetType="{x:Type igDock:PaneTabItem}">
     <EventSetter Event="Loaded" Handler="PaneLoadedLoaded"/>
</Style>

And then enable the preview:

void PaneLoadedLoaded(object sender, RoutedEventArgs e)
{
     PreviewManager.CreatePreview(sender as UIElement);
}

You can find the solution in the attachments.

TabPreview.zip