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 !
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…