The great WPF ToggleButton and Popup Conundrum

For a while now we’ve been using a very simple pattern for opening custom popups by binding to the IsChecked property of a ToggleButton. It’s simple, needs no code-behind, and works 99% of the time.

However, it has a very annoying 1% which is the following:

  • You want your popup to open when the toggle button is clicked – OK
  • You want your popup to close when the user clicks elsewhere – off the window, etc – OK
  • You want your popup to close when you click the toggle button again- BUT THIS DOESN’T WORK

The reason is because the events happen as follows:

  • Open the Popup by clicking on the Toggle Button
  • Click on the Toggle button again
  • Before the “Click” is processed by the toggle button, the Popup handles the fact that the user has clicked elsewhere and so closes
  • By closing, the popup sets the IsChecked state of the toggle button back to unchecked via the 2-way binding
  • Now the “Click” is handled by the toggle button, but at this point the popup is closed, and the toggle button is not checked, so it re-checks itself, and re-opens the Popup !

The Solution

Many people have tried to solve this by using Timers, behaviours, fiddling with the Binding, but there is an annoyingly simple solution:

On the ToggleButton set the Property ClickMode=”Press”

…and you’re done…

Enjoy!

Advertisements

Leave a comment

Filed under UI Hints, UX, WPF

Leave a Reply

Please log in using one of these methods to post your comment:

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