“Smart Tag” type of popup in WPF

August 14, 2007

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.


About Face 3.0 – reading time

August 9, 2007

Just got the new book by Alan Cooper – About Face 3.0. Seems this book comes out right on time when we are facing a new wave of UI technology revolution – Ajax, Flex, SlilverLight, XAML, WPF, and RIA (Rich Internet Application). I highly recommend this book to anyone who is in the UI design and develop business.


TextBox and Data Binding in WPF

August 9, 2007

Have you run into situations where you need your data-bound textbox update the underlying data automatically while you are typing? So when you hit the ‘Enter’ key, your keyboard event handler can examine the entered data right away?

Here is one of the ways to do it:

<TextBox Text=“{Binding YourDataSource, UpdateSourceTrigger=PropertyChanged }”
Keyboard.KeyDown=“TextBox_KeyDown”/>

The key is to use the “PropertyChanged” binding behavior. For a more complete review of UpdateSourceTrigger, you can take a look at its MSDN document. Now I wish the Visual Studio 2008 XAML editor can do IntelliSense of this while I am manually entering the data binding codes. It can at least save me 5 min research time 🙂

The Cider designer in Visual Studio 2008 still has a very long way to go to match what Windows Forms designer offers now in Visual Studio 2005.