“Smart Tag” type of popup in WPF

The other day I was searching around for examples of Office 2007 like “Smart Tag” type of popup implemented in WPF, but I could not find any with source code available. As you know that the tooltip control in WPF/XAML does not allow any controls you put inside a tooltip to receive focus or mouse click events, you have to use the primitive Popup control instead to achieve such functionality. So I decided to build one myself. It turns out the process is quite simple. The only trick that I find out and still not know how to solve elegantly is wiring up the delayed popup solely in XAML. Currently my implementation utilizes a custom service class that wires up the mouse events between the popup and the target control. The XAML part of the control is very simple:

Inside your Popup definition, you can define your Smart Tag popup as you would in any other XAML elements. The following is an example of a toolbar enclosed inside thepopup:

In order to support positioning the popup control in arbitrary location close to (but not border-to-border) its target control, you need to wire the MouseMove and MouseLeave events of both the Popup control and the target control. And you need a delayed hide/show service to ensure that the popup won’t flash if you quickly move your mouse around. This is achieved through a delayed DispatchTimer in the DelayedPopupService code.

This is a screen shot of the Smart Tag popup:

To see the Smart Tag in action, you can view the following screen clip:

Let me know what you think of this.

[Update: 2007.08.14]

The complete source code of the sample is uploaded.

[Updated: 1/16/2009]

New source code link is posted.

9 Responses to “Smart Tag” type of popup in WPF

  1. Shawn Smith says:

    Thanks. This was exactly the functionality that I was searching for. Learned a lot (started using WPF yesterday).

    Thanks again.

  2. alex says:

    I found you control very useful but it’s no longer available.
    Could you please republish source files or sent its to me.

  3. justin says:

    Man this is awesome!!
    Exactly what ive been wanting. Can you share a little more? The source code link is not working.

  4. Serene says:

    Hi there,

    The link to the sample is broken and i’m really interested to see how you have implemented this, as i just recieved a similar requirement.

    Is it possible to get an alternative download link?

    Thanks
    Serene

  5. Pavol Bosik says:

    Not bad man, not bad!
    But downloading sources does not work.

  6. MarTim says:

    I cannot download the source code. Can you send me the source code.

    Thanks

  7. Horst says:

    Hello, this is looking very intersting, but could you please fix the download link? Thanks!

  8. ligao101 says:

    New source code download link is now added to the bottom of the blog page. Please check. Thanks.

  9. Polaris says:

    Great idea. Thanks.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: